[토스] Frontend 모의고사에서 얻은 UI 설계 인사이트 회고

들어가며

이번 글에서는 다음 내용을 다룹니다.

• UI와 1:1 매칭이되는 코드
• 다른 사람의 코드에서 얻은 인사이트

모의고사에 도전한 이유

토스 모의고사는 항해 플러스 동기인 한별님 덕분에 알게 되었습니다. 토스는 꼭 일하고 싶은 회사라 주저 없이 참여했습니다.

최근 크래프톤에서 새로운 커리어를 시작하며, 취업 준비보다 실무 속에서 다음 도약을 준비하는 것이 더 중요하다고 느꼈습니다. 이 모의고사는 그 과정에서 제게 중요한 지표가 되었고, 2년 뒤 다시 토스에 도전하기 위해 앞으로도 여러 번 풀어보며 실력을 점검할 계획입니다. 제발 1회로 끝나지 않기를!

UI와 1:1 매칭되는 코드

적금 계산기

내가 처음 선택한 구조

처음에는 UI를 가능한 한 작게 쪼개고 책임 단위에 따라 분리하는 방식을 선택했습니다.

export function SavingsCalculatorPage() {
  return (
    <>
      <NavigationBar title="적금 계산기" />
      <Spacing size={16} />
      <SavingsCalculatorForm />
      <Spacing size={24} />
      <Border height={16} />
      <Spacing size={8} />
      <SavingsCalculatorTabs />
    </>
  );
}

각 컴포넌트가 역할을 갖고 있다고 생각했지만, 지나친 추상화로 UI 구조가 코드에서 바로 보이지 않았고, 오히려 가독성이 떨어졌습니다.

새롭게 배운 기준

• 적당한 추상화는 UI 구조가 코드에 그대로 표현되는 수준이다.
• 역할 없이 감싸기만 하는 Wrapper 컴포넌트는 지양한다.

개선된 구조

export function SavingsCalculatorPage() {
  return (
    <>
      <NavigationBar title="적금 계산기" />
      <Spacing size={16} />
      
      <AmountField {...} />
      <AmountField {...} />
      <Select {...} />
      
      <Spacing size={24} />
      <Border height={16} />
      <Spacing size={8} />
      
      <Tab {...}>
	      <Tab.Item value="products" selected={selected === 'products'}>
          적금 상품
        </Tab.Item>
        <Tab.Item value="results" selected={selected === 'results'}>
          계산 결과
        </Tab.Item>
        
        {match(selected)
	        .with('products', () => (
		        <Suspense>
			        <ProductList {...} />
		        </Suspense>
	        ))
	        .with('results', () => (
		        ...
	        )).exhaustive()}
      </Tab>
    </>
  );
}

이 구조는 UI 요소가 코드와 1:1로 대응되어 화면을 바로 떠올릴 수 있고, 페이지의 흐름도 자연스럽게 읽힙니다.
제공된 화면 UI와 비교해봐도 그렇게 느껴지지 않으신가요?

예측하지 말기

개발을 하다 보면, 미래 재사용 가능성을 예측해 불필요한 추상화를 만들거나 현재 책임에서 벗어난 코드를 작성하는 일이 많습니다. 저 역시 특정 방법론에 사로잡혀 코드의 위치나 분리 기준을 과하게 고민한 적이 많았습니다.

도메인에 한정된 컴포넌트를 굳이 공통 모듈로 분리하고 책임을 주입하는 방식으로 오히려 복잡도를 높이기도 했습니다. 재엽님의 해설에서 가장 크게 얻은 인사이트는 “예측하지 말라” 는 원칙이었습니다. 지금 필요한 기능에 집중하고, 정말 재사용이 필요해졌을 때 분리해도 늦지 않다는 점을 다시 배웠습니다.

재엽님은 훅이나 유틸을 작성하면서도 “언젠가 재사용될 수 있으니 미리 추상화하겠다” 는 식의 접근을 하지 않았습니다. 가장 가까운 곳에, 가장 단순한 방식으로 코드를 작성했습니다. 마지막에 말씀하신 “책임 단위의 추상화를 잘하면 재사용성은 자연스럽게 따라온다” 는 문장은 특히 깊게 남았습니다.

이 작은 깨달음들이 쌓이며 성장하고 있다는 느낌이 들어 즐거웠습니다.

마무리하며

이 모의고사의 가장 큰 장점은 다른 참가자의 코드를 직접 확인할 수 있다는 점이었습니다. 다양한 관점을 비교하며 배우는 점이 많았고, 새로운 라이브러리를 접하며 제가 놓치고 있던 트렌드도 자연스럽게 파악할 수 있었습니다. 앞으로는 오픈 소스나 다른 개발자의 코드를 적극적으로 읽으며 인사이트를 쌓으려 합니다.

토스 과제를 준비하며 반복해서 들었던 “평소 하던 그대로 하라”는 말도 이번에 더 분명하게 이해할 수 있었습니다. 단순히 익숙한 방식대로 하라는 뜻이 아니라, 불필요하게 복잡한 구조를 만들지 말고, 누구나 읽기 쉬운 일반적인 코드를 작성하라는 메시지였습니다. 앞으로는 과한 창의성보다는 명확함과 단순함을 우선해 코드를 작성해보려 합니다.

이 철학을 바탕으로 크래프톤에서도 꾸준히 성장하고 싶습니다.
그리고 2년 뒤에는 토스에서 일하고 싶습니다. 그 목표를 위해 계속 노력하겠습니다.

예고

해설과 토의에서 얻은 인사이트를 바탕으로 이번 과제를 다시 풀어볼 예정입니다. 저는 직접 손을 움직여야 오래 기억하는 타입이라, 이번 경험을 행동으로 옮기며 확실히 체화해보려 합니다. 다음 글에서 그 내용을 다뤄보겠습니다.