소개
프로필을 만들고 공유할 수 있는 앱을 구상하면서 이번 프로젝트를 시작하게 되었습니다. 먼저 PRD를 작성하고, 이를 요약한 내용을 바탕으로 stich에 앱 화면 생성을 요청했어요.
stich에서 필요한 화면들을 만들어준 덕분에, 이전 실습처럼 화면을 다운로드한 뒤 claude code의 도움을 받아 Flutter 앱을 구현하기 시작했습니다.
진행 방법
📱 앱 구현 흐름
먼저 구현한 화면들: 온보딩 → 로그인 → 회원가입 → 홈 → 프로필
각 페이지 간 이동 흐름까지 확인한 뒤, API 연동 작업에 착수했습니다.
🛠️ 백엔드 & API
PRD를 기반으로 Spring Boot 백엔드 API를 claude code로 구현했습니다.
리팩토링은 앞으로 필요하겠지만, 우선 정상 동작하는 서버를 만드는 것이 목표였고, 그 목표는 달성했어요.
🔐 로그인 구현 순서
이메일/비밀번호 로그인부터 구현
이후 사용자 인증을 더 편하게 하기 위해 소셜 로그인 도입을 고민
가장 범용적인 구글 로그인을 먼저 붙이기로 결정
🤖 claude code의 도움
모바일 앱에서 소셜 로그인을 구현하는 것은 처음이었어요
claude code는:
필요한 라이브러리를 자동으로 찾아주고
GCP(Google Cloud Platform)에서 설정해야 할 항목들을 친절히 알려주고
가이드 문서(.md)까지 자동으로 생성해줬습니다!
덕분에 추가 검색 없이도 쉽게 연동할 수 있었어요 💪
한 가지 아쉬운 점은 client ID를 잘못 입력해서 시간을 꽤 허비했다는 점입니다
사소한 실수지만, 다시 확인하는 습관이 중요하다는 걸 다시 깨달았어요
결과와 배운 점
전체적인 인증 흐름(API + 모바일 앱)을 이해하는 데 큰 도움이 됐어요
GCP와 같은 외부 플랫폼과 연동하는 과정에서 얻은 노하우가 많습니다
특히 AI 도구(claude code)의 활용 가능성을 체감할 수 있었습니다:
코드 구현
환경 설정
문서 자동 생성까지!
앞으로의 계획
현재 앱 디자인 중 일부(등록/수정 페이지)는 마음에 들지 않아 리디자인 예정
남은 기능들도 차례차례 구현하며 앱 완성도를 높여갈 계획입니다
