오즈코딩스쿨 디자인 캠프 - 멈춰 있던 디자인이 움직이기 시작했다 — 아이디 카드와 첫 프로토타입 (day20)

오늘은 모처럼 가볍고 신나는 날이었다. 어제 다크 모드로 진을 뺀 뒤라 더 그랬는지도 모른다. 처음부터 끝까지 아이디 카드 하나를 만들었다. 레퍼런스를 모으고, AI로 에셋을 뽑고, 피그마에서 디자인하고, 거기에 움직임까지 더했다. 정적인 화면에 처음으로 모션을 입혀보는, 프로토타입 맛보기였다. 마지막엔 구글 시트로 텍스트를 한 번에 채워 넣는 깔끔한 트릭도 배웠다.

병원에서 몇 년을 목에 ID 카드를 걸고 다녔는데, 오늘은 그 카드를 내가 디자인하고 있었다. 사소한데 묘하게 기분이 좋았다. 게다가 내일이면 피그마 수업의 마지막 날이라, 오늘 하루가 그동안 배운 걸 죄다 끌어모으는 시간처럼 느껴졌다.

만들기 전에, 레퍼런스부터

강사님이 던진 질문. AI로 에셋을 만들 때 가장 중요한 게 뭘까. 답은 레퍼런스였다. 프롬프트를 잘 쓰는 것도 중요하지만, 그 전에 방향을 정하고 좋은 레퍼런스를 찾는 게 먼저라는 것.

프롬프트를 작성하기 전에, 레퍼런스를 잘 찾는 게 중요해요.

그래서 초반 AI 파트에서 봤던 2026년 디자인 트렌드를 다시 꺼냈다. day6에서 다뤘던 그 흐름들이다.

트렌드결표현 방식

Extra Celestial	지구 너머·우주적인 SF 감성	홀로그램, 오벌, 불확실한 시대의 열린 미래
Cool Blue	차갑고 절제된 세련미	감정을 덜 드러낸 한 발 물러난 거리감
Gummy	촉각을 자극하는 고무·젤 질감	시각 중심에서 촉각 경험으로
Pen pals	느린 아날로그 소통의 회귀	손글씨, 오려붙인 듯한 정성

중요한 건 예쁜 이미지를 모으는 게 아니었다. 이 트렌드가 어떤 키워드와 연결되는지, 그래서 내가 구현할 때는 어떻게 풀어낼지를 같이 보는 것. 그리고 결과물 레퍼런스뿐 아니라, 구현하려는 질감이나 색감 레퍼런스도 함께 모아야 한다고 했다. 이걸 그대로 GPT에 같이 넘길 거라, 레퍼런스가 내 방향에 잘 맞을수록 결과물도 가까워지기 때문이다.

AI로 에셋 뽑기 — 레퍼런스에서 PNG까지

방향을 정하고 레퍼런스를 모았으면, 이제 에셋을 뽑는다. 흐름은 이랬다. 핀터레스트·비핸스·드리블에서 원하는 무드의 이미지를 모으고, 그걸 GPT(또는 나노 바나나)에 넘겨 원하는 그래픽을 생성하고, 배경을 지워 PNG로 받는다.

강사님이 보여준 예시가 깔끔했다. 피그마 로고 하나와 질감 레퍼런스를 같이 올린 다음, "아이콘과 질감은 변형하지 말고 각도만 틀어서 만들어줘"라고 요청하고, 다시 "뒷배경을 지우고 PNG로 줘"라고 받는다. 여기서 포인트는 무엇을 유지하고 무엇을 바꿀지를 분명하게 말하는 거였다. 그래야 의도에서 멀어지지 않는다.

아이디 카드를 디자인하다

에셋이 준비되면 카드를 디자인한다. 오늘은 컨셉을 자유롭게 잡아도 되는 날이라, 다들 제각각이었다. NASA 입사증, 등산 회원증, 좋아하는 아이돌 카드, 장난스러운 주민증, 카피바라며 고양이며 온갖 마스코트 카드까지. 강사님 말로는 컨셉이 확실할수록 결과가 잘 나온다고 했는데, 정말 그랬다.

카드는 가로 200, 세로 320 정도. 에셋을 얹고, 이름과 카테고리, 로고를 넣는다. 이때 텍스트나 레이어를 다 '살아있게'(수정 가능한 상태로) 둬야 하는데, 이게 뒤에 이어질 단계들을 위해 중요했다. 그리고 어제 배운 프로그레시브 블러를 다시 꺼냈다. 질감이 강한 배경 위에 텍스트가 묻힐 때, 밑에 블러를 한 겹 깔아주면 가독성이 살아난다.

멈춰 있던 카드에 움직임을 더하다

오늘의 하이라이트는 카드 속 마스코트를 통통 튀게 만드는, 첫 프로토타입이었다. 베리언트를 활용한 방법은 이랬다.

먼저 에셋을 프레임 안에 넣고(프레임의 필값은 빼고) 컴포넌트로 만든다. 여기서 중요한 게, 이 움직임은 컴포넌트 안이 아니라 바깥 프레임을 기준으로 잡힌다는 점이다. 그래서 에셋이 반드시 프레임 안에 들어 있어야 한다. 그런 다음 두 개를 더 복제해서, 가운데 것은 알맹이를 아래로 살짝 내리고(20~30 정도) 오퍼시티를 낮춰(40 정도) '눌렸다 튀어오르는' 인상을 준다. 이 세 개를(겉 프레임까지 함께) 선택해 컴포넌트 세트로 묶는다.

그다음은 프로토타입 탭이다. 디자인 탭에서 프로토타입 탭으로 넘어가, 프레임 1을 2로, 2를 3으로, 3을 다시 1로(반복되도록) 파란색 노드를 끌어 연결한다. 각 연결마다 트리거를 After Delay로 둔다. On Click이 아니라 After Delay여야 클릭 없이 혼자 반복된다. 액션은 Change To, 애니메이션은 Smart Animate, 이징은 Custom으로 두고 딜레이와 듀레이션은 취향껏 맞춘다. 마지막으로 Flow Starting Point를 더하고(플러스 버튼) 재생을 누르면, 정지해 있던 마스코트가 통통 움직인다.

여기서 다들(나도) 걸린 지점이 몇 개 있었다. 알맹이는 꼭 프레임 안에 있어야 하고, 인스턴스가 아니라 제대로 된 컴포넌트 세트여야 하며, 연결은 안쪽 알맹이가 아니라 바깥 프레임끼리 해야 한다. 그리고 나도 모르게 On Click으로 되어 있는 경우가 많아서, 트리거를 한 번씩 다시 확인해야 했다.

그리고 어제 배운 라이트/다크 모드까지 카드에 적용해봤다. 프로토타입은 오늘은 맛보기일 뿐, 나중에 제대로 다룬다고 했다. 그래도 멈춰 있던 그림이 처음으로 움직이는 걸 본 순간이, 오늘 가장 재밌었다.

텍스트는 시트에서 한 번에 — 구글 시트 싱크

카드를 여러 장 만들면 이름이며 직함이며 텍스트를 하나하나 바꿔야 하는데, 이걸 한 번에 처리하는 게 구글 시트 싱크 플러그인이었다.

여기서 가장 먼저 짚어야 할 오해 하나.

구글 시트가 카드를 자동으로 만들어주는 게 아니라, 피그마에 이미 만들어둔 칸에 값을 넣어주는 거예요.

그러니까 카드 열 장이 필요하면 먼저 피그마에서 카드를 열 장 복제해둬야 한다. 그다음 핵심은 레이어 이름을 시트의 열 이름과 똑같이 맞추는 것이다. 시트에 Name, Category 열이 있으면, 피그마 텍스트 레이어 이름도 #name, #category로 오타까지 정확히 맞춰야 한다. 그래야 Name 열이 이름 레이어로, Category 열이 카테고리 레이어로 들어온다.

순서는, 카드를 복제해두고 → 같은 열 이름의 구글 스프레드시트를 만들고 → 시트를 '링크가 있는 모든 사용자'로 공유해 링크를 복사하고 → 피그마에서 Cmd+K로 구글 시트 싱크를 실행해 링크를 붙여넣고 → Fetch and Sync를 누른다. 시트를 수정한 뒤에는 패널 하단의 Resync로 다시 불러오면 된다. 한 가지, 이 플러그인은 페이지별로 적용돼서, 카드가 있는 그 페이지에 설치해줘야 한다.

이름을 정확히 맞춰야 자동화가 작동한다는 게, 며칠 전 베리어블이나 토큰 네이밍에서 배운 것과 똑같았다. 결국 이름이 곧 연결선이었다.

단축키와 꿀팁 정리

오늘 나온 단축키와 작업 팁을 모아둔다.

단축키 · 기능설명

Cmd+K	플러그인 검색·실행
Option(Alt) 드래그	요소 복제 (겉 프레임까지 함께 잡아서)
더블클릭	이미지 크롭(영역 줄이기)
Create Component Set	변형들을 하나의 세트로 묶기
Prototype: After Delay + Smart Animate	클릭 없이 자동 반복되는 모션
Flow Starting Point (+)	프로토타입 재생 시작점 지정

그밖에 기억해둘 것들. 프로토타입 모션은 알맹이를 꼭 프레임 안에 넣고, 움직임은 그 바깥 프레임을 기준으로 잡힌다. 연결도 알맹이가 아니라 프레임끼리 해야 한다. 트리거는 On Click이 아니라 After Delay로 둬야 혼자 반복된다. 구글 시트 싱크는 행을 자동 생성하지 않으니, 카드를 먼저 복제하고 레이어 이름을 시트 열 이름과 오타까지 똑같이 맞춰야 한다(페이지별 설치). GPT로 에셋을 뽑을 땐 무엇을 유지하고 무엇을 바꿀지 분명히 말하고, 배경을 지워 PNG로 받는다. 컴포넌트에 각도를 줄 땐 0도 프레임 안에서 알맹이만 기울이면, 나중에 협업할 때 깔끔하다.