제품 디자이너의 Claude Code와 Cursor를 활용한 골프 스코어 앱 개발기

실용적 조언

복잡한 UI 스타일링 시 스크린샷 입력보다 상세한 텍스트 묘사 프롬프트를 사용하면 더 정확한 코드를 얻을 수 있다.
Cursor와 Xcode를 동시에 실행하여 AI가 생성한 코드를 즉시 빌드하고 확인하는 워크플로우를 구축하라.

섹션별 상세

제품 디자이너인 작성자는 소프트웨어 엔지니어링 경험이 전무한 상태에서 Claude Code와 Cursor를 활용해 iOS 앱을 개발했다. Cursor 내에서 Claude Code 플러그인을 사용하고 Xcode를 연동하여 실시간으로 코드를 생성하고 수정하는 방식을 채택했다. 이 과정은 개발 지식 없이도 AI 에이전트와의 협업만으로 실제 작동하는 소프트웨어를 구축할 수 있음을 입증했다.

UI 디자인 구현을 위해 Figma로 초안을 잡은 뒤, 실제 코딩 단계에서는 상세한 텍스트 프롬프트를 통해 스타일링을 진행했다. 시각적 자료인 스크린샷을 제공하는 대신 구체적인 묘사가 담긴 긴 프롬프트를 입력하여 Claude가 디자인 의도를 정확히 파악하도록 유도했다. 텍스트 기반의 정교한 지시가 복잡한 UI 레이아웃과 스타일을 제어하는 데 효과적인 수단으로 작용했다.

개발 과정에서 수많은 오류와 시행착오를 겪으며 여러 주말을 투입하는 집중적인 작업이 수반됐다. 단순히 AI에게 명령을 내리는 수준을 넘어, 원하는 결과가 나올 때까지 프롬프트를 개선하고 논리적 오류를 해결하는 반복적인 과정이 필수적이었다. 최종적으로 잠금 화면 위젯 기능을 포함한 'Strokers Golf Club' 앱을 App Store에 정식 출시하며 프로젝트를 완수했다.

골프 스코어 추적 앱의 지도 기반 인터페이스 스크린샷. — Screenshot개발된 앱이 실제 지도 위에 골프 라운드 기록을 표시하고 사용자 인터페이스가 어떻게 구성되었는지 보여준다. 제품 디자이너로서의 감각이 반영된 UI 디자인과 AI가 생성한 코드의 최종 결과물을 확인할 수 있는 근거 자료이다.

용어 해설

바이브 코딩(Vibe Coding): — 엄격한 프로그래밍 문법이나 아키텍처 설계 지식보다는 AI와의 대화와 직관적인 지시(vibe)를 통해 소프트웨어를 개발하는 방식이다. LLM이 코드 생성을 전담하므로 개발자는 논리적 흐름과 요구사항 정의에 집중하며 빠르게 결과물을 만들어낼 수 있다.
코딩 에이전트(Coding Agent): — 단순한 코드 완성을 넘어 파일 생성, 터미널 명령 실행, 디버깅 등 개발 워크플로우 전반을 자율적으로 수행하는 AI 도구이다. 사용자의 고수준 목표를 이해하고 이를 달성하기 위한 구체적인 코딩 작업을 스스로 계획하고 실행한다.
프롬프트 엔지니어링(Prompt Engineering): — AI 모델로부터 최적의 결과물을 얻기 위해 입력값(프롬프트)을 설계하고 정제하는 기술이다. 이 사례에서는 이미지 입력 대신 상세한 텍스트 묘사를 통해 복잡한 UI 스타일링을 구현하는 핵심 수단으로 활용됐다.

언급된 도구

Claude Code추천

자율적 코드 작성 및 수정 에이전트

Cursor추천

AI 기반 코드 편집기(IDE)

Xcode중립

iOS 앱 빌드 및 실행 환경

Figma중립

UI/UX 디자인 및 목업 제작

언급된 리소스

DemoStrokers Golf Club (App Store)