저는 수학 과외를 하면서, 짬짬이 제 투자 판단을 도와주는 개인 도구도 만들고 있어요. 여러 지표를 한 화면에 모아 “이 종목을 어떻게 볼까”를 정리해주는 분석 페이지가 핵심인데, 기능을 붙이다 보니 이 화면이 점점 손대기 무서운 덩어리가 됐습니다. 오늘은 그 얽힌 화면을 어떻게 풀어냈는지, 그리고 당장 기능을 추가하지도 않으면서 왜 굳이 구조부터 바꿨는지를 정리할게요.
문제 — 데이터와 화면이 한 덩어리로 엉켜 있었다
분석 페이지에는 밸류에이션, 기술적 지표, 지배구조 같은 여러 종류의 데이터가 카드처럼 죽 나열됩니다. 그런데 그 카드를 그리는 코드가 한 파일 안에 데이터 계산과 화면 그리기가 뒤섞인 채 들어 있었어요. 카드 하나를 살짝 옮기거나 디자인을 바꾸려 해도, 다른 카드의 코드까지 줄줄이 얽혀 있어 어디를 건드리면 어디가 깨질지 예측이 안 됐습니다.
이게 왜 문제냐면, 저는 앞으로 이 화면을 자주 바꿀 계획이었거든요. 나중에 “투자 성향별로 다른 카드를 보여주기”, “디자인을 싹 바꾸기”, “단타용 분석 섹션을 따로 붙이기” 같은 걸 하고 싶었어요. 지금 구조로는 그럴 때마다 얽힌 실타래를 통째로 다시 푸는 꼴이 될 게 뻔했습니다.
결정 — 기능은 그대로 두고 구조만 바꾼다
여기서 초보로서 고민이 됐어요. 눈에 보이는 새 기능이 하나도 안 생기는 작업이었거든요. 사용자에겐 어제와 똑같은 화면이죠. “지금 이걸 할 때인가?” 싶었습니다.
그래도 하기로 한 이유는, 이런 정리는 미룰수록 비싸지기 때문이에요. 카드가 더 늘어난 뒤에 풀면 실타래가 더 굵어져 있을 테니까요. 채점으로 치면, 오답 노트를 단원별로 정리해두면 나중에 약점을 찾기 쉬운 것과 같아요. 지금의 수고가 나중의 나를 위한 투자인 셈이죠. 그래서 “기능 추가는 아니지만, 유지보수와 확장을 위해 구조를 먼저 다진다”로 결정했습니다.
어떻게 — ‘카드’라는 단위로 잘라내기
방향은 단순했어요. 얽힌 화면을 자기 완결적인 조각(카드) 단위로 잘라내는 겁니다. 각 카드는 자기가 그릴 데이터와 화면만 알고, 바깥과는 최소한으로만 연결되게요.
모듈화: 얽힌 코드를 “같이 쓰이는 것끼리” 독립된 덩어리로 묶는 것. 한 덩어리를 고쳐도 다른 덩어리에 파장이 안 가게 경계를 긋는다.
이름은 ‘모듈’이 더 정확한 표현이지만, 작업하며 부르기 쉽게 Card로 정했어요. 그리고 두 가지를 분리했습니다.
- 카드(Card): 밸류에이션 카드, 기술적 지표 카드, 지배구조 카드처럼 화면에 보이는 한 조각.
- 그룹(Group): 같이 묶여 다닐 카드들을 한 데 모은 상위 덩어리(예: 가치 관련 카드 묶음, 기술적 카드 묶음).
이렇게 하니 화면 코드는 “어떤 그룹을 어디에 놓을지”만 조립하면 되고, 각 카드 안이 어떻게 생겼는지는 신경 안 써도 됐어요. 데이터를 골라 넘겨주는 부분도 선택자(selector)라는 별도 조각으로 빼서, “이 카드엔 이 데이터”를 한곳에서 관리하게 했습니다.
선택자(selector): 큰 데이터 뭉치에서 특정 화면이 쓸 부분만 골라 꺼내주는 함수. 화면은 데이터가 어디서 오는지 몰라도 되고, 데이터 구조가 바뀌어도 선택자만 고치면 된다.
한꺼번에 안 하고, 카드 하나씩 떼어냈다
중요한 건 이걸 한 번에 다 뜯어고치지 않았다는 거예요. 얽힌 걸 통째로 갈아엎으면 그 자체가 거대한 사고가 되니까요. 대신 카드를 하나씩 순서대로 떼어냈습니다. 카드 하나 추출 → 화면이 이전과 똑같이 나오는지 확인 → 다음 카드, 이런 식으로요.
이렇게 잘게 나눠 진행하니 매 단계가 작고 안전했어요. 각 단계에서 타입 검사(코드가 서로 안 어긋나는지 자동 확인)를 돌려 “떼어낸 카드가 옛날과 똑같이 동작하는지”를 확인했고, 옮기다 안 쓰게 된 코드 조각도 그때그때 걷어냈습니다. 큰 리팩터링일수록 작은 걸음으로 쪼개는 게 안전하더라고요.
그래서 뭘 하면 되나
화면이 손대기 무서운 덩어리가 됐다면, 이 순서로 풀어보세요.
| 신호 | 판단 | 액션 |
|---|---|---|
| 한 조각 바꾸면 다른 데가 깨짐 | 🔴 경계가 없는 덩어리 | 자기 완결적 ‘카드’ 단위로 분리 |
| 같이 다니는 조각들이 흩어짐 | 🟡 상위 묶음 필요 | 카드들을 그룹으로 모아 조립 |
| 데이터 출처가 화면에 박혀 있음 | 🟡 변경에 취약 | 선택자로 데이터 고르기를 분리 |
| 통째로 갈아엎고 싶음 | 🔴 대형 사고 위험 | 카드 하나씩·타입검사로 검증하며 |
한 문장 요약: 얽힌 화면은 자기 완결적인 ‘카드’ 단위로 잘라 그룹으로 조립하고, 데이터 고르기는 선택자로 분리하라 — 그리고 통째로가 아니라 카드 하나씩, 매번 이전과 같은지 확인하며 옮겨라.
돌아보면 이 작업의 값어치는 “오늘 뭐가 좋아졌나”가 아니라 “내일 뭘 쉽게 할 수 있게 됐나”에 있었어요. 새 카드를 붙이는 것도, 디자인을 바꾸는 것도 이제 실타래를 다시 풀 필요 없이 조각을 골라 끼우면 됩니다. 당장 화면은 똑같지만, 다음에 바꿀 때의 나는 훨씬 편해졌어요. 눈에 안 보이는 이런 정리가, 오래 굴러가는 프로젝트에선 결국 속도가 되더라고요.