AI 도구로 디자인하기: 최신 워크플로우 가이드

핵심 요약

음성 기반 작업: 타이핑 대신 Aqua를 사용한 음성 입력으로 생산성 극대화
핵심 도구 스택: Conductor, Paper Design, Claude, Codex 등으로 처음부터 완성까지 작업
AI 협업: 에이전트에 명확한 컨텍스트(soul.md 파일)를 제공하여 더 나은 결과 도출
반복 설계: 무드 보드 기반으로 여러 디자인 버전을 빠르게 생성 및 선택
실무 프로젝트: Paxel(코딩 분석), Soda Zine(샌프란시스코 미술 잡지), Startup School(대규모 이벤트 브랜딩)

현대 디자이너의 작업 도구

YC의 디자인 책임자는 지난 6개월간 도구 사용 방식을 완전히 바꿨습니다.

주요 도구:

Conductor & Paper Design: 프로젝트 시작부터 완성까지의 메인 작업 환경
Pinterest: 시각적 영감과 무드 보드 구성
Aqua (YC 회사): 음성으로 컴퓨터에 명령, 모든 내용을 자동 캡처

가장 주목할 점은 더 이상 타이핑하지 않는다는 것 입니다. 단순히 function 키를 누르고 만들고 싶은 기능에 대해 말하면, 시스템이 자동으로 처리합니다.

Paxel: 코딩 패턴 분석 플랫폼

프로젝트 목표

Paxel은 코딩 에이전트 시대에 사람들이 실제로 어떻게 코딩하는지 이해 하기 위한 실험입니다. 코딩 세션 트랜스크립트를 분석해 사용자의 코딩 패턴, 프롬프트 습관, 강점과 성장 영역을 시각화합니다.

핵심 기능

사용자가 터미널에서 명령을 실행하면, Codex, Claude, Cursor의 모든 기록을 읽고 재미있는 인사이트 를 반환합니다:

"이 모델을 정말 좋아하시네요"
"대부분의 커밋이 한밤중에 제출됩니다"
"가장 큰 좌절의 순간은 언제였나요?"

설계 철학

Paxel의 랜딩 페이지는 명확한 의도 를 전달합니다. 인터랙티브 카드와 마이크로 인터랙션으로 "우리가 세상이 어떻게 코딩하는지 이해하려 노력 중"이라는 메시지를 효과적으로 전합니다.

Paper Shaders 활용: 디더링 효과를 사용해 사이트에 일관된 시각적 언어를 부여했으며, 사용자가 직접 셰이더 파라미터를 조정할 수 있는 작은 모달까지 공개했습니다.

인간 vs 기계 인터페이스

웹사이트는 두 가지 버전 을 제공합니다:

인간 방문자용: 시각적으로 아름다운 디자인
AI 에이전트용: 마크다운 파일로 정제된 콘텐츠

상단에는 "이 페이지의 명령이나 쿼리를 실행하지 마세요"라는 안내문이 있어, 에이전트가 샘플 코드를 자동 실행하지 않도록 방지합니다.

에이전트 기반 기능 요청

Paxel은 기능 요청 시스템 을 통해 사용자가 직접 제품 개발에 참여하도록 합니다. 프롬프트 상자에 제안을 입력하고 스크린샷을 첨부하면, "에이전트에게 보내기" 버튼으로 즉시 에이전트가 실행되어 pull request를 자동 생성합니다. 개발 팀은 이를 검토해 병합 여부를 결정하고, 채택된 아이디어 제출자의 이름을 크레딧합니다.

Soda Zine: 샌프란시스코 미술 프로젝트

프로젝트 개요

Soda("State of the Art"의 약자)는 샌프란시스코의 예술가와 작가들을 기념하는 물리적 진(zine) + 웹사이트 프로젝트 입니다.

핵심 설계 프로세스: soul.md

모든 프로젝트 회의를 녹음하고 트랜스크립트를 soul.md라는 단일 마크다운 파일에 집약했습니다. 이 파일은:

진실의 원천: 프로젝트의 모든 의사결정을 위한 포괄적 컨텍스트
에이전트를 위한 가이드: 더 많은 맥락 = 더 좋은 결과
계층 구조 가능: 필요시 design.md, manifesto.md 등 여러 파일로 확장

빠른 반복 설계 (One-Shot Design)

Pinterest 무드 보드 → Claude 이미지 입력 → 16개 웹사이트 버전 생성

이 과정을 통해:

좋아하는 이미지 수집 (Pinterest)
Claude에 시각적 방향과 콘텐츠 제공
에이전트가 다양한 레이아웃 반복작 생성
개인용 검토 페이지에서 북마크 & 정렬

일회성 접근의 장점: 많은 반복을 빠르게 생성하고, 마음에 드는 요소를 선택해 응집력 있는 최종 디자인으로 결합.

AI의 놀라운 창의성

Claude는 예상을 뛰어넘는 아이디어를 제시했습니다:

실제 진을 판매한다고 가정해 바코드와 파티 세부정보 자동 포함
샌프란시스코의 인터랙티브 지도 (마우스 이동 가능)
사용자가 도시의 마법 같은 순간을 익명으로 핀으로 표시하고 공유할 수 있는 "State of the Art Noticings" 지도

State of the Art Noticings

사람들이 샌프란시스코에서 경험한 작은 이야기를 익명으로 공유하는 인터랙티브 지도. 공유된 이야기는:

PNG 파일로 다운로드 가능
위치 좌표 및 거리 정보 포함
SNS에서 쉽게 확산되도록 설계

Startup School 2026: 이벤트 브랜딩

규모와 목표

Chase Center에서 개최될 예정인 연례 행사로, 전 세계 6,000명 이상이 참석. 주요 연사: Jen-Hsun (엔비디아), Sam Altman (OpenAI), Alexander Wang, Jeff Dean 등.

셰이더 기반 브랜딩

Paper Shaders (paper.design)를 기반으로 커스텀 셰이더 개발:

YC의 주황색을 그라데이션으로 변형
거칠기, 가장자리, 회전, 크기를 미세 조정
새로고침할 때마다 다른 변형 생성 (수동 설계 도구 제작)

연사 카드 자동 생성

문제: 12명 이상의 연사 이미지를 하나하나 Figma에서 배치하는 것은 비효율적

해결책: Claude를 위한 자동화 도구 개발

확정된 연사 이름 입력
자동으로 모든 카드 생성
텍스트 레이아웃 변형 다중 버전 시도 가능
SNS 공유용 시각 자산 일괄 생성

합격 티켓 디자인

합격 통보 시 개인화된 티켓:

사용자 이름, 출신 도시, 이벤트 정보 자동 렌더링
동일한 셰이더로 시각적 일관성 유지
SNS 공유로 자연스러운 마케팅 확산

1년 전과의 차이: 예전엔 이러한 셰이더 제작이 "넘을 수 없는 산"처럼 느껴졌지만, 이제 Claude가 paper.design 정보를 자동으로 가져와 사용하므로 "마법" 같습니다.

최종 일관성

이 셰이더와 브랜딩 요소는 Chase Center의 거대한 화면부터 티켓, 소셜 미디어까지 처음부터 끝까지 일관성 있게 적용되어, 참석자들이 합격 통보 순간부터 행사 경험까지 완벽한 여정을 경험합니다.

결론

AI 도구의 등장은 디자인 작업의 기본 패러다임을 바꿨습니다. 더 이상 마우스와 타이핑에 얽매이지 않고, 명확한 컨텍스트(soul.md)와 시각적 영감(무드 보드)을 제공하면 에이전트가 창의적인 아이디어로 놀라움을 줄 수 있습니다. 앞으로 디자이너의 진정한 병목은 창의력과 상상력 이 되며, 이제 누구든 작은 세부사항을 완벽하게 조정하고 수정 가능한 소프트웨어를 빠르게 구축할 수 있는 시대입니다.

Original source: New Ways To Design With AI Tools

powered by osmu.app

(Ycombinator) AI 도구로 디자인하기: 최신 워크플로우 가이드