이 글은 2026년 11월 6일에 썼습니다.
AI 도구는 하루가 다르게 바뀝니다. 하지만 사용자를 잠시 멈추게 할지, 화면 옆에 밀어서 보여줄지, 아래에서 슬라이드로 올릴지에 대한 판단 기준은 쉽게 변하지 않습니다. dialog, drawer, bottom sheet, dropdown, tabs, accordion. 이 요소들은 사용자에게 입력을 묻거나 정보를 펼쳐 보이는 방식입니다. 제품 내부의 메뉴 형태는 달라질 수 있어도, 이 개입 방식은 그대로 남습니다. 이 글은 그저 외우는 용어 목록이 아니라, 사용자의 주의를 얼마나 개입시킬지에 대한 선택의 가이드입니다.
페이지의 section에는 항상 노출되어야 하는 사실 정보를 담습니다. 주소, 가격, 운영 시간 등이 대표적입니다. 하지만 어떤 정보는 페이지에 계속 노출되어 있으면 화면이 산만해지고, 그렇다고 아예 새 페이지로 넘겨버리면 정보를 찾기 어려워집니다. 검색 필터, 짧은 확인창, 대다수가 매번 열어보지는 않는 상세 FAQ 등이 이에 해당합니다. 일상 언어에서는 이 모든 것을 뭉뚱그려 “팝업”이라고 불러버립니다. 바로 그 모호한 단어 때문에 AI 모델이 엉뚱한 추측을 하게 됩니다. 의사결정을 세 가지 질문으로 나누어 보십시오. 사용자를 반드시 멈추게 해야 하는가? 기존 페이지가 배경에 그대로 보여도 되는가? 아니면 같은 정보 목록의 다른 조각을 보여주는 것인가?
멈추기, 공간 나누기, 뷰 전환하기
dialog(modal이라고도 부릅니다)는 화면 한가운데 나타나며 뒤쪽의 기존 페이지를 어둡게 덮습니다. 다른 작업을 진행하기 전에 반드시 사용자의 답변을 받아야 안전한 상황에서 사용합니다. 데이터 기록을 삭제할 때, 예약을 최종 확정할 때, 필수 입력 칸의 오류를 고쳐야 할 때가 여기에 해당합니다. 긴 글을 보여주거나, 메뉴 목록을 늘어놓거나, 깜짝 공지사항을 띄우는 용도로는 적절하지 않습니다. dialog가 열려 있는 동안 키보드의 포커스(focus)는 반드시 dialog 내부 안에 갇혀 있어야 합니다. Escape 키를 누르거나 명확한 취소 버튼을 누르면 닫혀야 하며, 닫힌 후에는 포커스가 원래 열기 조작을 수행했던 위치로 돌아가야 합니다. 프롬프트에 이 조건을 명시하지 않으면, AI 모델은 키보드만으로는 빠져나갈 길이 없는 상자를 만들어내기 십상입니다. 마우스를 쓰지 못하는 사용자가 화면에 갇히게 되는 것입니다. 이는 나중에 정리할 세부 디테일이 아니라, 프롬프트 단계에서 지시해야 할 필수 조건입니다.
drawer는 화면의 시작 가장자리(start edge)에서 미끄러져 들어오며, 기존 페이지는 뒤에 그대로 노출되어 보입니다. 본문 페이지의 내용을 계속 참조하면서 작업해야 할 때 사용합니다. 목록의 검색 필터, 상세 이력 보기, 비상 상황이 아닌 설정 메뉴 등이 대표적입니다. Escape 키를 누르거나 패널 바깥 영역을 터치하여 닫을 수 있게 만듭니다. 아랍어처럼 오른쪽에서 왼쪽으로 글을 읽는 화면에서는 시작 가장자리가 바로 오른쪽입니다. 프롬프트에 “항상 오른쪽”이라고 적지 않고 “start edge”라고 명시해야, 언어별 글 읽기 방향과 어긋나지 않게 자연스럽게 배치됩니다.
bottom sheet는 모바일 화면 아래에서 위로 올라오는 패널입니다. 기기를 한 손으로 낮게 쥐고 쓰는 사용자를 위한 drawer의 모바일 친척인 셈입니다. 방금 터치한 항목에 대해 몇 가지 연속 행동을 취할 때 적합합니다. 전화 걸기, 저장하기, 공유하기 같은 동작입니다. 입력 칸이 20개나 되는 복잡한 양식(form)에는 bottom sheet를 쓰지 않습니다. 살짝 고개만 내밀거나 화면 절반 높이에서 멈추도록 하고, 아래로 끌어내리거나 Escape 키를 눌러 닫을 수 있어야 합니다. 한국어로 딱 맞는 번역어가 없다면 억지로 새 표현을 지어내지 마십시오. “아래에서 올라오는 패널”이라는 부연 설명과 영어 bottom sheet라는 명칭만으로도 충분합니다.
같은 위치, 다른 정보 조각 보여주기
dropdown은 버튼 조작 바로 옆에 짧은 옵션 목록을 열었다가, 하나를 선택하면 곧바로 닫히는 형태입니다. 언어 선택, 정렬 순서, 수량 선택 등에 사용합니다. 두 번째 navigation으로 쓰거나 긴 문단을 넣는 공간이 아닙니다. 선택지 목록이 10줄을 넘어가면 dropdown이 아니라 별도 페이지나 drawer로 구성하는 것이 맞으며, 모바일 화면 밖으로 튕겨 나가는 떠 있는 메뉴로 만들면 안 됩니다.
tabs는 한 공간 안에서 여러 개의 뷰(view)를 교체하며 보여주는 방식입니다. 사용자는 가로로 탭을 눌러 전환하며, 각 탭이 담고 있는 내용은 서로 대등한 비중을 가집니다. ‘이번 주 일정’과 ‘다음 주 일정’, 혹은 ‘제품 설명’과 ‘성분 정보’ 같은 구성입니다. 모든 탭의 이름은 항상 화면에 드러나 있어야 합니다. 탭 이름을 dropdown 메뉴 속에 숨겨버린다면 그것은 처음부터 tab의 구실을 못 하는 것입니다.
accordion은 질문이나 항목을 세로로 쌓아두고, 클릭하면 아래로 펼쳐지는 형태입니다. 한 번에 하나만 열리게 할지 여러 개가 동시에 열리게 할지 조건을 지정해 주어야 합니다. 대다수 사용자가 평소에는 건너뛰는 상세 정보에 주로 사용합니다. 배송 안내 규정이나 자주 묻는 질문(FAQ) 목록이 좋은 예입니다. 서비스의 유일한 가격 정보를 닫혀 있는 accordion 안에 숨겨두지 마십시오. 정보를 닫아둔다는 것은 사용자가 굳이 보지 않아도 된다는 전제가 깔려있기 때문입니다. 가격은 그렇게 숨겨둘 정보가 아닙니다.
tabs와 accordion은 둘 다 “화면 공간을 아껴준다”는 이유로 자주 혼동되곤 합니다. tabs는 화면에 보이는 내용 전체를 교체하되 다른 탭 제목들은 계속 노출해 두는 방식입니다. 반면 accordion은 기존 페이지를 아래로 밀어내며 클릭하기 전까지는 답변 내용을 숨겨두는 방식입니다. AI 모델에게 단순히 “공간을 아껴줘”라고만 요청하면 이 둘 중 하나가 무작위로 선택되어 나옵니다. 사용자가 정보를 탐색하는 방식에 맞는 정확한 명칭을 지시해야 합니다.
같은 현장에서 저지른 두 가지 잘못된 화면 설계
어느 수강 신청 관리 웹사이트를 구축할 때, 서로 전혀 다른 성격의 두 가지 요청 사항이 있었습니다. 하나는 매우 위험한 조작이었습니다. “이 학생의 수강 등록을 취소할 것”. 다른 하나는 지극히 평범한 조작이었습니다. “저녁 수업 목록만 필터링해서 볼 것”. 하지만 첫 번째 버전에서는 프롬프트에 다른 명칭이 없었기 때문에, 두 기능 모두 동일한 “팝업” 형태에 넣어서 만들어졌습니다.
그 결과 수강 취소 버튼은 실수로 누르기 쉬운 위험한 상태가 되었고, 저녁 수업 필터 팝업은 선생님이 기존에 읽고 있던 수강생 목록 전체를 화면 뒤로 숨겨버렸습니다. 모호한 단어 하나 때문에 두 가지 완전히 다른 작업이 모두 엉망이 된 것입니다.
해결책은 ‘팝업’이라는 단어를 세부 명칭으로 명확히 쪼개는 것이었습니다. 수강 취소 조작에는 dialog를 적용했습니다. 화면의 나머지 배경이 어둡게 덮이고, 안의 문장은 누구의 수강 등록이 취소되는지 정확히 알려줍니다. Escape 키와 눈에 보이는 취소 버튼으로 닫을 수 있으며, 닫힌 후에는 포커스가 취소를 물어보았던 버튼 위치로 안전하게 돌아옵니다. 반면 저녁 수업 필터에는 화면 시작 가장자리에서 열리는 drawer를 적용했습니다. 수강생 목록은 옆에 그대로 보이고, 패널 바깥 영역을 누르면 자연스럽게 닫힙니다. 모바일 환경에서는 이 필터를 bottom sheet로 구현해도 좋습니다. 손가락이 이미 화면 아래쪽에 위치해 있기 때문입니다. 선생님이 복잡한 UI 용어 3개를 다 외울 필요는 없습니다. 사용자의 작업을 언제 멈추게 해야 하는지 그 개입의 성격만 판단할 수 있으면 됩니다.
이러한 구분을 기획할 때는 읽는 사람이 쉽게 이해할 수 있도록 본래의 언어로 적고, AI 모델이 이를 다시 하나의 모호한 팝업으로 합치지 못하도록 영어 명칭을 함께 붙여줍니다. 만약 한국어에 drawer에 딱 맞는 일상어가 없다면 “기존 목록을 가리지 않는 가장자리 보조 패널”이라고 역할을 정의해 주면 됩니다. 어색한 번역어를 만드느라 시간을 허비할 필요는 없습니다. 중요한 것은 화면이 실제로 어떻게 동작하느냐입니다.
프롬프트 작성 예시
On the list page, put filters in a drawer from the start edge, not in a dialog. Close the drawer with Escape or a tap outside. Keep focus inside the drawer while it is open, and return focus to the filter button when it closes.
이 영문 프롬프트 아래에, 자신의 언어로 실제 적용할 필터의 항목 명칭(예: 동네 선택, 가격대 등)을 적어주시면 됩니다. AI 모델은 필터의 세부 내용이 지역이나 가격인지 몰라도 drawer의 구조를 정확히 만들어냅니다. 한국어를 쓰는 기획자가 그 세부 내용을 지정해 주지 않으면 아무도 결정해 주지 않습니다. 화면의 틀과 구조는 영어 명칭으로 공유하고, 실제 들어갈 사실 정보는 자신의 언어로 지켜내는 것입니다.
사람들은 흔히 어떤 화면이 더 현대적이고 세련되어 보이는지를 두고 다투곤 합니다. 하지만 진짜 의미 있는 토론은 어떤 화면 형태가 해당 작업을 가장 존중하고 배려하는가입니다. 단순히 목록 정렬 순서를 묻겠다고 사용자의 전체 화면을 막아서는 것은 무례한 설계입니다. 반대로 중요한 삭제 확인창을 조용한 dropdown 메뉴 속에 은근슬쩍 숨겨두는 것은 위험한 설계입니다. 이 두 가지 원칙을 명확히 전달할 수 있다면 이 단계는 통과입니다. 다음 단계는 훨씬 더 작지만, 그만큼 더 쉽게 빠뜨리기 쉬운 주제입니다. 새 페이지로 이동하지 않고도 작업이 잘 완료되었는지를 사용자에게 알려주는 방법입니다.