클로드로 어디까지 디자인이 가능할까? UI 시안 수정하는 방법

 

안녕하세요 찐망고입니다.

 

클로드 디자인 사용법? 클로드로 어디까지 디자인이 가능한가?

클로드로 누구나 쉽게 디자인하는 법?

멀 지칭 해도 애매하긴 한데 일단 클로드 디자인으로 작업한 저작물들을 

포스팅해보도록 하겠습니다.

 

참고로 유료입니다 무료는 메뉴조차 안보임

Claude 디자인

 

이번반 학생이 리디자인한 섹션인데 반응형이라 이대로 진행하기가 애매하죠?

예전에는 레퍼런스를 하나씩 찾아봤겠지만 그렇게 시간을 찾는데 엄청 썼겠지만

지금은 클로드가 있다 하하하

샘플디자인-1

샘플디자인-원본

 

전체 디자인의 조화를 위해 해당 섹션이 끼어있는 디자인과

바꿀 디자인을 클로드에게 전달합니다.

이때 프롬프트로 현재 사용하는 폰트, 프라이머리컬러 외 섹션에 들어갈 컬러
첨부된 이미지 설명과 함께 반응형 작업을 하려고 보니 섹션자체게 step형태라 stpe형으로 보이는 디자인으로 만들어달라고 요청합니다. 이때 반응형이니 슬라이드 형태여도 괜찮다고 같이 적어줍니다.

 

그럼 상황파악을 한 클로드가 몇 가지 확인을 하는데요..

- layout: Explore a few options (여러 안 비교)

- mobile: 좌우로 넘기는 슬라이드

- images: 스크린샷에서 잘라서라도 일단 넣어주세요 (화질 다소 저하)

- bg: 위아래 섹션 그대로 — 크림색 배경 + 오렌지 드립 유지

 

결정권을 나에게 줍니다 어떤 레이아웃으로 할 건지, 색상을 어떻게 할건지 

슬라이드를 쓸 건지 말건지와 같은 ㅎㅎ

 

세 가지 시안을 던져주는데

01→05가 점선 화살표로 이어지는 한 줄 스텝. 순서가 가장 직관적

앙 경로를 따라 위아래로 번갈아 배치, 큰 고스트 번호로 단계 강조.

한 번에 한 스텝씩 크게 보여주는 인터랙티브 슬라이드(화살표·탭 클릭).

 

어때요 세가지 시안 다 괜찮지 않나요? 

생각보다 상태가 좋아서 놀라는 나 

 

클로드 디자인 공유

 

공유는 이렇게 가능합니다.

피그마파일로 가면 제일 좋을 텐데 그건 안 되는 거 같고

바로 HTML작업도 해줌

 

저는 아직 노가다로 디자인작업물 개발자도구 보고

피그마로 다시 그립니다. 

물론 html로 링크주소로 변환하여 받아서 피그마에서 레이어별로 정리할 수 있긴 한데

생각보다 아주 오래 걸리며 프레임 자체가 이쁘게 만들어지지 않습니다.

 

쓰다 보니 느낀 점은

클로드가 생각보다 디자인 맥락을 잘 이해하고 그 안에서 해결책을 제안하는 도구역할로 쓰기 좋음

레퍼런스를 찾고, 레이아웃을 고민하고 다양한 시안을 빠르게 비교하는 용도로는 충분히 활용 가능 할 것 같음