[Flutter 9기 창업반] 앱 개발 창업 부트캠프 56일차

드디어 디자인이 어느정도 마무리 되고, 본격적인 코딩에 들어가기 시작했다.

 

어제는 디자인 시스템 잡고 세팅하느라 시간이 좀 걸렸는데, 오늘부터는 정식으로 UI 작업을 시작했다.

처음 스플래시와 온보딩에 애니메이션을 넣으려고 에펙이랑 이것저것 만져보느라 시간을 좀 허비했는데

중요하지 않은건 나중으로 미루고 앱 제작부터 하기로 했다.

 

 니약?내약! 앱 — 스플래시부터 홈 화면까지 전체 UI 구현                                                                  

1. 스플래시 + 온보딩 이미지 UI 구현                                                        

  - 스플래시 화면: 배경 이미지(splash_background.png) + "니약?내약!" 로고 텍스트 오버레이, 2초 후 온보딩 자동 전환

  - 온보딩 3페이지: GIF 플레이스홀더를 실제 디자인 이미지로 교체

    - 1페이지: "아! 맞다!" + 빨간 캐릭터

    - 2페이지: 알람 아이콘 + "클릭!" + 파란 손

    - 3페이지: "진짜 쉽다!" + 노란 원

  - 하단 네비게이션: 점 인디케이터 + 다음 버튼 + 시작하기 버튼

 

2. 로그인·회원가입 전체 화면 디자인 정렬 (8개 화면)

  디자인 시스템 정비 (PSD 실측 기준)

 

  - AppTypography: authLogo 40pt/Heavy, authSubtitle 40pt/Bold, h3 25pt/Bold, bodySmall 18pt 등

  - AppColors: 성별 색상을 파스텔톤에서 브랜드 컬러(brandBlue/brandRed)로 변경

  - AppIcons: user→solidUser, 성별 아이콘 person/personDress로 교체

  - AppTheme: 비활성 버튼 색상 수정 — 배경 #C7C7BF, 텍스트 white

  - AuthInputField: 외부 focusNode 지원 추가, 포커스 또는 텍스트 입력 시 아이콘 파란색 유지 (_isActive 로직)

  - AuthLogoHeader: 상단 여백 제거 → 전 화면 타이틀 위치 통일

  - SocialLoginButton: 텍스트 25pt → 20pt 축소

 

  📱 화면별 주요 변경

  화면: 회원가입 및 로그인

  주요 변경: 소셜 로그인 5종(휴대폰/구글/애플/카카오/네이버), AppBar 추가, 타이틀 위치 통일

  ────────────────────────────────────────

  화면: 휴대폰 본인인증

  주요 변경: 이름·전화번호 입력 → 인증번호 요청 → 타이머, AppBar 뒤로가기 + subtitle 추가

  ────────────────────────────────────────

  화면: 이용약관

  주요 변경: AppBar(뒤로가기+X), 전체동의 bold 25pt, 개별 18pt 자간 -0.72, 구분선 #252525, 확인 버튼 하단 고정

  ────────────────────────────────────────

  화면: 이메일 회원가입

  주요 변경: AppBar 뒤로가기

  ────────────────────────────────────────

  화면: 비밀번호 설정

  주요 변경: AppBar 뒤로가기, 아이콘 lock→key

  ────────────────────────────────────────

  화면: 사용자 등록

  주요 변경: 생년월일 6자리 직접 입력 + 예시 표시, 성별 브랜드 컬러, 버튼 하단 고정

  ────────────────────────────────────────

  화면: 로그인

  주요 변경: 비밀번호 찾기 bold 강조, 회원가입 배너 노란 카드 디자인

  ────────────────────────────────────────

  화면: 회원 인증

  주요 변경: StatefulWidget 재구축, 인증번호 타이머 구현

  홈 화면 구축 (작업 중, feature/홈-화면 브랜치)

 

  - 3탭 구조: TabController 기반 — 오늘먹어(노랑) / 자주먹어(파랑) / 먹음안돼(빨강)

  - 상단 바: 유저 아이콘 + "홍길동" + 설정 톱니바퀴

  - 빈 상태: 탭별 마스코트 이미지(X자 캐릭터) + 안내 텍스트

  - FAB: 빨간색 원형 + 버튼

  - 마스코트 PNG 3개 에셋 추가 (mascot_today, mascot_frequent, mascot_danger)

  - 하단 네비게이션 바는 보류 (추후 디자인 확정 후 작업)

 

 3. Git

  - feature/온보딩-화면 → 커밋 5개 → PR #3 → main 머지 완료

  - feature/로그인-회원가입 → 커밋 11개 → PR #4 → main 머지 완료

  - feature/홈-화면 브랜치 생성, 홈 화면 작업 진행 중

 

  4. 오늘의 수치

  - 머지된 PR: 2개 (#3, #4)

  - 커밋: 27개

  - 신규/수정 파일: 40개

  - 구현 화면: 스플래시 1 + 온보딩 3 + 인증 8 + 홈 1 = 총 13개 화면

 

  5. 배운 점

  - Flutter AuthInputField에서 외부 focusNode를 받을 때, 내부 생성 여부(_ownsFocusNode)를 추적해서  
  dispose 시 조건부 해제해야 메모리 누수 방지

  - PSD 자간(letter-spacing) 변환 공식: PSD값 / 1000 × fontSize (예: -40 at 18pt = -0.72px)

  - TabBar에서 탭별로 다른 색상을 적용하려면 _tabController.addListener로 setState 후  
   _tabColors[currentIndex]를 labelColor/indicatorColor에 동적 할당