[내일 배움 캠프] 21일차

TIL — 스터디 매칭 MVP 과제(4단계) 진행 기록

오늘 한 일 요약

스터디 매칭 서비스 MVP(탐색 → 신청 → 결과) 흐름을 기준으로 3개 화면 UI를 정리하고, 4단계 요구사항에 맞춰 컬러/타이포 스타일과 컴포넌트(버튼/칩/카드/필드) 구조를 만들기 시작했다.

1) 화면 구성(3장) 최종 정리

Search(스터디 탐색)
필터 칩(온라인/평일저녁/난이도) + 결과/정렬 + 카드 리스트 구조로 “빠른 비교/선택”이 가능하도록 설계.

Apply(신청 제출)
선택한 스터디 요약 정보(일정/방식/정원/상태)를 상단에 배치하고, 최소 입력으로 신청을 제출하도록 구성.

Result(매칭 결과 - 대기)
상태(대기)를 크게 보여주고 알림 설정 / 다른 스터디 찾기 CTA를 제공해 데드엔드 없이 다음 행동이 이어지게 설계.

화면 설명 문구(제출용)도 정리

각 화면 아래에 “목적/설계 의도”를 한두 줄로 붙여 과제 요구사항을 충족하도록 준비했다.

2) 와이어 → UI로 넘어오며 신경 쓴 점

“예쁜 화면”보다 정보 위계(제목→설명→조건→상태)와 행동 유도(CTA 우선순위)를 먼저 고정했다.

결과 화면에서 사용자가 막히지 않도록 상태 안내 + 다음 행동 버튼을 반드시 제공했다.

3) 디자인 시스템(컴포넌트) 정리 시작

Design System 페이지를 만들고 다음 요소들을 정리했다.

컬러/타이포

퍼플 계열을 메인 톤으로 잡고 스와치 구성(Primary + 중립 그레이).

타이포 샘플을 만들어 제목/본문/보조 텍스트 위계를 정리.

컴포넌트(최소 범위)

Button 세트를 만들고 상태(Disabled 등) 분리를 고민함.

카드(Card), 입력 필드(Field) 기본 형태를 잡아 반복 요소를 재사용할 준비를 함.

필터 칩은 버튼과 역할이 달라서 Chip 컴포넌트로 분리하는 방향을 확정.

배운 점: 컴포넌트는 많이 만드는 것보다, Primary/Secondary + State(Default/Disabled)처럼 규칙이 보이게 설계하는 게 더 중요했다.

4) 문제 해결 기록(피그마)

필터 칩이 오른쪽에서 겹치는 문제

Auto layout에서 컨테이너 폭이 고정인데 Clip/스크롤이 없어서 발생.

해결 방향: Chip Row(내용)는 Hug, 컨테이너는 Clip content ON + Horizontal scrolling으로 “겹침 없이 가로 스크롤” 구조로 정리.

5) 오늘 만든 문장(신청 화면 규칙/주의사항)

“노쇼 1회 경고, 2회 누적 시 스터디 참여가 제한될 수 있어요.”

느낀 점

4단계는 ‘디자인’보다 시스템(스타일/컴포넌트)로 일관성을 증명하는 단계라는 걸 체감했다.

특히 버튼/칩/카드 같은 반복 요소를 컴포넌트로 묶으면 수정이 쉬워지고 화면 전체 톤이 한 번에 정리된다.