AI한테 화면을 만들어 달라고 할 때 머릿속엔 그림이 분명히 있다. 버튼을 누르면 숫자가 톡 튀었다가 자리 잡는 느낌. 근데 그걸 말로 옮기면 "좀 부드럽게", "살짝 통통 튀게"가 끝이다.
AI는 뭔가를 만들어 오긴 한다. 내가 생각한 그건 아니고. 다시 설명하고, 또 고치고. 요즘 AI 직원들과 블로그·도구·게임을 같이 만들면서 이게 계속 반복됐다.
그러다 알게 된 게 있다. 느낌 대신 이름을 주면 내 부탁이 훨씬 구체적으로 전달된다. 그 이름을 모아 둔 게 나노플레이데이즈 사전이다.
못 알아들은 건 AI가 아니라 내 말이었다
콘텐츠를 맡은 AI 직원 서아에게 AI한테 "그냥 느낌적인 느낌으로 설명하니까 잘 못 알아듣고", 결국 이런 게 제대로 전달돼야 AI가 잘 구현되는 것 같다고 말한 적이 있다.
AI가 둔해서 생긴 일만은 아니었다. 내가 이름을 몰랐던 거다.
"통통 튀게"만 봐도 그렇다. 화면 움직임에서 이 말은 적어도 두 가지를 가리킨다. 목표를 살짝 지나쳤다가 돌아오며 멈추는 스프링, 바닥에 부딪혀 몇 번 튕기다 멈추는 바운스. 쓰는 자리도 다르다. 스프링은 끌어다 놓은 카드가 제자리로 돌아갈 때 어울리고, 바운스는 게임 보상처럼 눈길을 끌어야 할 때 쓴다. 내가 "통통"이라고만 하면 AI는 둘 중 하나를 짐작으로 고를 수밖에 없다.
사람끼리도 똑같다. 흔히 "팝업"이라고 부르는 창 중에서 닫기 전까지 뒤 화면을 막는 건 모달, 버튼 옆에 붙어 뜨고 뒤를 막지 않는 작은 창은 팝오버다. 기획서에 "팝업"이라고 쓰면 디자이너와 개발자, AI가 각자 다른 걸 떠올린다.
이름 하나 들어가면 부탁이 이렇게 달라진다
장바구니에 담으면 아이콘의 숫자가 튀는 장면을 두 가지로 적어 보면 이렇다.
느낌으로 하면 이렇다.
장바구니 담으면 숫자가 좀 통통 튀게 해 줘.
사전의 스프링 카드에 있는 부탁 문장은 이렇다.
장바구니 담기 버튼을 누르면 장바구니 아이콘의 숫자 배지가 0.6배에서 1배로 커지는데, 스프링으로 살짝 넘쳤다(약 1.15배) 돌아오며 멈추게 해 줘. 강도와 감쇠는 0.4초 안에 멈출 정도로 하고, CSS면 linear() 곡선으로 근사해 줘. prefers-reduced-motion이면 넘치지 않고 바로 커지게 해 줘.
차이는 네 가지다. 무슨 움직임인지(스프링), 얼마나(1.15배까지 넘침), 얼마 동안(0.4초), 그리고 예외. 마지막 줄의 prefers-reduced-motion은 휴대폰에서 '동작 줄이기'를 켠 사람에게는 움직임을 빼 달라는 뜻이다. 이 네 가지가 들어가면 AI가 짐작해야 할 부분이 크게 줄어든다.
그래서 이름을 모으기 시작했다
AI랑 일하다 "이건 뭐라고 부르지?" 싶은 게 나올 때마다 참고 링크를 서아에게 넘겼다. 서아는 그걸 맞는 사전과 분류에 넣는다. 그렇게 지금 7권이 됐다.
| 사전 | 이런 걸 부를 때 | 용어 수 |
|---|---|---|
| 화면 요소 | 버튼·셀렉트·모달처럼 화면을 이루는 부품 | 26 |
| AI 화면 요소 | 생각 중 표시·스트리밍 답변·출처 표시처럼 AI 대화 화면의 부품 | 9 |
| 모션 | 이즈 아웃·스프링·공유 요소 전환처럼 화면이 움직이는 방식 | 9 |
| 제스처 | 탭·스와이프·핀치 줌처럼 손가락으로 화면을 다루는 손짓 | 9 |
| 웹 글자 효과 | 타이핑·스크램블·형광펜처럼 글자가 움직이는 효과 | 10 |
| UX 심리 효과 | 앵커링·손실 회피·기본값 효과처럼 고르는 마음을 움직이는 효과 | 9 |
| 카메라 무빙 | 팬·돌리·아크 숏처럼 영상에서 카메라를 움직이는 방법 | 15 |
화면만이 아니다. AI로 영상을 만들 때 "카메라가 빙 돌면서"라고 쓰던 걸 "아크 숏"이라고 쓰면 원하는 무빙을 정확히 짚을 수 있다. 그래서 카메라 무빙 사전의 부탁 문장에는 시작과 끝 모습, 빠르기, 영어 이름까지 같이 넣었다.
읽는 사전이 아니라 눌러 보는 사전
설명만 읽어서는 이즈 인과 이즈 아웃의 차이가 잘 안 와닿는다. 둘 다 "천천히"가 들어가니까. 그래서 카드마다 직접 해 보는 예시를 붙였다. 재생을 누르면 일정한 빠르기로 가는 공과 그 곡선으로 가는 공이 나란히 달린다. 눌러 봐야 "아, 내가 원한 게 이거구나" 하고 고를 수 있다.
카드 하나는 이렇게 읽힌다.
- 이름(영어 이름은 아래 작게)
- 한 줄 뜻
- 직접 눌러 보는 예시
- 이럴 때 쓴다는 한 줄
- 부탁 문장 복사 버튼
다르게 부르는 말과 헷갈리는 이웃 용어는 자세히를 누르면 펼쳐진다. 직접 누르지 않아도 예시가 화면에 들어오면 손가락 표시가 대신 눌러 보여 준다.
사전에 넣은 걸 우리 사이트에 바로 써 봤다
11월 1일, 서아에게 사전에 있는 모션을 우리 사이트에도 적용해 달라고 했다. "부드럽게" 같은 말 대신 사전에 있는 이름을 가리키면 됐다. 서아는 그날 블로그·도구·사전 세 곳에 네 가지를 넣었다.
- 페이지 전환: 페이지를 옮길 때 이전 화면은 빠르게 사라지고 새 화면이 살짝 올라오며 나타난다.
- 누름 반응: 버튼과 카드를 누르는 순간 살짝 눌려 들어간다.
- 스크롤 등장: 도구와 사전 카드가 화면에 들어올 때 떠오르듯 나타난다.
- 스와이프: 휴대폰에서 분류 버튼 줄은 줄바꿈 대신 옆으로 밀어 넘긴다.
'동작 줄이기'를 켠 사람에게는 페이지 전환·누름 반응·스크롤 등장의 움직임이 꺼진다. 분류 버튼 줄을 손가락으로 밀어 넘기는 건 그대로 된다.
이렇게 쓰면 된다
- 사전 첫 화면의 검색에 아는 말을 적는다. 용어마다 다르게 부르는 말을 같이 적어 둬서 "팝업", "통통 튀기" 같은 말로도 찾힌다.
- 예시를 눌러 보고 머릿속 그림과 맞는지 본다. 비슷한 게 있으면
자세히의 헷갈리는 이웃과 비교한다. - 부탁 문장 복사를 눌러 AI에게 붙여 넣는다. 문구와 숫자만 내 화면에 맞게 고치면 된다.
AI한테 같은 걸 몇 번씩 다시 설명하던 일을 줄이려고 만든 사전이다. 기획서를 쓸 때나 디자이너·개발자와 이야기할 때도 같은 말이 통한다.
사전은 계속 늘린다. 나도 일하다 이름 모를 움직임이나 화면을 만나면 링크부터 넘긴다. 느낌으로 설명하다 막혔던 경험이 있다면 사전부터 열어 보면 좋겠다.
