안녕하세요! 오늘은 Tennis GG 프로젝트를 진행하면서 AI(Stitch AI)를 활용해 화면 설계를 어떻게 효율적으로 진행했는지 공유해보려 합니다.
앱 개발 과정에서 가장 고민되는 부분 중 하나가 바로 “복잡한 입력 폼을 어떻게 직관적이고 예쁘게 만들 것인가?” 입니다. 특히 제가 개발 중인 ‘매칭 생성’ 페이지는 날짜, 시간, 테니스장 위치, NTRP 레벨(실력), 구력, 모집 인원 등 입력해야 할 정보가 많아 자칫하면 화면이 복잡해지기 쉬웠습니다.
이 난관을 AI와의 협업으로 어떻게 해결했는지, 실제 프롬프트 예시와 결과물을 통해 보여드릴게요.
1. 디자인 난관: 정보는 많고, 화면은 좁다
‘매칭 생성’ 페이지는 사용자가 가장 자주 쓰는 핵심 기능입니다. 그래서 다음 조건들을 만족해야 했습니다.
- 직관성: 매칭(Match)과 양도(Transfer) 모드를 쉽게 오갈 수 있어야 함.
- 편의성: NTRP나 구력 같은 수치 입력은 타이핑보다 슬라이더가 편함.
- 심미성: 딱딱한 폼 대신 카드 형태의 깔끔한 디자인.
처음부터 모든 UI 코드를 짜려니 막막해서, Stitch AI에게 “초안”을 요청해 보았습니다.
2. AI에게 요청하기 (Prompt Engineering)
AI에게 원하는 결과물을 얻으려면 구체적인 요구사항을 전달하는 것이 핵심입니다. 저는 아래와 같이 요청했습니다.
[요청 프롬프트 예시]
“Flutter로 테니스 매칭 생성 페이지를 만들고 싶어. 다음 요구사항을 반영해줘:
- 상단 탭: ‘매칭’과 ‘양도’를 전환할 수 있는 커스텀 세그먼트 컨트롤(Pill Switcher 스타일)을 만들어줘.
- 섹션 구분: 각 입력 항목(장소/시간, 게임 정보, 모집 인원)을 카드(Card) 형태로 묶어서 깔끔하게 보여줘.
- 입력 방식:
- NTRP(1.0~4.5)와 구력은
RangeSlider를 사용해서 범위로 선택하게 해줘.- 모집 인원은 +, – 버튼이 있는 카운터 형태로 만들어줘.
- 디자인: 전체적으로 테니스 느낌이 나는 연두색(#C0F24E)을 포인트 컬러로 사용하고, 다크 모드도 고려해줘.”
단순히 “페이지 만들어줘”가 아니라, 구체적인 위젯 스타일(Pill Switcher, RangeSlider)과 컬러 코드, 구조(Card)를 명시했습니다.
3. AI의 결과물 (Initial Draft)
놀랍게도 AI는 제가 요청한 구조를 거의 완벽하게 디자인/코드로 구현해 주었습니다.
실제로 프롬프트를 입력하고 생성된 이미지들입니다.
물론 디자인 뿐만 아니라 저 스타일을 구현하기위한 코드도 제공되었습니다. 코드의 양이 방대하여 코드에 대한 내용은 생략합니다.
AI가 잡아준 핵심 포인트는 다음과 같았습니다:
Obx를 활용한 상태 관리 코드를 미리 작성해 줌.- _buildSectionCard 같은 재사용 가능한 위젯 구조를 제안해 줌.
- 요청한 커스텀 슬라이더의 기본 로직을 구현해 줌.
물론 100% 완벽하진 않았습니다. 슬라이더의 간격이 너무 넓거나, 다크 모드 색상이 조금 어색한 부분이 있었죠. 하지만 “빈 페이지(Blank Canvas)”에서 시작하는 것보다 2~3배는 빨리 개발 할 수 있었습니다.
4. 디테일 다듬기 (Refining)
AI가 만들어준 초안을 바탕으로, 실제 앱의 UX에 맞춰 디테일을 수정했습니다.
- 커스텀 슬라이더 튜닝: AI가 짜준 기본 슬라이더 코드를 수정하여, 테니스 NTRP 시스템에 맞게 0.5 단위로 딱딱 끊어지게(Divisions) 조정하고, 레이블이 실시간으로 따라다니게 만들었습니다.
- ‘이전 데이터 불러오기’ 추가: 매번 똑같은 내용을 입력하기 귀찮은 사용자를 위해, 최근 매칭 정보를 불러오는 버튼을 섹션 헤더에 추가했습니다.
- 다크 모드 최적화: AI가 잡아준 색상 팔레트 위에서, 배경색과 카드 색상의 명도 대비를 조절해 눈이 편한 다크 모드를 완성했습니다.
[수정 후 코드 하이라이트]
// AI가 제안한 구조를 발전시킨 커스텀 슬라이더 부분CustomRangeSlider( values: controller.selectedNtrpRange.value, min: 1.0, max: 4.5, divisions: 7, onChanged: controller.setNtrpRange,),
5. 결론: AI는 최고의 ‘초안 작성자’
이번 작업을 통해 느낀 점은, AI는 완성품을 뚝딱 만들어주는 ‘마법사’라기보다는, 내 의도를 찰떡같이 알아듣고 기초 공사를 해주는 ‘유능한 조수’에 가깝다는 것입니다.
- Before: “어떤 위젯을 쓸지 고민하며 레이아웃 잡느라 1시간 소요”
- After: “AI가 1분 만에 잡아준 레이아웃 위에서, 바로 비즈니스 로직과 디테일 구현 집중”
여러분도 복잡한 화면 설계가 막막할 때, 구체적인 요구사항을 담은 프롬프트로 AI에게 디자인 ‘초안’을 맡겨보세요. 개발 속도가 확연히 달라질 것입니다!
다음 포스팅에서는 이렇게 만든 화면에 실제 데이터를 연동하는 과정을 다뤄보겠습니다.