클로드 디자인 결과물 클로드 코드로 작업하기 - 간단 설명
클로드 다지인 앱 UI 만들기: https://json8.tistory.com/208 디자인 못하는 개발자가 Claude Design으로 운동 앱 UI 만들어본 솔직 후기디자인 감각 없는 개발자가 Claude Design으로 앱 화면을 10분 만에 뽑아봤
json8.tistory.com
클로드 디자인 결과물 클로드 코드로 작업(html) 이후 이제 실제로 안드로이드 앱 코드 생성 및 실제 핸드폰 설치 동작해 보았습니다.
Claude Code로 13분 만에 안드로이드 앱 만들기 (클린 아키텍처 적용)
Claude Code를 활용해 가벼운 실험을 해봤습니다. 결론부터 말씀드리면, 단순히 코드를 짜주는 수준을 넘어 '기획 의도를 파악하고 스스로 문제를 해결하는 동료'에 가깝다는 인상을 받았습니다.
HTML 디자인 파일 하나로 안드로이드 앱의 뼈대부터 문서화까지 끝낸 과정을 공유합니다.
1. "이거 보고 앱 만들어줘" — 딱 한 줄의 명령
시작은 Claude Design으로 뽑아낸 index.html 파일이었습니다. 이 파일을 Claude Code에 던지며 다음과 같이 요청했습니다.
"이 HTML 화면에 맞춰서 안드로이드 앱 만들어줘. 공식 3계층 아키텍처랑 Hilt DI 포함해서 클린 아키텍처로."
놀라운 건 Claude Code가 HTML 코드를 읽자마자 서비스의 흐름을 완벽히 파악했다는 점입니다.

온보딩(Welcome → 이름 입력 → 목표 설정)부터 메인 홈, 그리고 회화나 영어일기 같은 세부 기능 화면까지 스스로 분류해 설계에 들어갔습니다.
특히 디자인 토큰(색상값, 폰트 등)을 안드로이드 테마로 자동 매핑해주는 부분에서 디테일의 차이가 느껴지더군요.
2. 시키지 않아도 '클린 아키텍처' 원칙 준수
단순히 돌아가는 코드를 만드는 게 아닙니다. 코드를 생성하는 과정에서 스스로 UseCase 리팩터링을 제안했습니다.

화면을 보면 알 수 있듯, saveLevel() 같은 함수를 클린 아키텍처 원칙에 맞춰 saveLevelUseCase()로 변경하며 레이어 간 의존성을 엄격히 분리했습니다.
- domain: 순수 Kotlin, 비즈니스 로직 및 인터페이스
- data: DataStore Preferences 구현체 및 Repository Impl
- di: Hilt를 활용한 의존성 주입
- presentation: Jetpack Compose 기반의 UI 및 ViewModel
3. 단 10분 27초, 결과로 증명하는 속도
기술 스택 선정부터 전체 파일 생성까지 정확히 10분 27초가 걸렸습니다.

'Baked for 10m 27s'라는 문구가 그 효율성을 증명합니다.
주요 기술 스택:
- UI: Jetpack Compose + Material3
- DI: Hilt 2.51 (KSP)
- 로컬 저장: DataStore Preferences
- 네비게이션: Navigation Compose
4. APK 빌드 하기

압권은 빌드 과정이었습니다. "컴파일해봐"라고 시키자, 환경을 점검하더니 gradlew가 없는 상황을 스스로 인지했습니다.
에러 구간을 보면 흥미로운 흐름이 보입니다.
- ./gradlew 실행 실패 (파일 없음)
- gradlew.bat 탐색 후 실패 → wrapper 생성 시도
- 시스템 내 gradle 미설치 확인
- Android Studio 내장 gradle 경로를 직접 찾아가서 Java 버전 확인 후 빌드 성공
사람이 개입해서 경로를 잡아줄 필요 없이, 도구가 알아서 시스템 환경을 탐색해 문제를 해결한 것입니다.
5. 문서화까지 3분 8초 만에 "완성"
빌드 성공 후, 프로젝트 운영에 필요한 문서 6종(README, 아키텍처 설계서, 디자인 토큰 정의서 등)을 단 3분 8초 만에 뽑아냈습니다.

단순 텍스트 나열이 아니라, Hilt 그래프와 파일 구조 트리까지 포함된 수준 높은 문서임을 확인할 수 있습니다.
6. 핸드폰 설치
빌드 폴더에 아래와 같이 apk가 생성되어 있습니다.
이 파일을 핸드폰에 복사 or adb install을 통해 설치 합니다.

실제 핸드폰에서도 클로드 디자인에서 작업된 동작과 같이 잘 동작됩니다.

* 명령어 두줄 + 13분만에 실제 핸드폰에서 실행 가능한 앱을 만들었습니다.
후기: 개발자는 이제 '방향'을 정하는 사람
이번 실험을 통해 느낀 점은 명확합니다. Claude Code는 단순한 코드 생성기가 아니라 '맥락을 읽는 엔지니어'에 가깝습니다.
- 디자인 의도를 읽고 코드로 변환하는 능력
- 아키텍처 원칙을 고수하는 고집
- 빌드 에러를 스스로 추적하는 자율성
이제 개발자의 역할은 지루한 보일러플레이트 코드를 짜는 것이 아니라, AI에게 정확한 방향을 제시하고 아키텍처의 큰 그림을 결정하는 쪽으로 빠르게 이동하고 있습니다.
한 줄 요약: HTML 던져주고 15분(코드 10분 + 문서 3분) 정도 커피 한 잔 마시고 오니, 클린 아키텍처가 적용된 안드로이드 프로젝트가 완성되어 있었습니다.
'AI 관련 자료' 카테고리의 다른 글
| 같은 프롬프트, 다른 모델 — Claude Sonnet 4.6 vs Opus 4.7 Android 코드 품질 비교 (0) | 2026.05.16 |
|---|---|
| 클로드 디자인 결과물 클로드 코드로 작업하기 - 간단 설명 (0) | 2026.05.12 |
| 디자인 못하는 개발자가 Claude Design으로 운동 앱 UI 만들어본 솔직 후기 (0) | 2026.05.09 |
| Claude Cowork 시작하기: 개발자를 위한 입문 가이드 (0) | 2026.05.09 |
| Karpathy의 LLM Wiki 완전 정복: 초보자도 따라 할 수 있는 개념 정리 (0) | 2026.05.08 |