UIUX 디자이너를 위한 클로드 코드 입문 - 실전편

말했더니, 화면이 생겼다

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

설치편이 클로드 코드를 쓸 수 있는 환경을 만드는 과정이었다면, 이 글은 실제로 어떻게 사용하는지에 대한 이야기다. 디자이너 입장에서 어떤 방식으로 접근하면 좋은지, 어디서 막히는지, 어떻게 돌아가는지를 경험 그대로 정리해봤다.

링크 : https://brunch.co.kr/@yeoooni/8

처음에는 익숙한 주제로 시작하는 게 좋겠다고 생각했다. 그래서 가상의 서비스를 하나 설정하고 시작해봤다.

기념일에 어울리는 선물을 추천해주고, 가격 비교까지 해주는 웹서비스다. 아이디어만 있고 화면은 없는 상태에서, 클로드 코드에 넘기기 전에 먼저 클로드에게 프롬프트를 잘 짜달라고 요청했다.

얼마나 자세하게 써야 할까

클로드 코드를 처음 사용할 때 가장 고민됐던 건 "얼마나 자세하게 써야 하지?"였다.

그래서 일부러 기획안을 길게 작성해서 넣어봤다. 기념일 종류, 사용자 조건, 추천 로직, 가격 비교 방식, 화면 구성까지 거의 기획 문서에 가깝게 정리해서 전달했다.

그런데 꼭 이렇게 길게 쓸 필요는 없다.

몇 번 더 사용해보면서 느낀 건, 클로드 코드는 짧게 써도 충분히 잘 만들어준다는 점이었다. 오히려 짧고 명확하게 시작하고, 결과를 보면서 수정해 나가는 방식이 훨씬 효율적이었다. 처음부터 완벽하게 설명하려고 하기보다, 일단 만들어보고 계속 다듬는 흐름이 더 자연스럽다.

서비스를 조금 더 구체화하려고 하다 보니, 클로드 코드가 외부 API를 연결하라는 제안을 했다.

쇼핑몰 가격 정보를 실시간으로 가져오려면 실제 API 키가 필요하다는 얘기였다.

디자이너 입장에서 API 연결은 생각보다 진입장벽이 있고, 지금 내가 원하는 건 완성된 서비스가 아니라 형태를 빠르게 확인하는 것이었다. API 대신, 하드코딩된 목업 데이터를 넣어서 만들어달라고 요청했다.

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

결과물

결과물은 이렇게 나왔다. 서비스 이름은 기프티파인더. 누구에게, 어떤 날, 얼마에, 3가지 조건만 입력하면 5개 쇼핑몰의 가격을 비교해서 선물을 추천해주는 구조다.

추천 시작 버튼과 함께 어버이날처럼 시즌 기념일을 바로 선택할 수 있는 섹션도 붙었다. 기념일 종류 필터, 인기 선물 TOP 8 리스트까지. 내가 기획 문서에 썼던 내용이 꽤 그럴듯한 형태로 나왔다.

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

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

실무에서 이렇게 하지 않는다. 브랜드 컬러, 컴포넌트 규칙이 이미 정해져 있기 때문이다. 해당 이미지는 참고용

디자인 시스템 설정하기

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

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

기존 코드를 디자인 시스템에 맞게 마이그레이션할 거냐고 물어보는데, 해달라고 하면 된다.

디자인 수정하는 방법

디자인을 수정하는 방법은 크게 두 가지다.

첫 번째는 화면을 캡처해서 수정해달라고 하는 것이고,

두 번째는 개발자 도구에서 코드를 복사해 수정 사항을 말하는 방법이다.

첫 번째 화면을 캡처해서 수정해달라고 하는 것이다.

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

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

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

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

찰떡같이 알아듣고 수정까지 잘 해주는 클로드 덕분에, 디자이너도 이제 코드를 직접 다루는 시대가 됐다.

결과물을 보면 알 수 있듯이, 디자이너도 이제 바이브 코딩을 할 줄 알아야 하는 시대가 됐다. 거의 퍼블리셔가 된 느낌이랄까. 다만 예전의 퍼블리셔와는 다르다. HTML과 CSS를 외워가며 짜던 방식이 아니라, AI와 대화하면서 함께 만들어가는 방식이다.

물론 아직은 사람의 개입이 필요하다. 방향을 잡고, 결과를 판단하고, 원하는 걸 말로 풀어내는 건 여전히 사람의 몫이다. 하지만 그 진입장벽이 확실히 낮아졌다. 코드를 몰라도, 개발 경험이 없어도, 디자이너가 머릿속에 있는 화면을 직접 꺼낼 수 있게 됐다는 게 가장 크게 달라진 점이다.