[내일 배움 캠프] 20일차

오늘 한 일 요약

스터디 매칭 서비스 주제로 MVP 범위(모집글 탐색 → 신청 제출 → 매칭 결과 확인)를 확정하고,
1~3단계(문제 정의/흐름/IA/와이어프레임)까지 진행한 뒤 4단계(UI 스타일/컴포넌트화) 방향을 잡았다.

1단계: 사용자 흐름 정의 & 주요 목표 설정ㅈ

해결하고자 하는 사용자 문제

스터디 모집글이 많아 내 조건에 맞는 스터디를 빠르게 비교·선택하고 신청하기 어렵다.

탐색→신청→결과 확인 단계에서 안내가 부족하면 사용자가 다음 행동을 못 하고 이탈할 수 있다.

신청 후 매칭 상태가 불명확하면 불안해서 다음 행동(기다리기/다시 탐색)을 결정하기 어렵다.

사용자 목표/해피패스

목표: 조건에 맞는 스터디를 탐색하고 신청한 뒤 매칭 결과를 확인한다.

해피패스: 모집글 탐색 → 원하는 스터디 선택 → 신청 제출 → 매칭 결과 확인

배운 점: 흐름을 먼저 텍스트로 확정해두면 이후 IA/와이어에서 길을 잃지 않는다.

2단계: 정보 구조(IA) & 화면 기획

화면 목록(3화면 MVP)

모집글 탐색(Browse)

신청 제출(Apply)

매칭 결과 확인(Result)

IA 트리 구성

모집글 탐색: 검색/필터(온라인/요일·시간대/난이도 등) + 리스트 카드(제목/소개/일정/방식/정원·상태) + 신청 진입

신청 제출: 선택한 스터디 요약 + 최소 입력(한줄 소개/가능 시간/닉네임 등) + 제출

결과 확인: 대기/성공/실패 상태 + 안내 메시지 + 다음 행동 CTA(알림 설정/다시 탐색/채팅방 이동)

배운 점: 2단계는 “화면을 예쁘게”가 아니라 각 화면에서 사용자가 무엇을 결정하는지, 어떤 정보가 필요한지를 명확히 적는 단계다.

3단계: 와이어프레임 & 레이아웃 구성

탐색 화면 와이어

필터 칩 + 결과 수/정렬 + 카드 리스트

카드 정보 위계를 “제목 → 소개 → 조건(요일/시간/온라인) → 정원/상태”로 정리

상태에 따라 CTA를 활성/비활성(모집중/모집완료)로 처리

신청 화면 와이어

상단에 선택한 스터디 요약(결정에 필요한 핵심 정보 위주)

입력폼은 최소(필수/선택 표시)

하단 CTA는 고정(신청 제출이 Primary)

결과 화면 와이어

“매칭 대기” 상태를 중심으로 설계

상태를 크게 보여주고 하단에 다음 행동 CTA 제공(알림 설정/다른 스터디 찾기)

신청한 스터디 요약 미니 카드 추가로 맥락 유지

배운 점: 와이어프레임은 디자인 초안이 아니라 논리 검증용 설계라서, 박스보다 “정보 순서/행동 유도”가 우선이다.

4단계 준비: UI 디자인 & 컴포넌트화 방향

프라이머리 컬러 결정

퍼플 계열로 방향 확정(집중/학습/프리미엄 톤)

추천: 인디고 퍼플(#4F46E5) 또는 바이올렛(#7C3AED) 기반

최소 컴포넌트 계획

Button(Primary/Secondary)

Filter Chip(Selected/Default)

Study Card(리스트 카드)

Status Badge(모집중/마감임박/마감)

Result Status Block(대기/성공/실패)

배운 점: 컴포넌트는 “많이 만드는 것”보다 반복되는 요소를 최소 범위로 정리하고 일관성을 유지하는 게 핵심.

어려웠던 점 & 해결

3화면 MVP인데 상세 화면을 따로 만들고 싶어서 범위가 커질 뻔함
→ 상세는 별도 화면으로 분리하지 않고, 탐색 카드에서 핵심 정보를 충분히 보여주는 방식으로 해결.

결과 화면에서 데드엔드가 생길 수 있음
→ 상태(대기) + 다음 행동 CTA(알림/재탐색)를 제공해 흐름을 끊지 않도록 설계.