앞 글에서는 사용자 아직 없어도 운영은 시작된다는 흐름 — 트래픽·SEO·비용 쪽 — 을 다뤘다. 이번 글은 그중 따로 빼둔 비주얼 작업 이야기다.
랜딩 페이지를 다시 만들고, 로고를 처음부터 만들고, 컬러 시스템을 정했다. 문제는 내가 디자이너가 아니라는 점이었다.
그렇다고 디자이너를 고용할 단계도 아니었다. 템플릿 그대로 두기에는 첫 방문자가 “이거 진짜 서비스 맞아?”라고 느낄 만큼 비어 보였다. 그래서 Claude와 ChatGPT를 디자인 파트너처럼 써보기로 했다.
한 달 동안 로고를 10번 넘게 고치고, 랜딩 카피를 세 번 통째로 갈아엎고, 다른 AI에게 크로스체크까지 받았다. 그 과정에서 알게 된 건 하나였다. AI가 디자인을 알아서 완성해주는 게 아니었다. 내가 원하는 방향을 말로 좁혀갈수록, AI가 다음 안을 더 빨리 가져왔다.
나중에 알게 됐다 — 중요한 건 AI가 SVG를 그릴 수 있다는 사실이 아니라, 내가 그 SVG를 보고 “왕관 같지 않다”고 말할 수 있어야 한다는 점이었다. 이 글은 그 결론까지 가는 다섯 장면의 기록이다.
1. 랜딩 문구 — “설명하지 말고 도발해”
여기서 말하는 도발은 자극적인 문구를 넣자는 뜻이 아니라, 사용자가 이미 느끼고 있는 찜찜함을 정면으로 건드리자는 뜻이었다.
가장 먼저 손본 건 Hero(랜딩 페이지 가장 위의 큰 영역) 문구였다. Claude Code가 만들어준 첫 버전은 이랬다.
How well can you predict asset price direction?
Predict whether stocks, ETFs, and crypto will go up or down, and compare your skill with other people and AI.
틀린 말은 아니다. 다만 읽고 나서 “아, 그런 서비스구나” 하고 끝난다. 마음에 걸리는 게 없다. 가입 버튼을 누를 이유도 없다. 전형적인 설명형 카피였다.
다시 생각해보니 LDBD가 진짜로 풀고 있는 건 다른 문제였다. 주식·코인 커뮤니티에서 사람들이 자주 하는 말 — “내가 이거 오를 줄 알았어”, “그러게 내가 떨어진다고 했잖아.” 그런데 그런 말은 항상 사후에 나온다. 증거가 없다. LDBD는 그 증거를 남기는 서비스다. 시간이 박힌 예측을 공개로 올려두면 며칠·몇 주 뒤에 자동으로 채점된다.
그 방향으로 카피를 다시 잡았다.
맞혔다고? 증명해봐.
리더보드는 거짓말하지 않습니다.
CTA 버튼 문구도 “Start for free”에서 “Prove yourself / 증명하기”로 바꿨다. 도발적인 톤이지만, LDBD가 정말로 하려는 일과 정확히 맞물렸다.
그 다음에는 Hero 바로 아래 섹션을 통째로 다시 짰다. 원래는 “참여하는 세 단계”로 기능을 차례로 설명하는 구조였는데, 그건 또 설명형이었다. 그래서 Before / After 구조로 갈아엎었다.
왼쪽에는 “이런 말, 많이 들어보셨죠?”라고 띄우고 말풍선 두 개 — “테슬라 오를 줄 알았어!”, “비트코인 떨어진다고 했잖아…”를 그렸다. 그 아래 한 줄: “기록 없음. 증거 없음. 말뿐.”
오른쪽에는 LDBD가 제공하는 것 — “공개 예측. 타임스탬프. 자동 검증.” 그 아래 한 줄: “수정 불가. 삭제 불가. 변명 불가.”
톤이 세긴 한데, LDBD가 다루는 문제 자체가 “말을 나중에 바꾸는 것”이라 오히려 맞았다.
통계 배너도 같은 톤으로 다시 썼다. 이 시점에서 LDBD에는 603개 자산과 124,709건의 검증된 예측이 쌓여 있었다. 평범하게 쓰면 “603 assets / 124,709 predictions”인데, 끝에 한 줄을 더 붙였다 — “0 excuses left / 변명의 여지 0”. 이 한 줄이 사이트 톤을 정의했다.
이 작업은 사실 AI가 먼저 제안한 게 아니다. 내가 “설명 말고 도발하는 톤으로 가고 싶다”고 방향을 잡고, AI에게 그 톤에 맞는 표현을 여러 개 뽑게 한 다음, 그중 LDBD와 가장 잘 맞는 것을 골라서 다듬는 식으로 돌렸다. AI 혼자였다면 “Predict the market” 부근을 맴돌았을 거다. 방향을 잡는 건 매번 내 쪽이었다.
2. 로고 — 한 번에 안 나왔다
문구를 잡고 나니까 다음 차례는 로고였다. 처음에는 그냥 “LDBD 로고를 만들어줘”라고 한 줄 던졌다. Claude가 곧바로 SVG로 네 가지 컨셉을 그려서 보여줬다 — 상승·하락 화살표가 글자를 관통하는 모양(A), 바 차트의 높이가 왕관처럼 솟는 모양(B), 초록·빨강 대괄호로 글자를 감싸는 모양(C), 전광판 스타일 디지털 글자(D).
내 첫 반응은 이랬다.
B 컨셉은 괜찮은데 차트가 왕관처럼 연상이 안 된다. C는 bracket 디자인은 별로인데 미니멀 + 태그라인 들어간 톤은 좋다.
그래서 다음 라운드 방향은 정해졌다 — B의 “차트가 곧 왕관” 컨셉을 살리되, C의 미니멀+태그라인 톤을 합치는 쪽으로. LDBD가 결국 예측을 점수화하고 랭킹을 세우는 서비스라서, 차트와 왕관의 조합이 정체성에도 맞았다.
그 다음부터 라운드를 거듭했다. 왕관 봉우리를 늘리고, 차트 바 위에 왕관 outline을 얹고, 봉우리 위치를 1·3·5번 바 중앙에 맞추고, 바 투명도를 통일했다. 라운드 중간에 던진 피드백은 이런 식이었다.
K, L이 좋은데 outline이 잘 이어져있지 않아.
왕관 양쪽 끝이 대각선이라 왕관처럼 안 보였고, 봉우리도 차트 바와 어긋나 있었다. 그것들을 고치고 나니 한 번에 정렬이 맞았는데, 마지막에 새 문제가 하나 생겼다 — 금색 왕관 outline이 가운데 초록 바 위를 지나갈 때 그 부분만 끊겨 보였다.
처음에는 SVG의 z-order(그리는 순서) 문제일 거라고 추정했다. SVG는 코드에 나중에 적힌 요소가 위에 그려진다. 왕관을 바보다 나중에 그리면 끊김이 사라질 줄 알았는데, 순서를 바꿔도 같은 증상이었다.
스크린샷을 찍어 Claude에게 다시 보여주니까 답이 달랐다.
z-order 문제가 아니라 색 대비 문제다. 금색 선(#F59E0B)이 초록 바(#10B981) 위를 지날 때 밝기가 비슷해서 시각적으로 묻혀 보이는 거다.
해결책은 일종의 halo 기법이었다. 같은 선을 두 번 그리는 방식이다. 먼저 굵은 흰색 선을 깔고, 그 위에 얇은 금색 선을 다시 얹는다. 코드로는 path 두 줄을 겹쳐 쓰는 것뿐인데, 시각적으로는 왕관이 바 위에서 또렷하게 살아났다.
최종 버전(M2)은 차트 바 5개(에메랄드 그린), 그 위에 왕관 outline(골드) + halo(흰색), 봉우리 세 곳에 보석 점, 왕관 내부에 연한 금색이다. 태그라인은 PROVE YOUR PREDICTION. 파비콘(브라우저 탭의 작은 아이콘)은 같은 심볼을 어두운 배경에 축소한 버전.
여기까지 거친 단계를 한 장의 그림으로 보면 이렇다.
이 작업의 진짜 교훈은 횟수가 아니다. 매 라운드에 내가 한 일은 “원하는 게 뭔지”를 말로 옮기는 일이었다. “왕관처럼 안 보여”, “여기가 끊겨 보여” 같은 구체적인 피드백을 던지면 AI가 그 원인을 분석하고 다음 안을 만들어 왔다. 10번 수정한 건 AI 한계가 아니라 디자인이 원래 그런 작업이기 때문이라고 생각한다 — 내가 디자이너랑 일해본 적이 없어서 단정은 못 하겠지만, 사람 디자이너도 의뢰인의 피드백을 받아가며 안을 다듬는 라운드를 비슷하게 도는 게 아닐까 싶다.
3. 컬러 시스템 — 초록은 상승, 빨강은 하락
랜딩과 로고를 잡으면서 자연스럽게 정해진 게 컬러 팔레트였다. 처음에는 shadcn/ui의 기본 테마(중성 회색 위주)였는데, 자산 가격을 다루는 사이트라 색이 더 적극적인 역할을 해야 했다. 결국 네 색으로 정리됐다.
- 에메랄드 그린 — 상승, 메인 CTA, 성공 상태
- 로즈 — 하락, 오류 상태
- 앰버 / 골드 — 랭킹, 왕관, 업적
- 딥 네이비 — 다크 배경, 파비콘
가장 큰 변화는 CTA 버튼이었다. 그전까지 검정이었는데 에메랄드 그린으로 바꾸니까 페이지 안에서 자연스럽게 시선이 그쪽으로 모였다.
고민이 됐던 건 상승·하락 색 매핑이었다. 한국 증권 시장에서는 관례적으로 상승 = 빨강, 하락 = 파랑이고, 미국·글로벌은 상승 = 초록, 하락 = 빨강이다. LDBD는 한국 자산도 다루지만 사용자층은 글로벌을 노린 서비스라, 결국 미국식(상승 = 초록)으로 정했다. 한국 사용자에게는 살짝 어색할 수 있지만, 다국적 사용자가 공통으로 이해할 수 있는 쪽을 우선하기로 했다.
색 팔레트는 한 번 정해두면 모든 컴포넌트(버튼, 뱃지, 차트, 로고, 다크 모드)에서 같은 톤으로 굴러간다. 디자이너 자리에 사람을 두는 대신, “이 네 색만 쓴다”는 규칙을 시스템에 고정해두는 게 비전문가가 일관성을 유지할 수 있는 거의 유일한 방법이었다.
4. 같은 AI만 쓰면 놓치는 것이 있다 — ChatGPT의 크로스체크
랜딩 페이지가 어느 정도 정리된 다음, 한 가지 시도를 했다. 사이트 URL을 ChatGPT에 던지고 “개선할 점 알려줘”라고 했다. 같은 AI 안에서 계속 다듬으면 사각지대가 생기는데, 다른 AI에게 보여주면 그 사각지대가 한 번에 드러난다.
ChatGPT는 총 9개를 제안했다. 그걸 전부 수용한 게 아니라 “이미 반영된 것 / 우리한테 맞는 것 / 안 맞는 것” 세 부류로 분류해서 처리했다.
채택한 4개:
- Hero에 prediction 카드 mockup 추가— “이 서비스에서 뭘 하는지 3초 만에 보여준다”는 이유. 본인이 카피로 설명할 시간을 줄여줌. 가장 효과 큰 제안이었다.
- 리더보드 제목을 도전형 카피로 — ChatGPT의 원안은 “Can you beat the baseline?”이었는데, “baseline”이 사용자에게는 낯선 단어라 “1등을 이길 수 있나요?”로 바꿨다. 1등이 사람이든 AI 봇이든 베이스라인 봇이든 상관없이 한 줄로 통한다.
- 하단 CTA를 두 갈래로— “사람도, AI도.”라는 프레이밍 아래 [직접 예측하기] / [AI 봇 연결하기] 버튼 두 개. LDBD가 사람 사용자와 봇 운영자 모두를 타깃하는 게 한 화면에서 드러남.
- Hero 근처에 “무료 · 실제 거래 아님” 뱃지— 자산 예측 사이트라 처음 들어온 사람이 “돈을 걸어야 하나?”라고 오해할 수 있는데, 그 오해를 미리 걷어냄.
이미 반영되어 있던 3개 (걸러냄): 숫자 통계를 카드 세 개로 분리하는 것, “Sound familiar” 섹션을 말풍선 Before/After로 가는 것, 그리고 Hero에 도발적인 “Call it. Prove it.” 톤의 카피를 쓰자는 제안. 마지막 항목은 ChatGPT 입장에서는 새 제안이었지만, 우리 Hero는 이미 “You called it? Prove it. / 맞혔다고? 증명해봐.”로 가 있던 상태라 사실상 같은 방향이었다. 이런 항목이 나온다는 자체가 “방향은 맞게 잡고 있다”는 신호여서, 그 자체로 방향이 맞다는 확인 신호가 됐다.
미채택 2개:
- How it works를 3-step 타임라인으로 바꾸자 — 이미 Before/After 구조로 한 번 갈아엎은 상태였다. 또 갈아엎으면 톤이 흔들리고 사용자도 혼란스러워질 거였다.
- 로고를 “캔들차트 + 체크마크 + 타임스탬프”로 다시 만들자 — 라운드 1부터 5까지 거쳐서 확정된 차트+왕관 로고가 LDBD의 정체성(랭킹·증명)과 더 잘 맞았다.
이 단계에서 알게 된 건 단순했다. 크로스체크는 강력하지만, 모든 제안을 받아들이면 오히려 일관성이 깨진다. AI가 제안하는 게 객관적으로 더 나은 것일 때도 있고, 우리 상황을 모르고 제안한 것일 때도 있다. 그 차이를 가르는 건 결국 운영자 본인이다.
5. Bot API 페이지 — “없는 것”을 AI가 더 잘 찾는다
마지막 장면은 엄밀히 말하면 브랜딩 작업은 아니지만, “AI를 리뷰어로 쓰는 방식”이라는 점에서는 §4 크로스체크와 같은 흐름이었다.
/bots 페이지는 봇을 만들 개발자가 참고하는 API 문서다. 어느 정도 다 쓴 다음 Claude에게 “/bots 페이지 확인해줘”라고 던졌더니, 내가 빠뜨린 것들을 짚어줬다.
- 각 엔드포인트의 Response JSON 예시가 없어서 개발자가 호출 결과로 뭘 받을지 모름
- 제출 가능 시각(dormant window, 시장 마감·개장 기준 타이밍) 설명이 없음
- 전체 봇을 한 번에 보여주는 예제 코드가 없고 단발성 호출만 있음
여섯 가지를 지적했고, 여섯 가지를 다 받아들였다. 결과적으로 추가된 것들:
- 모든 엔드포인트에 실제 Response JSON 예시 첨부
- “Note on timing” info box — 미국 시장 closed / open / 크립토(24시간) 각각의 동작
- RSI 기반 자동 예측 봇 풀 코드 — 복사해서 환경변수만 채우면 바로 돌아가는 수준
- 마지막에 동기 부여 한 줄 — “매일 상승만 누르는 봇에게 지는 걸 지켜보세요.”
이 에피소드의 핵심은 채택률(6/6)이 아니라 그 앞 단계다. 내가 직접 페이지를 쓸 때는 이미 있는 것에만 시선이 머문다. 본문의 표현을 다듬거나, 코드 예제의 들여쓰기를 손보거나 하는 식이다. 반대로 AI는 페이지 전체를 “이 페이지가 다뤄야 하는 것”의 모범 답안과 비교해서 빠진 항목을 찾아낸다. 사람이 가장 약한 부분이고 AI가 가장 강한 부분이다.
그래서 그 이후로 새 페이지를 쓸 때 마지막 단계에 항상 같은 질문을 한 번 던진다 — “이 페이지에 빠진 게 있을까?” 거의 매번 새로운 항목 두세 개가 나온다.
마무리 — 내가 원하는 게 뭔지 정확히 말하는 일
한 달 사이에 다섯 작업을 했다. 카피를 도발적인 톤으로 다시 쓰고, 로고를 10번 넘게 수정하고, 컬러 팔레트를 정리하고, 다른 AI에게 크로스체크를 받고, 빠진 문서를 메웠다. 디자이너 자리에는 사람 대신 Claude와 ChatGPT가 앉아 있었다.
그 자리에서 AI가 한 일은 분명 많았다. 컨셉 네 개를 SVG로 한 번에 그려서 보여주고, 다음 라운드 변형을 빠르게 만들고, “왜 끊겨 보이는지”의 진짜 원인을 분석해서 해결책을 제시했다. 그래도 AI가 모든 걸 알아서 완성해준 건 아니었다. 매 라운드마다 누군가는 “왕관처럼 안 보여”, “여기가 끊겨 보여”, “이 제안은 우리한테 안 맞아”라고 말해줘야 다음 안이 나왔다. 그 말이 구체적일수록 다음 안이 좋아졌다.
그래서 AI가 디자인을 해주는 시대에 비전문가의 진짜 역할은, 내가 원하는 디자인이 뭔지 정확히 파악해서 AI 디자이너에게 말로 전달하는 일이 아닐까 싶다. 내가 만들 수 없는 SVG를 AI가 그릴 수 있다는 게 핵심이 아니라, AI가 그린 SVG를 보고 “왕관 같지 않다”고 말할 수 있는 사람이 옆에 있어야 한다는 게 핵심이다. 그 자리는 디자이너 출신이 아니라도 채울 수 있고, 사실 사용자 본인이 가장 잘 채운다 — 본인이 뭘 원하는지는 본인이 가장 잘 아니까.
LDBD를 직접 보고 싶다면 메인 페이지에서 가입하면 된다. 자기 봇을 붙이고 싶다면 /settings에서 identity와 API key 발급 부터. 사용은 무료다.