이 글은 2026년 11월 6일에 썼습니다.
AI 도구는 하루가 다르게 바뀝니다. 하지만 화면 구성 요소의 이름은 쉽게 변하지 않습니다. header, form, dialog 같은 단어들은 오랜 세월 동안 언제나 같은 형태를 가리켜 왔습니다. 버튼에 적힌 문구나 메뉴의 위치는 달라질 수 있어도, 이 명칭들은 그대로 남습니다. 이 글은 특정 서비스의 버튼 위치를 찾아가는 안내서가 아니라, AI에게 원하는 화면 구조를 정확히 요청하는 방법을 다룹니다.
우리는 보통 마음속으로 원하는 화면을 이미 그리고 있습니다. 다만 정확한 이름을 알지 못해서 제스처나 동작으로 설명하곤 합니다. “옆에서 슥 나오는 창”, “크기가 제각각인 상자들”, “갑자기 튀어나와서 조작해야 하는 레이어”처럼 말입니다. AI 모델은 이런 모호한 설명으로도 화면을 만들어 주기는 합니다. 하지만 그만큼 추측도 크게 작용합니다. 다음번에 똑같이 “옆에서 나오는 것”을 만들어 달라고 하면 메뉴가 나올 수도 있고, 보조 패널이나 전혀 다른 새 페이지가 만들어질 수도 있습니다. 문장은 하나인데 서로 다른 세 가지 화면이 나오는 셈입니다.
이러한 차이는 개인 취향의 문제도 아니고, 특정 언어의 표현이 늦어서 생기는 일도 아닙니다. AI 모델이 디자인 시스템의 주요 개념을 오랫동안 영어로 학습해 왔기 때문에 나타나는 현상입니다. 한국어에 널리 쓰이는 안정적인 표현이 있다면 그 말을 쓰되, 처음 등장할 때 영어 명칭을 괄호 안에 함께 적어주십시오. 그러면 읽는 사람과 AI 모델이 같은 대상을 떠올릴 수 있습니다. 딱 맞는 번역어가 없다면 억지로 어색한 말을 만들어낼 필요는 없습니다. 형태와 역할을 한 줄로 설명하고 영어 명사를 그대로 남겨두시면 됩니다. AI에게 실제로 복사해서 붙여넣는 핵심 단어는 결국 영어이기 때문입니다.
이것은 지극히 실용적인 접근법입니다. 자카르타 병원의 접수처 직원이나 울란바토르의 선생님, 튀니스의 가게 주인이 전문 지식이 부족해서 명칭을 쓰지 못하는 것이 아닙니다. 단지 AI 모델이 이미 부품으로 인지하고 있는 짧은 영어 명사를 모르고 있을 뿐입니다. 프롬프트에 그 명사가 들어가는 순간, 모델은 엉뚱한 요소를 지어내는 대신 기존 부품을 제대로 배치하기 시작합니다. 그리고 그 화면이 무슨 일을 해야 하는지 맥락을 설명하는 일은 본래의 언어로 해주시면 됩니다.
AI 모델이 짐작으로 완성하지 않게 만드는 프롬프트
AI에게 전달할 프롬프트는 네 가지 요소를 갖추면 명확해집니다. 내 언어로 적은 핵심 의미, 정확한 영어 이름, 일어날 동작, 그리고 이 동작이 끝나는 닫기 조건입니다.
막연한 요청:
When I press settings, something like a menu should come in from the side.
명확한 요청:
When I press Settings, open a drawer from the start edge. Close it with Escape, or with a tap outside the panel.
(drawer는 화면 가장자리에서 미끄러져 들어오며, 기존 페이지는 그 자리에 유지되는 패널입니다.)
영어로 작성한 프롬프트 아래에 자신의 언어로 의미를 덧붙여 설명하셔도 좋습니다. 다만 AI에 직접 복사해서 붙여넣는 문장은 영어로 유지하시는 것이 좋습니다. 모델이 이미 알고 있는 부품과 가장 정확하게 매칭되기 때문입니다. 이때 “오른쪽(right)”보다 “시작 가장자리(start edge)”라는 표현을 쓰는 편이 훨씬 유용합니다. 아랍어처럼 오른쪽에서 왼쪽으로 읽는 언어에서는 시작 가장자리가 바로 오른쪽입니다. 항상 화면 오른쪽에서 열리도록 고정해 버리면, 오른쪽에서 글을 읽는 사용자에게는 거꾸로 느껴질 수 있습니다. start edge라고 지정해 두면 언어의 읽기 방향에 따라 자연스럽게 위치가 결정됩니다.
사람들이 프롬프트에서 가장 쉽게 놓치면서도, 동시에 수많은 시행착오 시간을 아껴주는 부분이 바로 ‘종료 조건’입니다. 단순히 “drawer를 열어줘”라고만 요청하면, 화면에서 어떻게 사라져야 하는지 전달되지 않습니다. 그러면 AI 모델은 닫기 아이콘을 임의로 넣거나, 스와이프 방식을 쓰거나, 혹은 아예 닫는 방법을 빼먹기도 합니다. 그렇게 되면 모바일 화면에서 사용자는 창을 닫지 못해 갇히게 됩니다. 따라서 패널이 등장하는 조건과 함께 나가는 출구도 같은 문장에 지정해 주어야 합니다. Escape 키 누르기, 패널 바깥 영역 터치하기, 명확한 닫기 버튼 제공하기 같은 조건 말입니다. 이 중 하나만 있어도 충분하지만, 세 가지를 모두 챙겨주면 더욱 친절한 화면이 됩니다.
이 네 가지 요소는 앞으로 이 시리즈에서 살펴볼 거의 모든 화면 형태에 그대로 적용됩니다. dialog에는 사용자의 작업을 잠시 멈추는 명확한 이유와 원래 화면으로 돌아가는 경로가 필요합니다. 스스로 나타났다 사라지는 짧은 알림인 toast에는 표시될 시간, 그리고 오류 메시지를 toast에만 남기지 않는다는 규칙이 함께해야 합니다. card는 단순히 “카드 모양처럼 보이게 해줘”가 아니라 그 안에 정확히 어떤 내용이 들어가는지 명시해야 합니다. 조건이 빠진 이름은 알맹이 없는 겉치레일 뿐이고, 이름이 빠진 조건은 처음에 겪었던 막연한 프롬프트로 돌아갈 뿐입니다.
처음 시작할 때 굳이 신경 쓰지 않아도 되는 것들
화면 디자인의 트렌드는 무수히 많습니다. 뒤 배경이 흐릿하게 비치는 유리 효과, 칸마다 크기가 제각각인 격자, 옆으로 슬라이드되는 이미지, 서로 다른 속도로 움직이는 배경 등이 대표적입니다. 이런 장식 요소들의 영어 이름은 나중에 AI 모델이 제안할 때 알아볼 수 있도록 짧게 다룰 예정입니다. 하지만 첫 페이지를 완성하는 단계에서는 전혀 필요하지 않습니다. header의 이름조차 대지 못하면서 40가지 장식 용어부터 외우려고 들면, 바쁘기만 하고 막상 다음 화면을 AI에게 요청하지 못하게 됩니다.
화면을 구상할 때는 장식보다 ‘기능적 결정’을 먼저 내리는 것이 중요합니다. 이 순간 사용자를 잠시 멈추게 할 것인가(stop), 기존 화면을 유지하면서 공간을 나눠 쓸 것인가(share), 아니면 단지 소식만 알릴 것인가(inform)? 이 셋은 완전히 서로 다른 형태입니다. 일상 언어에서는 이 모든 것을 뭉뚱그려 “팝업”이라고 불러버립니다. 하지만 UI 디자인 시스템에서는 결코 하나로 뭉뚱그리지 않습니다. 우리가 다른 언어로 생각하고 글을 쓸 때에도 영어 UI 명칭을 알아둘 가치가 있는 이유가 바로 여기에 있습니다. 내 사고방식 자체를 영어로 바꾸자는 뜻이 아닙니다. 요리사가 주방에서 자주 쓰는 조리도구 명칭을 빌려 쓰듯, 이미 통용되는 정확한 명사 하나를 빌려오는 것입니다.
이번 주에 실제 프롬프트에서 사용한 명사만 짧게 정리해 보세요. 5개 정도면 충분합니다. 만약 header, card, form을 요청했다면 이 세 가지가 이번 주의 학습 내용입니다. 쓰지도 않을 용어를 무작정 찾아보는 것은 용어집을 지루한 숙제로 만들어버립니다. 명칭을 배우는 진짜 목적은, 내가 이미 전달하려던 문장에서 빠져 있던 핵심 단어를 채워 넣는 데 있습니다.
실무 현장에서 실제로 일어나는 변화
화면 요소의 이름을 정확히 대면 AI 모델과의 소모적인 실랑이가 줄어듭니다. 언어가 다른 동료와 일할 때도 불필요한 논쟁을 덜어줍니다. 두 사람이 똑같이 “drawer”를 가리키면, 개입의 성격에 대해 동일한 이해를 갖게 됩니다. 기존 작업 화면은 그대로 보이고, 보조 패널은 일시적이며, Escape 키를 누르면 닫힌다는 점을 서로 인지하는 것이지요. 명칭이 없으면 개인 취향을 두고 싸우게 되지만, 명칭이 있으면 ‘이 순간 사용자의 작업을 정말 멈추게 해야 하는가’라는 핵심적인 판단을 두고 토론할 수 있게 됩니다.
그리고 실무에서 진짜 가치 있는 토론은 바로 후자입니다. 이름은 단순한 장식이 아니라 사용자 주의(attention)에 대한 의사결정입니다. 화면 한가운데 나타나는 dialog는 기존 작업을 완전히 멈춥니다. drawer는 화면 공간을 나눕니다. 화면 아래쪽에 뜨는 짧은 알림(toast)은 어떤 작업도 방해하지 않습니다. AI에게 소프트웨어 제작을 요청하기 시작한 사람들은 첫 몇 주 동안 예쁜 디자인을 만들어 달라고 요구하는 데 많은 시간을 씁니다. 하지만 실제 프로젝트가 진전되는 시점은, 어떤 형태가 사용자를 멈추게 하고 어떤 형태가 멈추지 않는지 그 차이를 이해하고 적용하기 시작할 때입니다.
이러한 핵심 어휘가 특정 언어 안에만 갇혀 있으면 사회적 비용이 발생합니다. 가이드나 튜토리얼은 AI 모델이 주로 학습된 지역에 가장 먼저 공급됩니다. 그 외 지역 사람들에게는 그저 “원하는 것을 자유롭게 설명하세요”라고 안내하곤 합니다. 다정하게 들릴지 몰라도, 그 결과는 대부분 AI의 무모한 추측으로 이어집니다. 자신이 원하는 바를 설명하는 방식 자체는 맞습니다. 다만 표준 부품 이름을 더해 설명해야 AI 모델과 소통할 때 엉뚱한 요소로 오해받지 않습니다. 학교나 병원, 동네 가게에서도 베트남어, 힌디어, 한국어로 화면의 기획 의도를 충분히 정리한 뒤, AI가 오해하지 않도록 핵심 영어 문장 하나만 덧붙여 붙여넣으면 됩니다. 기획의 깊은 생각은 우리 언어로 남고, 부품 이름만 공유되는 셈입니다.
첫 페이지를 만들기 전에 기다란 용어집을 전부 외울 필요는 없습니다. 다음에 구현할 화면 형태, 그 요소의 정확한 영어 이름, 그리고 닫히는 종료 조건만 알면 충분합니다. 이번 시리즈의 나머지 내용도 바로 그 과정을 다룹니다. 페이지의 뼈대를 잡는 법, 사용자에게 입력을 요청하는 법, 처리 결과를 알려주는 법, 그리고 꼭 필요한 만큼의 자연스러운 움직임을 주는 법입니다. 화면 구성 요소의 이름을 대할 수 있는 사람은, 동네 디자인 학원에서 사전을 출간해 주기를 기다리지 않고도 어느 언어로든 AI에게 명확히 작업을 지시할 수 있습니다.