오즈코딩스쿨 디자인 캠프 - 피그마 마지막 수업 — 도구를 정리하고, AI가 그리는 화면을 보다 (day21)

드디어 피그마 마지막 날이다. 6월 중순, 15일 차쯤 시작했으니 2주 남짓을 이 도구와 붙어 지냈다. 처음엔 버튼 하나 누르기도 겁났는데, 이제는 취업하고 나서도 친구처럼 같이 갈 소프트웨어라는 말이 실감 난다. 오늘은 일종의 마무리 날이었다. 매일 쓰게 될 작은 기능들을 다시 정리하고, AI가 화면을 통째로 그려주는 최신 기능들(피그마 메이크, 피그마 사이트)을 구경하고, 마지막으로 클론의 핵심을 다졌다.

그런데 하루 종일 한 가지 질문이 맴돌았다. AI가 화면을 통째로 뽑아주는데, 그럼 나한테 남는 건 뭐지.

매일 쓰게 될 작은 기능들

엄청난 기능은 아니지만, 앞으로 손에 붙여두면 좋은 것들을 다시 짚었다.

기능무엇을 하나언제 쓰나

퀵 액션 (Cmd+K)	명령·플러그인을 검색해 바로 실행	패널·단축키 안 찾고 바로 실행할 때
셀렉션 컬러	선택 영역에 쓰인 색을 모아 보여줌	색을 일괄 변경하거나 토큰 지정할 때
개발자 모드 (Shift+D)	수치·패딩·코드 값 확인	개발 핸드오프, 토큰이 코드로 잘 넘어가는지 볼 때
버전 히스토리	자동 저장된 시점으로 복구	실수로 지웠거나 되돌리고 싶을 때
드로우 모드	벡터·자유선 드로잉	일러스트성 작업 (메인 작업엔 드묾)
익스포트	프레임·섹션을 파일로 내보내기	포트폴리오 PDF, 블로그용 PNG

셀렉션 컬러는 다크/라이트 모드 때 토큰을 지정하면서 이미 톡톡히 쓴 기능이다. 프레임을 고르면 거기 쓰인 색이 개수와 함께 뜨고, 한 번에 바꾸면 그 색이 들어간 모든 요소가 같이 바뀐다. 익스포트는 한 가지 주의가 있는데, 피그마가 디지털 기기 해상도 기준이라 인쇄물은 1배수로 내보내면 해상도가 떨어진다. 프린트할 거면 2~3배수로 내보내야 한다. 그리고 디자인 모드에서 쓰던 게 갑자기 안 보이면, 십중팔구 개발자 모드나 드로우 모드에 들어가 있는 거였다. 초반에 자주 겪는 함정이라고 했다.

캘린더 하나로 복습한 컴포넌트

오늘의 큰 실습은 캘린더(날짜 선택기) 하나를 만드는 거였다. 참고 자료로 KRDS(한국 정부 디자인 시스템)를 봤는데, 완성된 컴포넌트만이 아니라 아토믹 단계까지 보여줘서 "이걸 어떤 순서로 쌓아 올리면 되겠구나"가 잘 보였다.

만드는 흐름 자체는 그동안 배운 것의 총정리였다. 먼저 셀 크기를 계산으로 잡고(가로에서 좌우 패딩을 빼고 7로 나누면 한 칸 크기가 나온다), 요일 텍스트를 컴포넌트로 만든다. 그다음이 핵심인데, 날짜 하나가 가질 수 있는 상태를 다 모델링한다. 지난 날짜(선택 불가), 선택된 날짜, 기간(범위) 날짜, 후보(호버) 날짜, 그냥 날짜. 이 상태들을 컴포넌트 세트로 묶고, 텍스트는 프로퍼티로 노출하고, 빈 칸은 불리언으로 숨긴다. 선택 구간을 칠해주는 막대는 오토 레이아웃 안에서 자유배치로 뒤에 깔아준다.

상태를 미리 다 만들어 두는 게 일의 전부였다. 세트가 완성되고 나면, 한 달치 달력을 채우는 건 프로퍼티만 바꿔 끼우는 일이 됐다. 컴포넌트 세트, 프로퍼티, 불리언, 오토 레이아웃, 자유배치가 캘린더 하나에 다 들어와 있었다.

자연어로 화면을 뽑다 — 피그마 메이크

오늘 가장 충격이었던 건 피그마 메이크였다. 자연어로 화면을 만들어주는 AI 기능인데, "여행 앱 만들어줘"라고 입력하면 잠시 뒤에 화면들을 알아서 뽑아준다. 바이브 코딩에 가까운 경험이었다.

당연히 프롬프트에 따라 결과 품질이 갈린다. 그래서 TCEBC라는 프롬프트 틀을 적용해봤다.

단계무엇을 담나

Task	무엇을 만드는가
Context	누구를 위해, 왜 만드는가
Element	반드시 포함할 요소·기능
Behavior	어떻게 작동하고 배치되는가
Constraint	지켜야 할 규칙 (그리드·색상·헥스 등)

"은행 앱처럼 돈 관리 서비스 만들어줘"는 어디서 본 듯한 결과가 나오는데, 같은 걸 TCEBC로 풀면(타깃은 사회 초년생, 상단엔 자산 요약 카드와 잔액 숨기기, 하단엔 탭 내비게이션, 8픽셀 그리드, 토스·카카오뱅크 스타일, 헥스 색상까지) 훨씬 의도에 가까워졌다. 기업별 디자인 시스템을 담은 design.md 파일을 첨부하면 덜 'AI틱한' 결과가 나오고, 프롬프트 자체를 GPT한테 짜달라고 해도 된다.

그리고 'AI틱한 UI'를 알아보는 눈도 생겼다. 이모지를 잔뜩 쓰고, 모든 걸 박스 안에 넣고, 한쪽에 라인을 두는 그런 인상들. 이걸 식별하는 것 자체가 안목이라고 했다.

오늘의 질문이 여기서 정리됐다.

AI가 디자인을 다 하고 우리는 수정만 하면 되는 걸까요? 그래도 우리는 공감도 할 수 있고, 생각도 할 수 있잖아요.

강사님은 AI가 초안은 빠르게 뽑아주지만 아직 마무리까지 맡길 단계는 아니라고 했다. 결국 사람이 안목으로 다듬어야 한다는 것. 간호하면서도 자동화 이야기는 늘 있었다. 도구가 기록을 돕고 수치를 띄워줘도, 환자가 말하지 않은 걸 읽고 판단하는 몫은 사람에게 남았다. 마지막 피그마 수업에서 같은 말을 디자인의 언어로 다시 들은 셈이다.

디자이너가 직접 퍼블리싱까지 — 피그마 사이트

또 하나 신기했던 건 피그마 사이트(베타)였다. 지금까지 반응형은 모바일 한 벌, 데스크톱 한 벌을 따로 만들어 퍼블리셔에게 넘기는 식이었는데, 피그마 사이트는 그걸 디자이너가 직접 한다.

브레이크포인트(데스크톱·태블릿·모바일)를 깔고, 미리 만들어진 컴포넌트(내비게이션, 히어로, 카드, 캐러셀 등)를 끌어다 얹으면 곧바로 세 개의 반응형 화면이 된다. 그리고 퍼블리싱 버튼을 누르면 실제 접속 가능한 웹페이지가 나온다. 브라우저 창을 줄였다 늘이면 콘텐츠가 그 크기에 반응한다. 호버 효과 같은 CSS 인터랙션도 코드를 붙여넣거나 그냥 대화로 요청하면 입혀준다. 거의 프레이머 같았고, 피그마가 UI 시장을 통째로 먹으려는구나 싶었다.

다만 강사님은 이 사이트와 CSS 부분을 '플러스'라고 분명히 못 박았다. 머리 아프면 잊어버려도 된다고, 핵심은 따로 있다고 했다.

결국 핵심은 클론 — 원티드 따라 만들기

화려한 걸 잔뜩 보여준 뒤, 강사님은 결국 여기로 돌아왔다.

가장 중요한 건 오토 레이아웃과 콘스트레인츠, 그리고 클론하는 거예요.

원티드를 클론하면서 두 덩어리를 같이 잡았다. 하나는 반응형 GNB(전역 내비게이션 바)다. 실제 화면이 줄어들 때 가운데 카테고리가 먼저 사라지는 걸 보고, 그에 맞춰 요소들을 묶고 오토 레이아웃을 건 다음, 데스크톱·태블릿·모바일 버전을 컴포넌트 세트로 만든다. 여기서 핵심은 각 버전의 이름을 잘 붙이는 것이었다. 이름을 안 붙이면 반응형 교체가 엉켜버린다. 그리고 안쪽 콘텐츠는 Fill과 min/max·콘스트레인츠로 잡아서, 바깥 박스는 화면 끝까지 늘어나되 내용은 정해진 범위를 지키게 했다.

다른 하나는 **카드(썸네일 + 슬롯)**다. 첫 주에 배운 슬롯을 다시 꺼내, 이미지가 들어갈 자리를 슬롯으로 비워두고, 밑에 어두운 그라데이션을 깔고(Fill에 그라데이션을 넣고 회전시켜 아래는 진하게 위는 투명하게), 재생 버튼은 불리언으로 보이고 숨겼다. 그리고 영역 밖으로 나가는 부분은 클립 콘텐츠로 잘라줬다. 변하지 않는 규칙 하나, 원본 컴포넌트는 절대 건드리지 말고 인스턴스로 작업할 것.

사이트에 GNB를 얹는 것도, CSS도 다 플러스였다. 컴포넌트가 너무 버겁다면 그것도 덜어내고, 그냥 오토 레이아웃과 콘스트레인츠로 PC와 모바일을 클론하는 것 — 그게 이 파트의 뼈대였다.

용어와 단축키 정리

마지막 날이라 그동안 쏟아진 업계 용어와 디자인 용어, 단축키를 한자리에 모아둔다.

업계·웹 용어

용어뜻

반응형 (Responsive)	화면 크기에 따라 레이아웃이 바뀌는 것
브레이크포인트 (Breakpoint)	반응형이 전환되는 기준 해상도 (모바일 375 / 태블릿 768~800 / 데스크톱 1280 등)
퍼블리싱 (Publishing)	디자인을 실제 접속 가능한 웹으로 배포
GNB (Global Navigation Bar)	사이트 전역 내비게이션 바
바이브 코딩 (Vibe Coding)	자연어로 결과물을 만들어내는 작업 방식
AS-IS / TO-BE	적용 전 / 적용 후 상태 비교
핸드오프 (design.md)	디자인을 개발에 넘길 때의 사양 파일
클론 (Clone)	기존 서비스 화면을 따라 만들며 연습하는 것

디자인·피그마 용어

용어뜻

컴포넌트 세트	한 컴포넌트의 여러 변형(베리언트)을 묶은 것
프로퍼티	컴포넌트에서 바꿀 수 있게 노출한 속성 (텍스트·불리언 등)
불리언 (Boolean)	요소를 보이기/숨기기로 토글하는 속성
슬롯 (Slot)	컴포넌트 안에 다른 콘텐츠를 끼워 넣도록 비워둔 영역
인스턴스 / 스왑	컴포넌트의 복제본 / 그 내용물을 교체하는 것
콘스트레인츠	부모 크기가 바뀔 때 요소가 따르는 규칙
자유배치 (Absolute Position)	오토 레이아웃 안에서 위치를 자유롭게 고정
Fill / Hug	부모에 꽉 채우기 / 내용에 맞게 줄이기
클립 콘텐츠	영역 밖으로 나간 부분을 잘라서 보이게

단축키

단축키기능

Cmd+K	퀵 액션 (명령·플러그인 검색)
Shift+D	개발자 모드 전환
Cmd+[	레이어 뒤로 보내기
화살표 / Shift+화살표	요소 정밀 이동 / 더 크게 이동