AI개발 개발자가 Claude Design으로 디자인하기 — 미단재 로고를 다시 만들며

2026년 10월 28일 · @martin

26년 동안 PHP로 API와 백오피스를 만들었지만, 디자인은 늘 남의 일이었다. 포토샵은 중급 정도로 다룬다. 시안을 직접 처음부터 잡아본 적은 거의 없다. 회사에 다닐 때는 디자이너가 넘겨준 PSD를 잘라 CodeIgniter 뷰에 붙이는 게 내 몫이었다.

혼자 SaaS를 만들기 시작하면서 사정이 바뀌었다. AIvance 로고, 명함, 집 문패, 그리고 개인 사이트 미단재(jblove.net)의 로고까지 전부 내가 정해야 했다. 지금은 그 마지막 작업, 미단재 로고를 Claude Design 캔버스에서 다시 만드는 중이다. 이 글은 개발자가 Claude Design으로 디자인을 해본 기록이고, 아직 진행 중인 작업의 중간 정리다.

Claude Design 전에는: 채팅으로 SVG를 받아 썼다

올해 디자인 작업은 대부분 채팅에서 SVG 코드를 받는 방식이었다. 개발자에게는 익숙한 방식이다. 결과물이 텍스트라서 diff로 보이고, 손으로 고칠 수도 있다.

결과는 쓸 만했다. 문제는 보면서 고르는 과정이었다. 시안 세 개를 비교하려면 파일 세 개를 받아 하나씩 열어봐야 했다. 색 하나 바꿔 보려 해도 다시 요청하고 다시 렌더링했다. 개발로 치면 브라우저 없이 HTML을 짜는 셈이었다.

Claude Design은 무엇이 다른가: 결과물이 캔버스 위에 놓인다

Claude Design은 대화로 디자인을 만드는 도구다. 왼쪽이 채팅, 오른쪽이 캔버스다. 시안이 파일이 아니라 캔버스 위의 아트보드로 나란히 놓인다. 개발자 입장에서 달라진 점은 네 가지였다.

• 나란히 비교한다. 시안 A·B·C가 한 화면에 세로로 쌓인다. 고르는 데 몇 초면 된다.
• Tweaks로 값만 바꿔 본다. 포인트 색을 인주색, 먹색, 호두나무 갈색 중에서 바로 바꿔 볼 수 있다. 다시 요청할 필요가 없다. 컴포넌트에 props를 노출해 두는 것과 같다.
• 고칠 곳을 짚는다. 큰 변경은 채팅으로, 버튼 하나나 간격 같은 세부는 캔버스를 눌러 인라인 코멘트로 단다.
• 코드로 나간다. PDF, PPTX, 독립 실행 HTML로 내보내거나 Claude Code로 넘길 수 있다. 아트보드 하나하나가 HTML이라서 개발자에게는 낯설지 않다.

처음 쓸 때 헷갈린 점도 있다. 6월에 맥 Claude 앱에서 Design을 찾다가 못 찾았다. 그때 확인해 보니 데스크톱 앱이 아니라 브라우저에서 claude.ai/design으로 들어가야 했다. 지금은 채팅에서 "디자인으로 만들어 줘"라고 해도 캔버스가 열린다. 미단재 로고도 그렇게 시작했다.

실전: 미단재 로고, "기괴하다"에서 "c로 해줘"까지

미단재 로고는 네 단계를 거쳐 정해졌다. 내가 한 말은 사실상 두 마디였다.

1단계, 첫 시안. 요청은 단순했다. 심볼과 "미단재" 글자를 합친 가로형, 그리고 심볼 단독형. 미단재는 그림, 글, 목공, 개발을 다 담는 사이트다. 그래서 첫 시안은 그 네 가지를 한 도장 안에 넣었다. 처마 지붕, 먹방울, 나이테 원, 개발을 뜻하는 < > 괄호다. 캔버스에 뜬 걸 보고 한 마디 했다. "기괴하다." 지붕과 원과 괄호가 모여 얼굴처럼 보였다.

2단계, 상징을 하나씩. Claude는 요소를 너무 많이 넣었다고 인정하고, 상징 하나만 쓰는 시안 세 개를 같은 캔버스에 다시 그렸다.

• A 낙관: 세로 주홍 도장에 미·단·재를 새겼다.
• B 처마: 붓으로 그은 처마 한 획과 붉은 창 하나.
• C 창살: 한옥 창살을 비대칭으로 나누고 한 칸만 붉게 채웠다. 목공 짜임과 화면 그리드가 겹쳐 보이는 의도다.

세 시안이 세로로 나란히 있으니 고르는 데 오래 걸리지 않았다. "c로 해줘."

3단계, C 확정과 응용형. 캔버스를 C 하나로 정리하고 가로형, 심볼 단독, 반전형, 세로형, 파비콘 미리보기를 붙였다. 색은 먹 #1F1B16, 한지 #F6F1E7, 인주 #B4432A 세 가지뿐이다. 파비콘은 16px에서 창살이 뭉개지지 않도록 선을 조금 굵혔다.

4단계, 코드로. 다음 섹션에서 다룬다.

돌아보면 "기괴하다"는 나쁜 피드백이 아니었다. 무엇이 싫은지는 정확히 전했고, 대안을 고르는 일은 캔버스가 맡았다. 디자이너에게 설명하듯 길게 쓸 필요가 없었다.

디자인에서 코드로: "다운로드 하게 해줘"

캔버스에서 PNG나 PDF로 바로 내보낼 수도 있었다. 하지만 사이트 헤더와 파비콘에 쓸 거라면 SVG가 필요했다. 그래서 세 번째로 한 말은 "다운로드 하게 해줘"였다.

여기서 개발자에게 익숙한 문제가 하나 나왔다. 폰트 의존성이다. 아트보드의 워드마크는 웹폰트(나눔명조 ExtraBold)를 불러와 그린다. 그대로 SVG로 빼면 폰트가 없는 환경에서 글자가 다른 폰트로 바뀐다. 그래서 글자를 윤곽선 path로 바꿨다. fontTools로 글리프 외곽선을 뽑아 SVG path로 옮기는 방식이다.

<!-- jblove.net 헤더에 넣는 형태 (예시) -->
<a href="/" class="site-logo">
    <img src="/assets/brand/midanjae-logo.svg" alt="미단재" width="180" height="48">
</a>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

최종 묶음은 zip 하나였다. 가로형과 심볼 SVG, 반전형, 세로형, 파비콘 세트(ico, svg, 여러 크기 PNG), apple-touch-icon, 그리고 헤더에 넣을 HTML 스니펫이 들어 있다. 렌더링한 PNG 미리보기를 확인하다가 글자가 너무 크게 들어간 걸 발견해 크기와 여백을 한 번 조정하기도 했다. 위 코드의 경로와 크기는 예시다. 실제 파일명은 묶음 안의 것을 그대로 쓰면 된다.

개발자가 디자인할 때 배운 것

1. 요구사항을 다 넣으면 기능 과잉이 된다. "그림·글·목공·개발을 다 담아 줘"는 API에 엔드포인트를 몰아넣는 것과 같았다. 로고는 하나의 책임만 지는 게 낫다. 단일 책임 원칙은 디자인에도 통했다.
2. 취향은 설명하지 말고 고르게 한다. 나는 "어떤 로고를 원하는지" 말로 정확히 설명하지 못했다. 대신 셋 중 하나는 바로 골랐다. 시안을 여러 개 요청하는 게 긴 프롬프트보다 빠르다.
3. 짧은 거절도 충분한 피드백이다. "기괴하다" 한 마디로 방향이 바뀌었다. 이유를 길게 쓰지 않아도 무엇이 싫은지는 전해진다.
4. 값은 변수로 뺀다. 색 세 개를 Tweaks로 노출해 두니 바꿔 보는 데 요청이 필요 없었다. 디자인 토큰은 결국 설정 파일이다.
5. 마지막은 결국 개발 일이다. 폰트를 윤곽선으로 바꾸고, 파비콘 크기별로 선 굵기를 확인하고, 헤더에 붙이는 일. 캔버스는 고르는 단계를 빠르게 해 주고, 붙이는 단계는 여전히 개발자의 몫이다. 그리고 그 부분은 내가 잘하는 일이다.

마치며: 아직 진행 중이다

로고 파일은 나왔지만 작업은 끝나지 않았다. 미단재의 예전 브랜딩은 주황에서 갈색으로 넘어가는 그라데이션, 중괄호와 커피잔 아이콘이었다. 새 로고는 먹과 한지와 인주다. 색이 완전히 바뀌었으니 사이트 헤더, 글 썸네일, 블로그 이미지 톤도 따라 바뀌어야 한다.

다음에는 이 세 가지 색과 나눔명조를 Claude Design의 디자인 시스템으로 묶어 볼 생각이다. 그러면 블로그 썸네일이나 AIvance 제품 화면을 만들 때마다 색을 다시 설명하지 않아도 된다. CI4 프로젝트에서 공통 설정을 Config로 빼 두는 것과 같은 이유다.

26년 동안 디자인은 넘겨받는 것이었다. 지금은 캔버스에 시안을 띄워 놓고 고른다. 디자이너가 된 건 아니다. 다만 혼자 일하는 개발자에게 "고를 수 있는 시안"이 생겼다는 것만으로도, 작업 방식은 꽤 달라졌다.