디자인 패스: 로켓 아트워크를 입히고, 카피를 '위기'에서 '응원'으로
나노바나나로 뽑은 로켓 일러스트 6종을 앱 전체에 연결(sharp로 최적화)하고, 앱 아이콘이 기본 favicon에 가려지던 문제를 잡고, 카피의 정서를 '무너질 때'라는 위기 프레임에서 '나를 아끼는 사람들의 응원'으로 갈아엎었다. 자살예방 핫라인을 뺀 것과 같은 이유 — 환자 취급이 아니라 곁의 친구.
왜
두 가지가 걸렸다.
- 앱에 진짜 그림이 없었다. 펜던트 SVG 한 개로 버티고 있었다.
- 카피가 너무 무거웠다. 제품명 곁(Beside)은 좋은데, 설명·문구가 "무너질 때, 곁에 둘 것들" / "무너지는 순간 나를 붙들어줄 것들" 처럼 위기·붕괴 프레임이었다. 사용자 말 그대로: "존나 자살 위험자들 같다." 앞서 자살예방 상담 핫라인을 뺐던 것과 정확히 같은 문제 — 환자 취급.
아트워크 (이미지 6 → 앱 전체)
먼저 브랜드 DNA(차분·따뜻·친밀, 로켓이 열리며 새는 촛불빛, 테라코타-골드 팔레트)를 한 장으로 정리하고, 그걸로 나노바나나(Gemini 이미지)용 프롬프트 팩을 뽑았다. 형이 16번 이미지를 받아왔고, 29KB, OG 39KB) 연결했다:scripts/gen-art.mjs(sharp)로 웹용 경량 에셋으로 변환해(2MB대 PNG → webp 10
- 1 → 앱 아이콘 (192/512/maskable/apple)
- 2 → 로그인 히어로
- 3 → 빈 보관함 일러스트
- 4 → '꺼내보기' 진입 카드 배경 (침대맡 로켓 — 정서가 가장 맞는 자리)
- 5 → OG 공유 카드 (+
layout.tsx에openGraph/twitter/metadataBase신설) - 6 → 전체 배경 텍스처 (
body::before, 그라데이션 위 55%)
원본 images/는 무거워서 .gitignore에 넣고, 최적화 산출물만 커밋한다. 재생성은 node scripts/gen-art.mjs.
앱 아이콘이 안 보이던 문제
새 로켓을 깔았는데 탭 아이콘은 옛날 그대로였다. 범인은 app/favicon.ico(create-next-app 기본값)였다 — App Router가 이걸 /favicon.ico로 자동 링크하고 브라우저가 기본으로 그걸 요청해서, metadata.icons(로켓)를 가려버렸다. 기본 favicon을 지우고 app/icon.png(로켓)를 두어 해결. (자세히는 docs/troubleshooting.md.)
카피: 위기 → 응원
핵심 작업. "무너질 때"의 정서를 완전히 걷어내고, 나를 아끼는 사람들이 곁에서 응원하는 따뜻하고 보편적인 결로 옮겼다.
3가지 방향(① 내 사람들의 응원 ② 힘이 필요할 때 꺼내 보는 따뜻함 ③ 곁에 두는 다정함)을 각각 한·영 전체 문구로 써서 위기탈피·따뜻함·브랜드핏·보편성으로 심사했다. 심사 추천은 ③(가장 가볍고 보편적)이었지만, 형은 "나를 응원하는 사람들" 의도에 가장 직접적인 ① 내 사람들의 응원을 골랐다.
ko+en 12개 키 + 기여 헤더 + 매니페스트(name/description)까지 반영. 한 번 더 훑으며 "잠시, 숨을 고르고"(=진정해라 결, 결국 같은 위기 톤)도 응원 톤으로 교체했다.
before → after (ko)
| 자리 | 전 (위기) | 후 (응원) |
|---|---|---|
| 태그라인 | 무너질 때, 곁에 둘 것들 | 나를 아끼는 사람들의 한마디, 곁에 |
| 로그인 | 무너지는 순간, 나를 붙들어줄 것들을 곁에 둬요. | 나를 아끼는 사람들의 한마디를 곁에 품어둬요. |
| 박스 부제 | 무너지는 순간, 여기 있어요. | 내 편의 한마디가, 여기 있어요. |
| 빈 보관함 | …나를 붙들어줄 것들을 모아요… | 나를 아끼는 사람들의 응원을 여기 모아요… |
| 기여 완료 | …무너지는 순간에 곁이 되어줄 거예요. | …힘이 필요한 날 곁에서 응원이 되어줄 거예요. |
| 꺼내보기 | 잠시, 숨을 고르고. | 곁에 둔 다정한 한마디 하나. |
검증: grep "무너" → 0건. TS 클린.
원칙
환자 취급 금지. 위기에서 구해주는 도구가 아니라, 곁에서 응원하는 친구의 결.
이름 곁·로켓 메타포는 그대로 두되, 모든 문구·그림이 "너는 사랑받고 있고, 내 편이 곁에 있다" 를 향하게. 디자인(따뜻한 크림+금빛, 로켓이 열리는 빛)과 카피가 같은 곳을 본다.
덧: 영어를 서양 톤으로 (북미·유럽)
한국어 리프레임 직후, 영어가 한국어를 충실히 옮긴 번역체라는 게 걸렸다. 미국·캐나다·유럽을 노린다면 직역이 아니라 네이티브 현지화가 필요하다. 두 톤 후보(따뜻·진솔 / 모던·간결)를 영어 정서 카피 ~40개에 적용하고, 네이티브 NA/EU 에디터가 라인별로 번역체·오글·반복을 걸러 최종본을 만들었다(워크플로우). 미국 철자 + 영국/EU에도 읽히는 보편 표현, 과하던 "in your corner"는 태그라인 한 곳만 남기고 다양화.
- Keep the words of the people in your corner close beside you. → Keep the kind words from your people close, and come back to them anytime.
- Gather the encouragement from people in your corner here… → This is where the good words add up. Drop in a few of your own, or ask someone you trust for theirs.
- Keep them close again → Tuck it away again
한국어 사전은 손대지 않았다. 영어만 따로 현지화 — 시장(언어권)마다 톤은 번역이 아니라 다시 쓰는 것.