원칙에 어긋나면 만들기 전에 막힙니다
기준을 먼저 써두면, 나중의 나쁜 결정으로부터 당신을 지켜줍니다.
6주 동안 당신 프로젝트 파일에 원칙, 토큰, 컴포넌트, 핵심 화면, 개발자에게 넘길 파일을 직접 쌓습니다. 손으로 3주 걸리는 분량을 사흘 안에 끝내는 순서를 몸에 익힙니다. 배우는 건 프롬프트가 아니라, 작업을 어떤 순서로 쪼개 AI에게 넘기느냐입니다.
이 순서로 만든 실제 화면입니다. 토큰과 컴포넌트로 조립했기 때문에 화면이 늘어도 톤이 흔들리지 않습니다. 6주 뒤 당신 프로젝트도 이 수준으로 완성됩니다.
한 프로젝트에서 이 순서로 사흘 만에 나온 산출물입니다. 6주 뒤 당신 파일에는 같은 구조가 당신 프로젝트의 이름으로 들어 있습니다.
수업 후 가져가는 것
수업 노트가 아니라 쓸 수 있는 디자인 시스템이 남습니다. 매주 한 단계씩, 연습용 파일이 아니라 당신이 원래 만들던 프로젝트에 바로 쌓습니다. 6주 뒤에는 아래 여섯 가지가 당신 파일 안에 있습니다.
당신 프로젝트의 원칙과 안티패턴 문서. AI가 뭘 내놓든 쓸지 말지 즉시 가릴 수 있게 됩니다. 수업이 끝난 뒤에도 이 문서로 판단합니다.
색·타이포·간격이 변수로 묶인 토큰 세트. AI가 매번 새 값을 지어내지 못하게 잠급니다.
변형까지 갖춘 컴포넌트 세트. "여기엔 쓰지 마라"까지 문서 카드로 남습니다.
토큰과 컴포넌트로만 조립한 핵심 화면. 화면이 늘어도 톤이 어긋나지 않습니다.
흐름 전체를 훑어 찾아낸 빠진 화면과 상태 화면. 개발 들어간 다음에 발견하면 늦는 것들입니다.
Figma 값과 코드 값이 한 군데서 나오는 토큰 파일. "이 색 뭐예요?"라는 질문이 사라지고, 핸드오프가 파일 하나로 끝납니다.
얼마나 빨라지나
같은 결과물을 손으로 만들 때와 이 순서로 만들 때, 당신의 시간이 이만큼 달라집니다. 디자인 시스템, 화면, 스토어 이미지, 로고까지 전부 포함한 시간입니다.
손으로 했을 때의 시간은 주 40시간 기준 자체 산정입니다.
빈 파일에서
기존 시스템이 없어도 됩니다. 빈 파일에서 시작합니다. 마스코트, 아이콘, 캘린더 셀처럼 보통 외주로 넘기거나 포기하던 것까지 코드 지식도, 일러스트 실력도 없이 같은 순서 안에서 만들어집니다.
진행 방식
강의를 듣고 끝나는 수업이 아닙니다. 매주 당신 프로젝트에 손을 대고, 매주 파일에 결과가 남습니다.
연습용 파일이 아니라 지금 만들고 있는 프로젝트로 진행합니다. 수업이 끝날 때 남는 것도 그 파일입니다.
6주 동안 7단계를 순서대로 밟습니다. 조건을 넘어야 다음 주로 넘어가고, 걸리면 그 자리에서 같이 고칩니다.
그리는 일은 AI에게 넘기고, 당신은 방향을 정하는 문장과 쓸지 말지 가르는 기준을 연습합니다.
특정 AI 도구에 묶이지 않습니다. 배우는 건 순서와 판단 기준이라 도구가 바뀌어도 그대로 씁니다.
거르는 기준
AI가 처음 내놓는 건 대부분 버려야 합니다. 문제는 무엇을 버릴지 아는 것입니다. 수업에서는 걸러내는 조건을 먼저 세우고, AI의 결과물이 그 조건에 걸리면 자동으로 되돌립니다. 6주 뒤 당신 파일에 남는 세 가지 기준입니다.
두 번째 프로젝트
Haruroom은 감정을 적는 다이어리였습니다. 이번엔 디자이너가 쓰는 도구입니다. 레퍼런스에서 디자인 문법을 꺼내 Figma 포트폴리오 파일을 만들어 주는 앱, STUDIO입니다. 개인 프로젝트이고 아직 출시 전입니다. 순서는 하나도 바꾸지 않았고, 파일에는 같은 모양의 산출물이 남았습니다.
Haruroom 때와 같은 종류의 산출물이 파일에 남았습니다. 수용 기준 넷은 해당 화면이 아직 없어 판정을 미뤄 두었습니다.
방법
외울 프롬프트를 알려드리는 수업이 아닙니다. 7단계를 순서대로 밟고, 사이사이 통과 조건을 걸어두는 것이 전부이고, 6주 뒤에는 이 순서가 도구가 바뀌어도 쓸 수 있는 당신 것이 됩니다.
커리큘럼
위 7단계를 그대로 6주로 옮겼습니다. 매주 한 단계와 그 통과 조건이 한 세트이고, 주가 끝날 때마다 당신 파일에 산출물이 하나씩 남습니다.
도구 연결, 파일 권한, 계정 문제. 첫날 막히는 곳이 대부분 여기입니다.
끝나면당신 파일에 도구가 붙어 있음모은 이미지를 원칙과 안티패턴으로 옮깁니다. 나머지 5주가 여기에 기댑니다.
끝나면원칙 문서 + 안티패턴 목록색과 타이포, 간격을 변수로 묶고 대비를 통과한 값만 올립니다.
끝나면토큰 세트 + 검수 리포트변형을 체계로 만들고 "여기엔 쓰지 마라"까지 남깁니다.
끝나면컴포넌트 세트 + 문서 카드새로 그리지 않고 조립만 하는 규율, 그리고 그걸 숫자로 검사하는 법.
끝나면핵심 화면 + 감사 수치빠진 화면을 찾아 메우고, 배선한 뒤 토큰을 코드로 넘깁니다.
끝나면상태 화면 + 개발자에게 넘길 토큰누구를 위한 수업인가
시작 전에 거르는 편이 서로에게 낫습니다.
자주 받는 질문
됩니다. 도구 설치와 연결이 1주차입니다. 외울 프롬프트는 없습니다. 필요한 건 나온 걸 보고 쓸지 말지 가르는 눈뿐입니다.
이 수업은 빈 파일에서 시스템을 세우는 순서를 다룹니다. 이미 있는 시스템 위에 얹는 순서는 다루지 않으니, 새 프로젝트나 리디자인으로 참여해 주세요.
됩니다. 코드 지식 없이 진행하도록 설계돼 있습니다. 6주차 핸드오프도 파일을 내보내는 수준입니다.
특정 도구에 묶이지 않습니다. 배우는 건 순서와 판단 기준이라서 도구가 바뀌어도 그대로 씁니다. 1주차에 지금 제일 잘 맞는 걸로 같이 세팅합니다.
대부분 수업 시간 안에 만듭니다. AI가 돌아가는 시간은 얼마 안 됩니다. 방향을 정하는 데 시간이 들고, 그 시간을 줄이는 게 수업의 몫입니다.
전부 수강생 것입니다. 사례로 공개하고 싶을 때만 따로 동의를 구합니다.
시작하기
6주 뒤에는 디자인 시스템과, 그것을 만드는 순서가 당신 것이 됩니다. 다음 프로젝트부터는 혼자서도 같은 속도로 갑니다.