[내일 배움 캠프] 22일
TIL: 스터디 매칭 MVP 과제 — 컴포넌트부터 잡아야 화면이 편해진다
오늘은 3번째 개인 과제를 진행하면서, 1~4단계(흐름/IA/와이어)는 이미 어느 정도 해둔 상태에서 5번 이후(컴포넌트·디자인 시스템·프로토타입 준비)부터 본격적으로 손을 댔다.
결론부터 말하면, 화면을 예쁘게 꾸미기 전에 반복 요소를 컴포넌트로 정리해두는 게 작업 속도도 빨라지고 결과물 퀄리티도 안정적이었다.
1) 버튼 컴포넌트 완성: Variant + Properties로 “사용성” 만들기
가장 먼저 버튼을 컴포넌트로 정리했다. 버튼은 모든 화면에서 반복되기 때문에, 여기를 먼저 잡아두면 이후 작업이 훨씬 편하다.
Variant 구성
Type = Primary | Secondary
State = Default | Disabled
Properties 구성
Label : 텍스트 프로퍼티
Leading Icon / Trailing Icon : Boolean 프로퍼티(아이콘 표시 여부)
아이콘 교체 : Instance swap(드롭다운으로 아이콘 선택)
오늘의 핵심 배움
처음에는 “아이콘 버튼을 따로 만들지 말고 Boolean으로만 처리하면 되지 않나?”라고 생각했는데,
아이콘 자체를 쉽게 바꾸려면 Instance swap이 필요했고, Instance swap은 벡터에 걸 수 없다는 걸 알게 됐다.
해결: 아이콘을 Icon/... 형태로 컴포넌트화한 뒤, 버튼 안에 인스턴스로 넣고 swap property를 걸어야 한다.
또 하나 중요했던 건, Boolean을 아이콘 레이어에 걸면 공간이 남을 수 있어서
아이콘을 담는 Slot 프레임(LeadingSlot/TrailingSlot)에 Boolean을 걸어야 레이아웃이 깔끔하게 유지된다는 점이었다.
2) 컬러/텍스트 스케일 정리: Primary는 강조, Text는 정보 계층
퍼플 계열 Primary 스케일은 “강조/상호작용 요소”에 쓰고,
Text 50~900 스케일은 “정보 계층”을 정리하는 데 사용했다.
내가 잡은 텍스트 규칙(간단 요약)
Title: Text/900
Body: Text/700
Meta: Text/500
Placeholder/Disabled: Text/300
Border/Divider: Text/200
이 기준을 만들고 나니까, 카드/필드/설명 문구를 배치할 때 “어떤 게 중요한지”가 자연스럽게 정리됐다.
3) 버튼 다음에 만들 컴포넌트 우선순위 정하기
버튼을 끝내고 나니 “다음에는 뭘 컴포넌트로 만들면 가장 효율이 좋을까?”가 고민이었다.
과제 평가 기준을 생각하면 반복되는 UI 요소가 정답이다.
그래서 다음 순서로 만들기로 정리했다.
Chip(필터 칩)
Card(리스트용/상세용 2종)
Field/Text(입력 컴포넌트)
(선택) Badge, TopBar
특히 카드가 두 종류(가로 리스트 / 세로 상세)라서,
무리하게 하나의 카드에 Variant를 너무 많이 넣기보다는 컴포넌트를 분리하는 쪽이 관리가 더 쉬울 것 같았다.
4) Input 컴포넌트 설계: “입력됨/안입력/Disabled” 상태 만들기
신청 화면에 들어가는 인풋도 컴포넌트로 만들 계획을 잡았다.
요구 조건은 세 가지:
안입력(Empty): placeholder가 보이는 상태
입력됨(Filled): 값이 보이는 상태
Disabled: 수정 불가능한 상태
이걸 깔끔하게 처리하려면 Variant 속성을 이렇게 나누는 게 직관적이다.
Value = Empty | Filled
State = Default | Disabled
오늘은 설계까지 정리했고, 다음 작업에서 실제 컴포넌트로 완성할 예정이다.
5) 프로토타입에서 화면이 한 번에 보이는 문제 원인 파악
프로토타입을 실행했는데 화면 3장이 한 번에 같이 보이는 문제가 있었다.
알고 보니 3개 화면이 큰 프레임 안에 같이 들어가 있는 구조라서, 프로토타입에서도 “하나의 큰 화면”처럼 보였던 것.
해결 방향:
각 화면을 독립적인 iPhone Frame(Width 375)로 분리
시작점(Flow starting point)을 탐색 화면으로 지정
버튼 클릭 → 다음 프레임으로 이동하도록 연결
“화면은 반드시 프레임 단위로 분리해서 프로토타입을 구성해야 한다”는 걸 다시 체감했다.
6) 네이밍 컨벤션: Key–Value 패턴으로 정리하기
도전과제 요구사항(영문 네이밍 컨벤션)에 맞춰, 반복 정보는 Key–Value 구조로 통일하는 게 좋다고 판단했다.
예를 들면 일정/방식/정원/규칙 같은 항목들은 전부
Item/InfoRow
Text/Label
Text/Value
로 통일하면 확장도 쉽고 구조도 명확하다.
오늘의 결론
화면을 먼저 꾸미기 전에 컴포넌트를 먼저 잡아두면
나중에 화면 정리/프로토타입 연결/디자인 시스템 정리까지 훨씬 편해진다.
특히 버튼처럼 반복되는 요소는
Variant + Properties를 제대로 설계해두는 게 전체 퀄리티를 끌어올리는 가장 빠른 방법이었다.
