# [Claude Code] 비개발자가 Claude Code와 하루 만에 'MVP 느낌'을 '브랜드'로 바꾼 후기
## 📝 한줄 요약
토요일 과제로 만든 인테리어 플래너 '집다(Zipda)'가 기능은 다 되는데 너무 'MVP스러워' 보여서, 하루 동안 Claude Code와 함께 디자인 톤부터 로고·파비콘·카카오톡 공유 화면까지 싹 다 갈아엎었습니다.
**바쁘시면 이것만 읽어도 돼요:**
- Claude Code로 보라색 MVP 톤 → 따뜻한 테라코타 브랜드 톤으로 디자인 전면 개편, 하루 만에 완료
- 평면도 이미지 한 장만 줬더니 구역 12개 + 더미 아이템 54개를 알아서 좌표까지 맞춰 세팅
- 로그인 없이도 진짜 제품처럼 체험할 수 있는 샘플 플래너 페이지(`/sample`) 신규 제작
- 슬로건, 로고, 카카오톡 공유 썸네일·파비콘까지 브랜드 이미지 통일
- 가장 골치 아팠던 건 코드 로직이 아니라 "파비콘이 계속 옛날 걸로 돌아가는" 캐시·우선순위 문제
- "기능, 로그인, 배포 설정은 건드리지 마세요"라고 매번 명시했더니 안전하게 디자인만 개편됨
## 🎯 이런 분들께 도움돼요
- 토요일 웹앱 과제를 만들었는데 "기능은 되는데 왜 이렇게 후져 보이지?" 고민 중인 비개발자
- 디자이너 없이 AI로 서비스 비주얼을 끌어올리고 싶은 1인 개발자·기획자
- 만들어둔 사이드 프로젝트를 다른 사람에게 보여주기 전에 다듬고 싶은 분
## 😫 문제 상황 (Before)
'집다'는 평면도 위에 인테리어 아이템을 올려두고 가족과 구매 결정을 공유하는 서비스로, 핵심 기능(평면도 등록, 구역 설정, 아이템 관리, 공유)은 이미 다 동작하고 있었습니다.
문제는 "보여줄 수 있는 수준"이 아니었다는 것. 화면 곳곳에 초기 개발 단계의 보라색 톤이 남아있었고, 랜딩페이지는 기능 나열에 그쳐서 "이게 왜 필요한지" 설득력이 없었습니다. 카카오톡으로 링크를 공유해도 썸네일·제목이 제대로 안 떠서 "이게 무슨 서비스인지" 한눈에 안 보이는 상태였죠.
실제 서비스로 발전시키고 싶다는 욕심이 생기면서, "기능은 다 있는데 MVP 느낌"인 이 상태를 하루 안에 정리해보기로 했습니다.
## 🛠️ 사용한 도구
- **도구명**: Claude Code
- **모델**: Claude Sonnet 4.6
- **특이사항**: 작업 전체 동안 "현재 동작 중인 기능, 로그인, 배포 설정, 환경변수, API 호출은 임의로 변경하지 마세요"라는 제약을 반복적으로 명시 → 디자인·브랜딩 범위 안에서만 안전하게 작업 진행
---
## 🔧 작업 과정
### MVP 보라색을 벗고, "우리 집"같은 따뜻한 톤으로 - 디자인 방향부터 다시 잡기
먼저 Claude Code에게 현재 서비스의 문제를 그대로 던졌습니다.
```
좋아. 서비스 개선을 하고 싶은데.. 우선 서비스 디자인이 너무 MVP 느낌인데 이걸 어떻게 해야할까
```
Claude Code는 몇 가지 디자인 방향(미니멀, 트렌디, 따뜻한 생활감 등)을 제시했고, "다 해당하는 것 같다"는 답을 바탕으로 인테리어 서비스에 어울리는 "따뜻하고 생활감 있는" 테라코타·크림 톤을 최종 방향으로 잡았습니다.
```
응 시작해줘
```
이 한마디로, 전체 페이지의 색상 톤부터 버튼·카드·배경까지 새로운 톤으로 갈아엎는 작업이 시작됐습니다. 이어서 랜딩페이지를 단순 기능 소개에서 "Before/After - 사용 흐름 - 핵심 기능 - 샘플 플래너 - 신뢰 안내 - CTA"를 갖춘 전환 중심 구조로 재구성하는 큰 작업도 함께 진행했습니다. 이 과정에서 "현재 동작 중인 기능, 로그인, 배포 설정, 환경변수, API 호출은 임의로 변경하지 마세요"라는 안전장치를 처음으로 명시했는데, 이게 이후 모든 요청의 기본 틀이 됐습니다.
작업 후에도 "아직 보라색 끼가 있는 것들도 있는데 변경된 디자인 색감으로 변경해줘"처럼 남아있는 옛 색상을 짚어주면, Claude Code가 해당 영역을 찾아 새 톤으로 일괄 교체했습니다.
---
### 평면도 이미지 한 장으로, 로그인 없이도 만져볼 수 있는 샘플 플래너 만들기
랜딩을 다듬다 보니 막히는 지점이 생겼습니다. "샘플 플래너 보기" 버튼을 눌러도 로그인 화면으로 튕겨서, 정작 서비스를 제일 궁금해할 비회원은 아무것도 체험할 수 없었던 것이죠.
```
비로그인 상태에서 샘플 플래너를 들어가니 로그인을 하라고 하는데 비로그인 상태에서도 멋진
샘플플래너로 들어가야할 것 같고 더미로 셋팅된 걸 보여줬으면 하는데 이 이미지를 셋팅해서
드래그 영역 셋팅 그리고 해당 영역에 들어갈 인테리어 아이템들 더미로 다 셋팅해줘
```
그리고 직접 가지고 있던 평면도 이미지를 건넸습니다.
```
이렇게 줘도 돼?
```
여기서 가장 인상적인 장면이 나왔습니다. Claude Code는 이 평면도 이미지 한 장만 보고, 거실·주방·침실·드레스룸·욕실·현관 등 **12개 구역의 좌표(위치·크기)**를 잡고, 각 구역에 어울리는 **더미 인테리어 아이템 54개**(소파, TV, 침대, 수납장 등)를 가격·메모까지 채워 자동으로 세팅했습니다. 이미지를 올린 위치를 확인하고("이동했어!") 나니, 비로그인 사용자도 진짜 제품처럼 평면도를 클릭하며 둘러볼 수 있는 `/sample` 페이지가 완성됐습니다.
---
### 랜딩에 "진짜 화면"을 넣다 - Hero 미리보기 UI와 샘플 카드 구체화
1차 개편으로 랜딩의 뼈대는 잡혔지만, "설명은 잘 되어 있는데 실제로 어떻게 생겼는지는 안 보이는" 느낌이 남아있었습니다. 그래서 2차 개선을 요청했습니다. 요청은 꽤 길었지만, 핵심은 이거였습니다.
- Hero 영역에 실제 제품 화면처럼 보이는 미리보기 카드 추가 (공간별 아이템, 예상 예산, 확정·보류·구매완료 상태까지)
- 샘플 플래너 카드에 공간 수·아이템 수·예상 예산 등 구체적인 정보 추가
- "상담 시간이 절반으로 줄어요" 같은 근거 없는 표현은 빼고, 실제 구현 수준에 맞는 신뢰 문구로 조정
- CTA와 로그인의 관계를 "가입 없이 샘플 먼저, 저장·공유할 때 로그인"으로 정리
이번에도 "현재 동작 중인 기능, 로그인, 배포 설정, 환경변수, API 호출은 임의로 변경하지 마세요"라는 제약을 다시 한번 못박았습니다. Claude Code는 실제 코드(공유 기능 구현부)를 확인해서 "공유"가 정말 어떻게 동작하는지 파악한 뒤, 그에 맞춰 신뢰 문구를 사실대로 다시 썼습니다. 덕분에 랜딩 첫 화면만 봐도 "이 서비스로 뭘 할 수 있는지"가 한눈에 들어오게 됐습니다.
---
### 브랜드의 얼굴 만들기 - 새 슬로건, 로고, 카카오톡 공유 화면
기능과 레이아웃이 정리되자, 이번엔 "브랜드처럼 보이는가"가 눈에 들어왔습니다. 카카오톡으로 링크를 공유했을 때의 화면을 캡처해서 보여주며 한 번에 여러 가지를 요청했습니다.
```
서비스 로고 밑에 있는 기존 슬로건 '집에 필요한 것, 모두 집다.' 을
'우리집에 필요한 것만, 집다. 🏠' 로 변경해주고. 영어도 신규 슬로건에 맞게 잘 번역해서 반영해줘.
그리고 카톡에 공유하는 og 에 썸네일이 아무것도 없는데 그럴싸한 이미지 하나 생성해서 넣어줘.
보니까 웹페이지 탭에 적용된 아이콘도 보라색끼가 있네. 이것도 수정해주고.
```
이후에도 카카오 공유 썸네일 문구를 다듬고("우리집에 필요한 것만, 집다. 🏠 인테리어 준비, 엑셀 말고 평면도 위에서."), 메인 카피를 "집다 - 인테리어 아이템 플래너 / 인테리어 준비, 엑셀 말고 평면도 위에서."로 분리하는 등, 카카오톡 디버거 화면을 직접 캡처해 보여주면서 실제로 어떻게 보이는지를 기준으로 계속 다듬었습니다. 직접 만든 앱 아이콘과 OG 배너 이미지를 전달하면, Claude Code가 "이건 헤더 로고용, 이건 카톡 썸네일용"으로 용도를 구분해 적용했습니다.
---
### "그 파비콘은 대체 왜 자꾸 원래대로 돌아가지?"
이번 작업에서 가장 시간이 많이 든 부분은 의외로 코드 로직이 아니라 **파비콘**이었습니다. 새 로고로 바꿨는데 새로고침하면 다시 예전 보라색 아이콘이나 기본 아이콘으로 돌아가는 일이 몇 번이나 반복됐습니다.
```
예전걸로 돌아갔는데..?
페이지 우상단 로고를 icon-app.png 으로 바꿔주고 웹 파비콘은 flogo.png 로 넣어뒀으니
이걸로 변경해줘.
```
```
좋아. 근데 웹 파비콘이 잘 나왔다가 디폴트 파비콘으로 돌아갔어. 이거 왜이래.
```
Claude Code는 매번 "이번엔 진짜 원인"을 다르게 짚어야 했습니다. 처음엔 옛날 보라색 아이콘 파일이 새 파일보다 우선 적용되는 게 원인이었고, 다음엔 메타데이터 설정 자체가 작업 중에 빠진 게 원인이었습니다. 한 번 수정했다고 끝내지 않고, 새로고침해서 안 되면 다시 캡처해서 보여주며 재요청했고, 결국 파일명을 `favicon.ico`로 통일하고 관련 설정을 정리한 뒤에야 새로고침해도 새 로고가 안정적으로 유지됐습니다.
---
### 화이트모드 기본 + 다크모드, 그리고 "커피 한 잔" 후원 버튼
파비콘 문제를 해결하는 김에, 평소 갖고 싶었던 기능 두 가지를 한 번에 요청했습니다.
```
그리고 화이트모드가 지금 모드라면 다크모드로도 하나 있어줘야할것 같아.
화이트 다크모드 전환은 지금 화이트 모드 기준으로 어울리는 다크모드로 변경하는 색감으로
그리고 수익화를 위해 기부를 받을 수 있는 통로를 만들면 어떨까 싶어. 커피한잔 뭐 이런거 있잖아.
다른 서비스를 사용해도 좋아.
```
Claude Code는 라이트모드의 테라코타 톤과 어울리는 따뜻한 다크 팔레트를 새로 정의하고, 🌙/☀️ 토글 버튼을 만들었습니다. 다만 처음엔 다크모드를 켰을 때 "배너 오른쪽 글씨가 아예 안 보이는" 문제가 생겼고, 기본값도 의도와 다르게 다크모드로 시작되는 문제가 있었습니다.
```
다크모드에서 배너 오른쪽 항목 글씨가 아예 보이질 않아 이것도 다크모드에 따라 잘 보이게
흰색으로 해주던가 밑에 모든 콘텐츠들도 어두운 글씨체들은 다크모드에 묻혀 안보이네
이거 반영해서 잘 보이게 텍스트 색감도 유동적으로 바뀌게 해줘.
그리고 디폴트는 다크모드보단 화이트모드로 해줘
```
Claude Code는 다크모드에서 묻히는 텍스트 색상을 페이지 곳곳에서 찾아 일괄 보정하고, 기본값을 라이트모드로 고정했습니다. 후원 버튼은 Buy Me a Coffee 가입 후 받은 링크를 랜딩 하단에 연결해 마무리했습니다.
---
### 영문 모드도 국문만큼 꽉 채우기 - 다국어 마지막 다듬기
마지막으로 신경 쓴 건 영문 버전이었습니다. 한글·영문 전환 화면을 나란히 캡처해서 비교해보니, 영문판은 내용이 듬성듬성 빠져있거나 짧게 요약돼 있었습니다.
```
근데 왜 국문에서는 이렇게 길게 나오는데 영문으로 하면 짧아지냐
이것도 좀 국문에 기준으로 맞춰서 영문도 동일하게 가자.
```
```
영문인데 국문이 왜있지.. 영문 전환에선 모든 콘텐츠들이 영문으로 번역된 걸로 나와줘야지.
그리고 영문 버전 우측 상단 로고에선 'Zipda' 보단 다 대문자로 'ZIPDA' 로 해주고
```
랜딩의 모든 섹션(Hero 미리보기, Before/After, 사용 흐름, 핵심 기능, 샘플 플래너, 신뢰 안내)을 한국어·영어 한 쌍으로 다시 구성해서, 언어를 전환해도 빠지는 내용 없이 동일한 정보량을 보여주도록 정리했습니다. 헤더 로고도 영문 모드에서는 "ZIPDA"로 통일했습니다.
---
### 마지막 점검 - 카카오톡 공유 화면이 진짜 바뀌었는지 확인
모든 작업을 마치고, 처음 문제였던 카카오톡 공유 화면을 다시 확인했습니다.
```
이전 썸네일만 뜨는데.. 카카오톡 개발자 디버그에서 캐시초기화해도 그래
og-thumbnail.png 잘 적용한거 맞아?
```
Claude Code가 적용된 이미지 파일을 직접 열어 카카오 디버거 화면과 픽셀 단위로 비교해준 덕분에, "우리 집에 필요한 것만, 집다 🏠 / 인테리어 준비, 엑셀말고 평면도 위에서."가 적힌 새 썸네일이 정상적으로 반영된 걸 확인하고 하루치 작업을 마무리했습니다.
---
## ✅ 결과 (After)
### Before vs After
| 항목 | Before | After |
|------|--------|-------|
| 디자인 톤 | 초기 개발 단계의 보라색 MVP 톤 | 인테리어 서비스에 어울리는 따뜻한 테라코타·크림 톤 |
| 랜딩페이지 | 기능 나열 위주 | Before/After·사용 흐름·핵심 기능·샘플 플래너·신뢰 안내·CTA를 갖춘 전환 중심 구조 |
| 비로그인 체험 | 샘플 플래너 진입 시 로그인 화면으로 이동 | `/sample` 페이지에서 평면도 + 12개 구역 + 54개 아이템을 바로 체험 |
| 카카오톡 공유 | 썸네일·제목 없음 | 브랜드 로고·슬로건이 담긴 OG 썸네일과 메인 카피 적용 |
| 다크모드 | 없음 | 라이트모드 기본 + 따뜻한 톤의 다크모드 토글 |
| 한/영 콘텐츠 | 영문판 일부 누락·축약 | 전 섹션 한/영 동일한 정보량으로 번역 |
| 후원 채널 | 없음 | Buy Me a Coffee 연결 |
| 작업 기간 | - | 하루 (2026-06-11) |
### 결과물
- 배포 주소: https://zipda.vercel.app
- (스크린샷은 아래 "추천 이미지" 위치에 추가하시면 좋아요)
---
## 💬 이 과정에서 배운 AI 활용 팁
### 효과적이었던 것
1. **"이건 절대 건드리지 마세요"를 매번 명시하기** — "현재 동작 중인 기능, 로그인, 배포 설정, 환경변수, API 호출은 임의로 변경하지 마세요"라는 한 문장을 디자인 요청마다 반복했더니, 큰 작업을 맡겨도 기존 기능이 깨질 걱정 없이 진행할 수 있었습니다.
2. **이미지 한 장으로 구조화된 데이터 만들게 하기** — 평면도 사진 한 장을 주고 "이 이미지 기준으로 구역과 더미 데이터를 만들어달라"고 하면, 좌표 계산 같은 손이 많이 가는 작업을 한 번에 끝낼 수 있었습니다.
3. **화면을 캡처해서 "이게 실제로 이렇게 보인다"로 피드백하기** — 카카오톡 디버거, 다크모드, 영문 화면 모두 말로 설명하기보다 스크린샷을 보여주니 AI가 문제를 더 정확히 짚었습니다.
### 이렇게 하면 안 돼요
1. **"한 번에 됐겠지"하고 넘어가지 않기** — 파비콘처럼 캐시·우선순위가 얽힌 문제는 한 번 수정했다고 끝나지 않을 수 있습니다. 새로고침해서 실제로 확인하고, 안 되면 다시 캡처해서 보여주는 게 빨랐습니다.
2. **막연하게 "예쁘게 해줘"라고 하지 않기** — "MVP 느낌"이라는 막연한 불만보다, "보라색 끼가 남아있다", "영문이 국문보다 짧다"처럼 구체적으로 짚어줄수록 수정 범위가 정확해졌습니다.
## 🌍 다른 업무에 적용한다면?
- 발표 자료나 보고서 템플릿을 회사 브랜드 톤에 맞게 일괄 정리할 때
- 여러 장의 사진·도면을 기준으로 반복적인 표나 목록 데이터를 만들어야 할 때
- 한국어로 만든 자료를 영어 등 다른 언어로 옮기면서 "내용 누락 없이" 동등하게 맞춰야 할 때
## 🚀 앞으로의 계획
디자인과 브랜딩은 정리됐으니, 이제 실제 사용자에게 `/sample` 페이지와 랜딩을 보여주고 피드백을 받아 기능을 고도화할 계획입니다. 어떤 샘플 플래너가 더 와닿는지, 가입까지 이어지는지를 보면서 다음 개선 방향을 정하려고 합니다.
## 📋 재사용 가능한 프롬프트
### 프롬프트 1: 디자인 톤 진단 및 개편 요청
> 우리 서비스가 [서비스 설명]을 하는데, 화면이 너무 'MVP 느낌'이라 보여주기 부끄러워.
> 어떤 디자인 방향(톤·색감)으로 가면 좋을지 2~3가지 제안해주고, 내가 고르면 전체 화면에
> 일관되게 적용해줘. 단, 현재 동작 중인 기능, 로그인, 배포 설정, 환경변수, API 호출은
> 임의로 변경하지 말고 디자인 범위 안에서만 수정해줘.
### 프롬프트 2: 이미지 기반 더미 데이터 자동 생성
> [이미지 첨부] 이 이미지를 기준으로 영역(구역)을 나누고, 각 영역에 들어갈 항목들을
> 더미 데이터로 채워줘. 영역별 위치·크기 좌표와 항목별 이름·가격·상태까지 포함해줘.
### 프롬프트 3: 한/영(다국어) 콘텐츠 동등화 점검
> 한국어 화면과 영어 화면을 캡처해서 비교했더니 영어 쪽 내용이 더 짧아.
> 모든 섹션의 한국어 내용을 기준으로, 영어도 빠지는 정보 없이 동일한 분량으로
> 다시 번역·구성해줘.
