본문으로 건너뛰기

코스 카탈로그

멋지게 만들기: AI 빌더를 위한 디자인

페이지가 디자인된 것처럼 보이게 하는 요소를 알아보는 눈을 기르고, 에이전트가 그대로 만들도록 브리프를 써요.

에이전트는 몇 분 만에 작동하는 페이지를 만들지만, 그 페이지는 다른 생성된 페이지와 똑같아 보여요. 보라색 그라데이션, 가운데 정렬된 히어로, 이모지가 달린 카드 여섯 장이요. 이 코스는 직접 드래그하고 조정해 보는 라이브 예제로 페이지를 디자인된 것처럼 보이게 하는 요소(위계, 간격, 글자, 색)를 알아보는 법을 가르쳐요. 그다음 디자이너처럼 브리프하는 법을 배워요. 형용사 대신 메모를 붙인 레퍼런스, 짐작 대신 디자인 토큰, 그리고 문제 하나를 정확히 가리키는 스크린샷이에요. 접근성, 모션, 작은 화면, 빈 상태와 오류 상태를 점검하는 크리틱을 해 보고, 마지막으로 에이전트가 매 세션 읽는 디자인 시스템을 완성해요. 토큰 파일, 컴포넌트 규칙, 짧은 DESIGN.md예요. 디자인이나 코딩 경험은 필요 없어요.

무료 레슨으로 시작하기모든 요금제 비교하기

커리큘럼

  1. 섹션 1

    디자이너처럼 보기

    페이지를 생성된 것이 아니라 디자인된 것처럼 보이게 하는 네 가지를 배워요. 분명한 첫 시선, 의도한 간격, 짧은 타입 스케일, 그리고 저마다 역할이 있는 색이에요.

    1. 하나를 먼저
    2. 여백도 신호다
    3. 짧은 타입 스케일
    4. 역할이 있는 색

  2. 섹션 2

    에이전트에게 비주얼 브리프하기

    취향을 에이전트가 따를 수 있는 지시로 바꿔요. 생성된 페이지의 기본값에 이름을 붙이고, 형용사 대신 레퍼런스로 브리프하고, 디자인 토큰을 넘겨주고, 문제 하나를 정확히 가리키는 스크린샷을 보내요.

    1. AI 티 알아보기
    2. 형용사 대신 레퍼런스
    3. 숫자를 넘겨주세요
    4. 정확히 가리키는 스크린샷

  3. 섹션 3

    크리틱 루프와 다듬기

    짧은 크리틱 루프로 페이지를 다듬어요. 대비, 터치 영역, 포커스를 점검하고, 역할 없는 모션을 덜어 내고, 휴대폰부터 만들고, 에이전트가 빼먹는 빈 화면, 로딩 화면, 오류 화면을 요청해요.

    1. 접근성 점검
    2. 제 몫을 하는 모션
    3. 휴대폰 먼저
    4. 아무도 요청하지 않는 화면

  4. 섹션 4

    에이전트가 따르는 디자인 시스템

    내 결정을 모든 세션이 찾을 수 있는 곳에 적어 두세요. 두 층으로 된 토큰 파일, 확인할 수 있는 컴포넌트 규칙, 에이전트의 지시 파일에 연결한 짧은 DESIGN.md, 그리고 흐트러짐을 막는 습관이에요.

    1. 토큰 파일 하나, 두 개의 층
    2. 컴포넌트별 규칙
    3. 매 세션 읽는 브리프
    4. 시스템을 일관되게 지키기

학습 경로

AI로 만들기

에이전트를 직접 이끌어 만든 작은 제품을 출시합니다. 작성된 명세서, 도구가 이해하는 프로젝트, 검토와 테스트를 거친 변경, 그리고 직접 배포하고 설명할 수 있는 랜딩 페이지를 갖추게 됩니다.

코스 9개로 구성된 과정

아이디어를 현실로. 60초면 시작해요.

첫 가입 회원은 모든 요금제 7일 무료 체험 · 언제든 해지 가능

시작하기

코스 목록으로 돌아가기