디자이너가 코드 한 줄도 안 쓰고 만든 가격 비교 서비스 — 클로드 코드 실전기

설치까지 마쳤다면, 그 다음부터가 진짜 시작이에요.

설치편이 환경을 만드는 과정이었다면, 여긴 실제로 어떻게 쓰는지에 대한 이야기. 디자이너 입장에서 어디서 막히는지, 어디서 풀리는지를 경험 그대로 정리해봤어요. 시작은 익숙한 주제로 가는 게 좋겠다 싶어서, 가상의 서비스를 하나 잡고 시작했고요. 기념일에 어울리는 선물을 추천해주고 가격 비교까지 해주는 웹 서비스. 아이디어만 있고 화면은 없는 상태에서, 클로드 코드에 넘기기 전에 클로드한테 먼저 "프롬프트 잘 짜달라"고 부탁했어요.

얼마나 자세하게 써야 하지?

처음에 가장 고민됐던 건 이거였어요. "얼마나 자세하게 써야 하지?"

일부러 기획안을 길게 작성해봤어요. 기념일 종류, 사용자 조건, 추천 로직, 가격 비교 방식, 화면 구성까지. 거의 기획 문서 수준이었어요. 그런데 몇 번 더 써보면서 깨달은 게 있어요. 클로드 코드는 짧게 써도 충분히 잘 만들어줘요. 오히려 짧고 명확하게 시작하고 결과 보면서 수정하는 쪽이 훨씬 효율적이에요.

처음부터 완벽하게 설명하려 하지 말 것. 일단 만들어보고 다듬는 흐름이 자연스러워요.

서비스를 구체화하다 보니 클로드 코드가 외부 API 연결을 제안했어요. 쇼핑몰 가격 정보를 실시간으로 가져오려면 실제 API 키가 필요하다고. 디자이너 입장에선 API 연결 자체가 진입장벽이거든요. 그리고 지금 필요한 건 완성된 서비스가 아니라 형태를 빠르게 확인하는 거였고요. 그래서 API 대신 하드코딩된 목업 데이터로 만들어달라고 했어요.

생각보다 별거 없어요. 개발 용어를 몰라도 그냥 말로 하면 돼요. "npm run dev"가 뭔지 몰라도 "서버 띄워줘"라고 하면 알아서 띄워줘요.

서비스 이름은 기프티파인더 — 결과물이 의외였어요

결과물이 이렇게 나왔어요.

서비스 이름은 기프티파인더. 누구에게, 어떤 날, 얼마에 — 3가지 조건만 입력하면 5개 쇼핑몰 가격을 비교해서 선물을 추천해주는 구조예요. 추천 시작 버튼과 함께 어버이날 같은 시즌 기념일을 바로 선택할 수 있는 섹션도 붙었고요. 기념일 종류 필터, 인기 선물 TOP 8 리스트까지. 기획 문서에 썼던 내용이 꽤 그럴듯한 형태로 나왔어요.

메인 화면 하나만 나온 게 아니에요. 조건을 입력하면 추천 결과 페이지로 넘어가고, 거기서 상품을 클릭하면 상세 페이지까지 연결됐어요.

상세 페이지에는 G마켓·쿠팡·네이버쇼핑·SSG·11번가 5개 쇼핑몰 가격을 한눈에 비교해주는 테이블이 있었어요. 최근 30일 가격 추이 그래프에 대체 추천 상품 섹션까지 붙어 있었고요. 목업 데이터로 채워진 거지만, 전체 서비스 흐름이 끊기지 않고 자연스럽게 이어졌어요.

(이걸 보고 든 생각 — 디자이너가 만든 와이어프레임을 보여주는 게 아니라, 작동하는 서비스를 보여주는 거구나.)

디자인 시스템은 design.md 파일로

디자인 시스템을 design.md 파일로 만들어두고 클로드 코드에게 "이 디자인 시스템에서 벗어나지 마"라고 하면, 이후 작업이 전부 그 안에서 이뤄져요. 대략적인 분위기만 말해줘도 찰떡같이 해석해서 만들어줘요. 정말 최고예요.

이 설정은 프로젝트 시작 전에 해두는 게 좋아요. 저는 테스트용으로 가볍게 만들다 보니 미리 설정하는 걸 깜빡했고요. 이제는 피그마에서 하나하나 디자인 시스템을 제작하지 않아도 돼요. 화면으로 확인하고 싶으면 design.md 파일을 붙여넣어서 화면으로 만들어달라고 하면 끝.

기존 코드를 디자인 시스템에 맞게 마이그레이션할 거냐고 물어봐요. 해달라고 하면 돼요.

디자인 수정 — 두 가지 방법

수정하는 방법은 크게 둘이에요.

첫 번째는 화면을 캡처해서 수정해달라고 하는 것. 결과물이 브라우저에 띄워진 상태에서 스크린샷을 찍고, "여기 버튼 간격이 너무 좁아", "이 카드 모서리를 더 둥글게 해줘"처럼 말로 설명하면 돼요. 이미지를 보고 어디를 고쳐야 할지 스스로 파악해서 수정해줘요.

디자이너한테 레드라인 없이 그냥 화면 보여주면서 "이 부분 좀 손봐주세요" 하는 것과 비슷한 느낌이에요. 코드를 전혀 몰라도 되는 방식이라 접근하기 가장 편하고요.

두 번째는 개발자 도구에서 코드를 복사해 수정 사항을 전달하는 방법. 브라우저에서 수정하고 싶은 요소를 우클릭해 검사를 누르면 해당 HTML, CSS 코드가 보여요. 그걸 복사해서 붙여넣고 "이 부분 폰트 사이즈 키워줘", "배경색 바꿔줘" 하면 돼요.

첫 번째 방법보다 조금 더 정확하게 원하는 지점을 짚을 수 있어서 세밀한 수정에 유용했어요. 개발자 도구가 처음에는 낯설지만, 막상 써보면 우클릭 → 검사 → 복사 순서만 기억하면 돼요.

디자이너의 새 자리 — '거의 퍼블리셔'

찰떡같이 알아듣고 수정까지 잘 해주는 클로드 덕분에, 디자이너도 이제 코드를 직접 다루는 시대가 됐어요. 결과물을 보면 알 수 있듯이, 디자이너도 바이브 코딩을 할 줄 알아야 하는 시대가 된 거예요. 거의 퍼블리셔가 된 느낌. 다만 예전의 퍼블리셔와는 다르죠.

HTML과 CSS를 외워가며 짜던 방식이 아니라, AI와 대화하면서 함께 만들어가는 방식. 물론 아직 사람의 개입은 필요해요. 방향을 잡고, 결과를 판단하고, 원하는 걸 말로 풀어내는 건 여전히 사람의 몫이거든요.

진입장벽이 낮아진 게 가장 큰 변화예요. 코드를 몰라도, 개발 경험이 없어도, 디자이너가 머릿속에 있는 화면을 직접 꺼낼 수 있게 됐다는 거. 손에 쥐어진 도구가 달라졌으니 일하는 방식도 달라지는 게 자연스럽고요.

기프티파인더 만드는 데 며칠도 걸리지 않았어요. 같은 프로젝트를 6개월 전에 했다면? 디자인 시안만 만들고 끝났을 거예요.