개발자 사이드 프로젝트의 가장 큰 약점이자, 숙원 사업은 디자인이다. 최근에 출시된 (나온지 2주가 넘었지만) Claude Design 을 가볍게 사용하여 간단한 사이트 리디자인을 진행하려고 한다.
먼저, 클로드 디자인 사이트에 접속해준다. Project Name 에 이름을 넣고, 원하는 항목을 선택하여 Create 를 누른다.
클로드 디자인은 따로 웹 사이트에서 진행하는 거다보니, 기존 프로젝트에 대한 컨텍스트 및 디자인 정보를 가지고 있지 않다. 먼저 기존 사이트의 기본 컨텍스트 정보를 가져와 보겠다.
이것도 내가 직접 정리하긴 어려우니, Claude Code 에게 정리해달라고 요청하였다.
기존 사이트의 디자인은 다음과 같았다. 이거는 Claude Code가 만들어준 건데, 솔직히 가독성이 좋지는 않다. 기본 글씨의 색상을 회색으로 해버려서 본래의 목적을 지원하지 못하는 최악의 디자인이 되었다. 전면적인 개편의 필요성을 느꼈고, 여기에 클로드 디자인을 사용해보았다.
클로드에 기본 컨텍스트를 입력하자, 다음과 같이 설문이 나왔다. 내가 가장 중요하게 생각하는 markdown(md) 파일의 가독성을 향상시키는 것을 강조하여 요청하였다.
설문조사를 마치면 클로드가 고민하며 추가적으로 필요한 사항을 정리해준다. 답변하고, 기다려준다.
처음부터 꽤나 큰 작업을 요청해서 그런지 꽤나 오랜 시간과 함께 많은 토큰을 사용하였다. 사실 작업이 채 끝나기도 전에 한도에 도달할까봐 무서웠다. (클로드가 혼자 열심히 작업하던거 날아갈까봐~)
급하게 지금까지 결과 저장해달라고 추가 프롬프트를 보냈다. 다행히 75% 토큰 사용하고 작업 결과가 나왔다. 시간은 한 30분 정도 소요됐다. 나의 경우 시안 3가지를 요청했다.
나온 디자인이 100프로 마음에 드는게 없어, 각 디자인별로 마음에 드는 부분과 개선사항을 정리하여 전달하였다. 이 hybrid 파일까지 생성하고 나니 금주 claude design 토큰 사용량이 100%가 되었다.
중간중간 "지금까지 결과 저장해줘" 라고 말하는건 필수인 듯하다.
그렇게 해서 나온 디자인인데, 꽤나 마음에 든다. 이제 이걸 실제 프로젝트에 적용해보겠다. 사실 어떻게 적용하는지 몰라서 삽질 좀 했다. 처음에는 클로드 디자인의 index.html 파일들을 다운받아 프롬프트를 작성했다. 이렇게 했더니 인식을 잘 못해서 맨 처음에 아래와 같이 나왔다. 엄청나게 음 .. 무언가 섞인 무언가가 나왔다.
열심히 진짜 파일이 뭔지 찾아다녔는데, Design Files > Pages > 실제 사용할 파일 을 다운받아 전달하면 되는 것 같다. 이렇게 했을 때, 원하는대로 디자인이 구현되었다. 나는 최초 시안의 여러가지 요소를 병합하여 클로드 디자인이 파일 이름을 hybrid.html 로 변경해주었다.
최초 제안받았던 디자인들이다.
이모저모 디테일들을 수정해서 나온 최종 디자인이다.
근데 너무 잦은 PR 로 인해 vercel 의 배포 한도량에 도달해버렸다. 그래서 배포를 못하는 상태 ...!
아무튼 이렇게 클로드 디자인을 써봤는데, 어설픈 디자인 감각으로도 굉장히 만족스러운 결과가 나왔다. 여러 AI 를 사용해보고, 꽤나 써봤다고 생각이 들지만 이렇게 만족스러운 디자인을 내준건 처음이다. UI/UX 적인 부분에서 내가 생각하지 못한 여러 부분들을 꽤나 신경써줬다.
앞으로 좋은 시너지가 나올 것 같아 기대된다. 단점은, 토큰 제공량이 너무 적음 !
클로드 디자인 링크만 찾아보고, 나머지는 내 마음대로 사용해봤는데 다른 사람들이 어떻게 썼는지 더 찾아볼 예정이다 ^_^
Claude Design 시작하기 | Anthropic 지원 센터
support.claude.com
https://support.claude.com/ko/articles/14604416-claude-design-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0
