# 비개발자의 구역별 인테리어 플래너 디벨롭 일기 (feat. Claude Code)
## 📝 한줄 요약
만들어두고 쓰다 보니 불편한 게 보였고, 보일 때마다 말로 설명했더니 앱이 계속 좋아졌습니다.
**바쁘시면 이것만 읽어도 돼요:**
- 앱은 이미 있었고, 이번엔 "쓰면서 불편한 것들"을 고치는 과정입니다
- 드래그 중 빗금 애니메이션, 리스트↔평면도 양방향 하이라이트, 이미지 교체 시 태깅 유지 — 전부 "이러면 좋겠는데"를 말로 설명한 것들
- 까만 화면 에러도 났는데, 에러 화면 붙여넣기 하나로 해결됐습니다
- 코드를 몰라도 "쓰면서 개선하는" 사이클이 가능하다는 게 이번 핵심
## 🎯 이런 분들께 도움돼요
- AI로 앱을 만들었는데, 이제 어떻게 개선해야 할지 모르는 분
- 기능은 돌아가는데 왠지 쓰기 불편한 느낌이 있는 앱이 있는 분
- "이런 UX 기능은 비개발자가 요청할 수 있나?" 궁금한 분
## 😤 배경
집다(zipda.vercel.app)는 평면도 위에 구역을 그리고, 구역별로 인테리어 아이템을 관리하는 웹앱입니다. 실제 이사 준비에 쓰려고 Claude Code로 직접 만들었습니다.
기본 기능은 됐는데, 막상 써보니 계속 뭔가 어색했습니다. 구역을 드래그해서 그리는데 지금 뭘 하고 있는지 화면에서 알기 어려웠고, 목록에 구역 이름이 있어도 그게 평면도 어디인지 바로 안 보였습니다. 이미지를 더 좋은 버전으로 바꾸고 싶은데 태깅 정보가 날아갈까봐 망설여지기도 했습니다.
그래서 하나씩 말로 설명하면서 고쳐나갔습니다.
---
## 🔧 디벨롭 과정
### 1. 드래그하는 순간 화면이 반응하게 — 움직이는 빗금
구역을 드래그해서 그리는 동작이 있는데, 그냥 반투명 사각형만 생겼습니다. 뭘 하고 있는지 화면에서 느껴지지 않았습니다.
```
드래그해서 새로운 구역을 만들 때 그 부분을 "지금 새로운 구역을 추가 중이야"라고
알 수 있도록 빗금으로 계속 빗금이 움직인다던지,
다른 태깅된 구역과 다른 표시였으면 해
```
결과는 대각선 줄무늬가 흐르는 애니메이션이었습니다. 드래그하는 내내 빗금이 계속 움직이고, 다른 고정된 구역들과 확실히 구분이 됐습니다.
그런데 이름을 입력하는 창이 뜨는 순간 빗금이 사라졌습니다. 어떤 영역에 이름을 붙이는 중인지 보여야 하는데, 빗금이 없으니 감이 안 왔습니다.
```
드래그 완료한 다음에도 그 빗금 영역이 유지돼야
내가 어떤 구역에 어떤 이름으로 태깅했는지 알 것 같은데..
```
이름 입력이 완료될 때까지 빗금이 남아 있도록 바꿨습니다. 이름을 치는 동안 "지금 이 영역에 이름을 붙이는 중"이라는 게 화면에서 내내 보입니다.
---
### 2. 리스트와 평면도가 연결되다 — 양방향 하이라이트
오른쪽 사이드바에 구역 이름 목록이 있는데, 이름만 봐서는 그게 평면도 어디인지 바로 안 보였습니다. "거실"이라고 써있는 게 왼쪽 위인지 오른쪽인지, 클릭해봐야 알 수 있었습니다.
```
태깅한 리스트에서 클릭하면 어떤 구역인지 평면도 태깅 화면에서
그 클릭된 태깅 구역에 "네가 클릭한 거야"라고 유저에게 보여주는 효과를 주었으면 해.
반대로 영역을 클릭하면 우측 리스트에 있는 태깅도 선택되면 좋겠네.
```
두 가지가 동시에 연결됐습니다.
리스트에서 이름을 클릭하면 → 평면도에서 해당 구역이 흰색으로 반짝입니다. 평면도에서 구역을 클릭하면 → 오른쪽 리스트가 그 항목으로 자동 스크롤됩니다.
양방향이 생기고 나서 쓰는 흐름이 확실히 달라졌습니다. 이름 목록을 훑다가 궁금한 게 생기면 바로 평면도에서 확인하고, 평면도를 보다가 구역을 클릭하면 목록이 따라옵니다.
---
### 3. 이미지 바꿔도 태깅 정보는 그대로 — 교체 확인 모달
더 좋은 평면도 이미지가 생겼는데, 교체하면 어렵게 태깅해둔 구역들이 날아갈까봐 손이 안 갔습니다.
```
이미지를 더 좋은 이미지로 교체했을 때 태깅 정보들이 안 날아가게 해줬으면 좋겠어.
이미지 교체 시 팝업과 취소 / 태깅 정보 유지 / 태깅 정보 포맷 같은 버튼이 있으면 좋겠어.
UX 워딩은 최신 트렌드에 맞게 다듬어줘.
```
이미지를 올리면 확인 창이 뜹니다.
- **구역 정보 유지하고 교체** — 기존에 그린 구역들이 새 이미지 위에 그대로 남습니다
- **구역 초기화하고 새로 시작** — 이미지만 바꾸고 구역은 처음부터 다시 그립니다
- **취소** — 아무것도 안 합니다
특히 "구역 정보 유지하고 교체"는 단순히 정보만 남기는 게 아닙니다. 이미지 해상도가 달라져도 구역 위치가 자동으로 맞게 이동합니다. 원본보다 2배 큰 이미지로 교체해도 태깅해둔 거실, 주방, 방 위치가 그대로 맞아 들어갑니다.
이게 된다는 걸 처음엔 몰랐습니다. "이미지 크기가 달라지면 좌표가 맞겠어?" 싶었는데, 새 이미지와 기존 이미지의 크기 비율을 계산해서 구역 좌표를 전부 다시 맞추는 방식으로 구현됐습니다.
---
### 4. 까만 화면이 떴다 — 두 가지 에러가 겹쳐 있었다
어느 날 앱을 열었더니 까만 화면이 떴습니다.
```
[까만 화면 스크린샷] 아직 해결 안 된 거 같은데
내 프로젝트에서 열기 버튼 누르면 에러가 나는데..
```
에러 화면을 붙여넣으니 두 가지 원인이 겹쳐 있다는 걸 찾아줬습니다.
하나는 Supabase 데이터베이스에서 빈 값이 올 때 코드가 처리를 못 해서 앱 전체가 멈추는 것이었습니다. 다른 하나는 마이페이지에서 아직 만들어지지 않은 테이블에 접근하려다 에러가 나면서, 연관 없는 다른 기능까지 같이 에러가 나는 것이었습니다.
수정 방법은 둘 다 간단했습니다. 첫 번째는 값이 없으면 기본값을 쓰도록, 두 번째는 각 기능을 독립적으로 에러 처리하도록 바꿨습니다. 둘 다 코드 몇 줄 변경이었는데, 이런 방어 로직은 제가 혼자라면 생각해내기 어려웠을 거라는 생각이 들었습니다.
---
## ✅ Before vs After
| 항목 | 이전 | 이후 |
|------|------|------|
| 구역 드래그 중 | 반투명 사각형만 | 움직이는 빗금 애니메이션 |
| 이름 입력 중 | 빗금 사라짐 | 입력 완료까지 빗금 유지 |
| 리스트 클릭 | 아무 반응 없음 | 평면도에서 해당 구역 반짝임 |
| 평면도 구역 클릭 | 아무 반응 없음 | 목록이 해당 항목으로 스크롤 |
| 이미지 교체 | 태깅 정보 날아감 | 유지/초기화 선택 가능 |
| 다른 해상도로 교체 | 구역 위치 틀어짐 | 자동으로 좌표 재계산 |
| 에러 화면 | 까만 화면 | 정상 작동 |
## 💬 이번에 배운 것
### 쓰면서 개선하는 게 맞는 방법이었다
처음 만들 때는 몰랐던 불편함이 쓰다 보면 보입니다. "이름 목록을 보고 평면도에서 찾아야 한다는 게 번거롭다"는 건 실제로 써보기 전까지 생각하지 못했습니다. 기능이 완벽히 만들어진 다음에 쓰기 시작하는 게 아니라, 조금씩 쓰고 조금씩 고치는 게 더 빨리 원하는 상태에 도달하는 방법이었습니다.
### UX 요청도 말로 된다
애니메이션, 양방향 하이라이트, 확인 모달 — 이런 것들은 개발 지식이 있어야 요청할 수 있을 것 같지만, 실제론 "느끼는 불편함"을 그대로 말하면 됐습니다. "빗금이 움직였으면 해", "클릭하면 저쪽에서도 반응했으면 해", "이미지 교체하면 팝업이 떴으면 해" — 전부 감각으로 설명한 것들입니다.
### 에러는 원인을 알고 있다
코드를 몰라도 에러 메시지를 붙여넣으면 원인을 설명해줍니다. 이번엔 두 가지 에러가 겹쳐 있었는데도, 각각 원인을 짚어주고 수정 방법까지 알려줬습니다.
## 🌍 이 방법을 다른 곳에도 쓴다면
이미 만들어둔 도구가 있다면, "쓰면서 불편한 것"을 하나씩 말로 설명하는 것만으로 계속 개선할 수 있습니다. 처음 만들 때처럼 큰 기획이 필요하지 않습니다. "이게 불편하다", "이러면 좋겠다" 딱 그 말 하나면 충분합니다.
## 🚀 앞으로
실제 이사 준비에 계속 쓰면서 불편한 게 생기면 그때그때 고쳐나갈 예정입니다. 지금은 상표 출원도 알아보고 있고, 인테리어 업자분들께 써보시게 하고 피드백을 받아보고 싶은 마음도 있습니다.
## 📋 바로 쓸 수 있는 프롬프트
### 이미 만든 앱의 UX를 개선할 때
> 지금 [기능]을 쓰는데 [느끼는 불편함]이 있어.
> [원하는 동작]이 되면 좋겠는데 가능해?
### 에러가 났을 때
> 아래 에러가 났는데 원인이 뭐야? 어떻게 해결하면 돼?
> [에러 메시지 전체 붙여넣기]
### 두 요소를 연결하고 싶을 때
> [A]를 클릭하면 [B]에서도 반응했으면 해.
> 반대로 [B]를 클릭하면 [A]에서도 반응하게 해줘.
