Stitch로 잡은 초기 디자인을 토대로 나머지 모든 화면 디자인을 마무리했고, UI 구현까지 한 번에 진행했다.
앱 이름: MOTI
앱 이름은 MOTI로 정했다. Motivation의 앞 4글자를 딴 이름으로, 당신의 창작 본능을 깨우고 지치지 않게 관리해주는 비즈 관리 파트너라는 의미를 담았다.
로고는 비즈 4개를 실로 연결하는 컨셉으로 만들었다. 메인 컬러를 넣은 버전과 심플한 버전, 두 가지로 제작했다.
네비게이션별 메인 화면
탭 네비게이션은 총 4개 화면으로 구성했다.
- 홈 : 로그인한 사용자 정보, 기능 요약, AI 색상 조합 추천, 빠른 추가 기능
- 재료 : 타이틀과 추가 버튼, 검색·필터, 재료 목록
- 제품 : 타이틀과 추가 버튼, 검색·필터, 제품 목록
- 프로필 : 사용자 정보, 앱 안내, 계정 관련 정보
AI 색상 조합 추천
개인적으로 가장 공들인 화면이다.
비즈 개수를 선택하고, 조합에 꼭 들어갔으면 하는 색상을 직접 고를 수 있다. 기본 제공 색상 중에서 선택하거나, 색조·채도·명도를 직접 조작해서 커스텀도 가능하다. 추천받은 색상 조합은 이미지로 공유할 수 있다.
이번 프로젝트에서 처음으로 AI를 직접 연결해본 기능이기도 하다. 구현 과정은 따로 글로 자세히 다뤄볼 예정이다. 🙂
재료 추가 및 수정
헤더에는 뒤로가기, 타이틀, 즐겨찾기 버튼을 배치했다. 재료 이미지 업로드, 재질·모양 선택, 특징 태그 추가, 카테고리 커스텀까지 상세하게 입력할 수 있는 구조다.
제품 정보
사용한 재료 목록을 한눈에 볼 수 있고, 재료를 탭하면 모달로 상세 정보를 확인할 수 있다. 제품은 이미지로 공유하는 것도 가능하다.
제품 추가 및 수정
제작일은 캘린더로 직접 선택할 수 있고, 재료 추가 버튼을 누르면 기존에 등록해둔 재료 목록에서 검색·필터로 골라서 추가할 수 있다. 제품 정보를 상세하게 입력할 수 있는 구조로 잡았다.
공유 기능
공유하기를 누르면 전체 화면이 아닌, 이미지와 설명 컨테이너 부분만 따로 이미지로 저장·공유할 수 있다.
제품 공유와 AI 색상 조합 공유, 두 군데 모두 적용했다.
마치며
혼자 디자인부터 구현까지 해보는 게 이번이 두 번째다.
처음엔 Stitch 같은 도구도 없어서 스스로 디자인했는데 솔직히 결과물이 성에 차지 않았었다.이제는 AI 도구들이 생겨서 퀄리티도 올라가고 만족도도 훨씬 높아진 것 같다. 코드 구현에도 Claude Code를 함께 사용하고 있어서 기능 구현 시간도 줄고 정보 검색도 빠르게 할 수 있어서 개발 속도가 많이 빨라졌다.
물론 AI가 만들어준 결과물이 내가 원하는 방향에 맞게 나왔는지 사람이 직접 확인하는 과정은 여전히 필요한 것 같다.
AI 도구들 덕분에 1인 개발의 허들이 확실히 낮아졌다는 걸 체감하고 있다.
프론트엔드는 웹 경력이 있다 보니 React Native가 처음이었음에도 나름 수월하게 진행됐다. 이제 백엔드 구현이 남았는데... 솔직히 좀 많이 걱정된다........ 다음 글에서 그 과정을 담아볼 예정이다.
