클로드 피그마로 페이지 디자인하기 | 와이어프레임부터 유저 플로우까지 AI로 완성 transcript

[음악] 이번 영상에서는 지난 시간까지 피그마에 구축해 둔 파운데이션과 컴포넌트 라이브러리를 활용해서 실제 서비스에서 작동하는 페이지를 조립해 볼 거예요. 오늘도 잘 따라오세요. 새로운 컴포넌트를 그때그때 임의로 그리는게 아니라 이미 정의된 디자인 시스템 에셋과 기존 서비스의 레이아웃 규칙으로 조합해서 화면을 생성하는 워크 플로우를 다뤄 볼게요. 지난 영상에서 MCP 설정을 했기 때문에 바로 기획부터 화면 디자인 그리고 화면 연결 흐름 검증까지 클로드 코드를 이용해 진행해 볼게요. [음악] 첫 번째 단계는 컨텍스트 싱크 즉 클로드와 우리 제품의 기준을 서로 맞추는 단계예요. 클로드 코드가 피그마 데이터를 직접 들여다보고 우리 디자인 시스템의 규칙을 이해할 수 있도록 파일과 프레임 정보를 동기화해 볼게요. MCP 환경이 이미 연결되어 있으니까 바로 실습으로 들어가 볼게요. 먼저 클로드 코드 창에 우리가 정리해 둔 파운데이션과 컴포넌트가 들어 있는 피그마 링크를 입력해 주세요. 만약 지난 강의를 보시면서 파운데이션 등록과 컴포넌트 제작이 완료되었다면이 과정은 스킵하셔도 돼요. 피그마 링크를 입력했다면 클로드가 MCP를 통해 파일 안의 변수와 컴포넌트 메타데이터를 직접 스캔해서 싱크를 맞추는데요.이 과정을 거쳐야만 클로드가 우리 프로젝트에 어떤 버튼이 있고 어떤 텍스트 스타일이 정의되어 있는지 학습한 상태로 작업을 시작할 수 있어요. 디자인 시스템을 등록했으면 이제 우리가 기존에 제작했던 실제 서비스 화면들을 클로드에게 보여 줄 차례예요. 단순히 버튼이나 인풋 같은 부품만 안다고 해서 우리 제품 화면이 나오는 건 아니거든요. 현재 라이브 중인 대표 화면 몇 장을 전달하면서 우리 제품이 어떤 분위기를 가졌는지 정보를 어떤 호흡으로 보여 주는 서비스인지 그 맥락과 토넷 매너를 먼저 깊이 있게 학습하도록 요청해 주세요. 이때 화면을 전달하는 방식이 정말 중요한데요.

JPG나 PNG 같은 캡처 이미지보다는 실제 작업한 피그마 프레임으로 전달해 주세요. 이미지로 전달하면 클로드가 겉모습만 대충 짐작해서 따라할 뿐이지만 피그마의 실제 프레임 형태로 전달하면 레이어 계층 구조와 오토 레이아웃에 정확한 수치를 그대로 읽게 돼요. 상단 내비게이션 높이부터 여백은 어떻게 사용했는지 등 프레임 데이터를 직접 뜯어보게 만들어야 우리 제품의 디자인을 보다 정확한 레이아웃로 도출할 수 있어요. 두 번째 단계는 화면에 레이아웃을 잡는 와이어 프레임 기획 과정이에요. 우리가 만들고자 하는 화면에 최소 요구 사항을 던져 주고 클로드에게 누락된 필수 기능들을 역으로 제한받아 구조를 완성해 볼게요. 실제 서비스에서 자주 만드는 로그인 화면을 예시로 진행해 볼게요. 처음부터 모든 기획을 완벽하게 적으려고 부담을 가질 필요 없어요. 내가 당장 화면에 들어가야 한다고 생각하는 최소한의 요소 즉 아이디 입력창과 비밀번호 입력창 그리고 로그인 버튼 정도만 간단하게 먼저 클로드에게 적어 주세요. 프롬프트를 입력하면 클로드가 실무 프로덕트 디자이너처럼 화면에 필요한 보조 기능들을 알아서 제안해 줄 거예요. 소셜 로그인 버튼은 필요한지, 비밀번호 찾기나 회원 가입 링크는 어디에 배치할지, 자동 로그인 체크박스는 넣을 것인지, 같은 실무적인 항목들을 역으로 제안해 주는데요. 디자이너가 깜빡하고 놓치기 쉬운 사용자 경험 요소들을 짚어 주는 파트너 역할이라고 생각하시면 돼요. 클로드가 제안해 준 기능들을 무작정 다 집어넣으면 화면이 복잡해질 수 있어요. 그래서 이번에는 사용자가 로그인 화면에 들어와서 나갈 때까지의 행동 흐름에 맞춰서 제한된 항목들의 우선 순위와 상하 배치 순서를 다시 정리해 달라고 요청해요. 먼저 보여 줘야 할 필수 영역과 보조 영역 그리고 소셜 로그인 같은 요소도 깔끔하게 정리해 달라고 하면 클로드가 동선에 맞춰 논리적인 구조로 다시 다듬어 줘요. 이제 본격적으로 화면을 그려 볼 텐데요. 처음부터 완성형 컴포넌트를 바로 쓰지 않는 걸 권장드려요. 스타일의 시선이 뺏기지 않고 순수한 구조만 먼저 점검하기 위해서 스케치 형태로만 로그인 첫 화면에 와이어 프레임을 피그마 캔버스에 그려 달라고 요청해요. 단순한 형태로 각 영역의 크기 비율과 여백만 먼저 잡아두면 화면의 시각적 위계가 안정적인지 훨씬 객관적으로 판단할 수 있어요. 첫 화면에 네모 박스 구조가 잘 나왔다면 이제 화면 한 장에서 멈추지 않고 서비스의 전체 흐름으로 확장해 주세요. 로그인 입력 중 오류가 났을 때에 에러 화면 그리고 소셜 로그인을 눌렀을 때 넘어가는 다음 동성까지 동일한 로우파이 와이어프레임으로 그려 달라고 요청하는 거예요. 이렇게 초기 단계에서부터 화면 간의 이동 흐름을 미리 연결해 두어야 나중에 실제 컴포넌트를 입혔을 때 기획에서 놓치는 항목 없는 서비스 플로우가 완성돼요. 세 번째 단계는 피그마 캔버스에 직접 화면을 그려내는 시간이에요. 클로드 코드가 MCP를 통해 피그마 안에 시안을 직접 생성하고 우리의 피드백을 반영해 최적의 최종안으로 작업하는 과정을 보여 드릴게요. 확정된 구성 요소들을 바탕으로 제작한 컴포넌트만 재용해서 서로 다른 느낌의 세 가지 레이아웃 시안을 캔버스에 직접 그려 달라고 요청해 주세요. 새로 그릴 필요 없이 클로드 코드가 MCP를 통해 피그마 캔버스 위에 다른 레이아웃로 프레임을 생성할 거예요. 입력 폼 중심의 심플한 구성부터 소셜 로그인을 상단에 강조한 구성까지 예정 같으면 디자이너가 아이데이션 해야 하는 과정을 AI가 대신 그려 주는 거예요. 디자이너는 AI가 그려 준 화면을 나란히 비교해 볼 수 있어요. 캔버스에 생성된 세 가지 시안을 천천히 둘러본 뒤 원하는 시안을 선택해요. 또는 마음에 드는 부분을 골라 피드백을 전달해요. 예를 들어 전반적으로 첫 번째 시안이 마음에 들지만 로그인 입력창과 소셜 로그인 영역은 세 번째 시안이 마음에 든다면 그 내용을 그대로 적어 주는 거예요. 클로드는이 요청을 이해하고 기존 프레임의 장점들만 조합해서 새로운 개선안을 도출해 내요. 명령을 보내면 피그마 캔버스의 두시 안의 장점만 합쳐진 최종 완성 디자인으로 업데이트돼요. 우리 디자인 시스템에 이미 등록되어 있던 컴포넌트를 사용했기 때문에 통일된 토앤 매너를 유지하면서 한 페이지가 손쉽게 완성되어 로그인 첫 화면에 최종 디자인이 완성되었으니 이제이 완성된 스타일을 바탕으로 앞서 와이어 프레임으로 만들어 두었던 전체 플로우 화면들에 디자인을 입혀 줄 차례예요. 클로드에게 방금 만든 최종 로그인 화면에 컴포넌트 규칙을 그대로 가져가서 와이어프레임 형태의 유저 플로우 화면들에 디자인을 한 번에 적용해 달라고 요청해요. 이렇게 하면 처음부터 화면마다 디자인을 따로 고민할 필요 없이 첫 화면에서 검증된 디자인 시스템 규칙이 전체 유저 플로우 화면으로 한 번에 확장되면서 디자인 통일감을 유지할 수 있어요. 오늘은 만들어 둔 컴포넌트와 기존 화면을 클로드에 동기화 해서 실제 서비스 페이지와 화면 연결 흐름까지 피그마 캔버스에 직접 생성해 봤어요. 페이지 제작을 보다 빠르게 제작할 수 있기 때문에 AI를 적극적으로 활용하면 디자인에 훨씬 도움이 될 거예요. 오늘도 영상 시청하느라 수고했어요. 다음 영상에서 만나요.

I'm듀. >> [음악] [음악]