만들고 싶은 게 머릿속에 있는데 이름을 몰라 설명이 안 될 때 쓰는 사전입니다.
화면에서 본 것이 무엇이라 불리는지 찾고, 직접 눌러 보고, 그대로 복사해 쓸 수 있는 프롬프트를 가져가세요.
비슷해 보이는 것들의 차이도 나란히 놓고 비교합니다.
웹 화면이 앞의 여섯 묶음이고, 마지막 GUI 창 묶음은 데스크톱 앱 창에만 있는 것들
(타이틀 바·메뉴 바·리본·트레이처럼 브라우저에는 없는 것)입니다.
🧩 프롬프트 기본 공식
[대상 화면]에 [UI 요소]를 배치하고, 사용자가 [동작]하면 [결과]가 나타나게 해 줘.
[초기·로딩·성공·실패 상태]도 처리해 줘.
상품 목록 화면 오른쪽에 필터 사이드바를 배치하고, 사용자가 가격 범위를 선택하면 목록이 즉시 갱신되게 해 줘.
데이터를 불러오는 동안에는 로딩 상태를 표시하고, 결과가 없으면 빈 화면 안내를 보여 줘.
📚 용어 사전 — 검색하거나 묶음을 골라 고르세요. 카드는 위가 데모, 아래가 설명입니다
⚖️ 헷갈리기 쉬운 것들 — 나란히 놓고 양쪽을 눌러 보세요
💡 이 사전을 쓰는 법
이름을 모를 때
검색창에 기억나는 대로 치세요. 비슷한 이름까지 함께 검색되므로 "메뉴"라고 치면
내비게이션 바·사이드바·탭 바·드롭다운이 모두 나옵니다. 그중 데모를 눌러 보고 원하던 것을 찾으면 됩니다.
AI에게 말할 때
카드 아래 검은 상자의 프롬프트를 복사해서 그대로 붙여 넣고, 대괄호 부분만 여러분 서비스에 맞게 바꾸세요.
위치(위·아래·왼쪽)와 고정 여부를 함께 말하는 것이 결과를 크게 좌우합니다.
GUI 창 묶음
파이썬·일렉트론으로 내 컴퓨터에서 도는 앱을 만들 때 쓰는 말들입니다.
웹에도 있는 것(모달·표·탭)은 앞 묶음에 두었고, 여기에는 브라우저에는 아예 없는 것만 모았습니다.
같은 말이라도 뜻이 갈리는 짝(모달 창↔모드리스 창, 최소화↔트레이)은 위 비교에서 나란히 눌러 보세요.
주황색 상자
실제로 자주 벌어지는 잘못된 요청과 그때 나오는 엉뚱한 결과입니다. 여기만 피해도 왕복이 확 줄어듭니다.