UI 이름 몰라도 바이브 코딩용 프롬프트 찾는 법(NameThatUI)

안녕하세요?
매일 사람이 쓰는 뉴스레터 Daily Prompt입니다.

오늘은 UI 이름 몰라도 바이브 코딩용 프롬프트를 찾게 해주는 NameThatUI를 소개합니다.

UI 이름 몰라도 바이브 코딩 프롬프트 만들기

바이브 코딩으로 앱이나 웹사이트를 만들다 보면 원하는 모습은 떠오르는데 그 요소의 이름을 몰라 막힐 때가 있습니다. 이럴 때 사용할 수 있는 UI 시각 사전 NameThatUI를 소개드립니다.

오른쪽 상단 검색창을 클릭한 뒤,

아래와 같이 한국어로 입력합니다.

오늘의 프롬프트(NameThatUI 검색):

잠시 뒤 첫 결과로 Toast (Snackbar)가 나타났습니다. 표준 명칭뿐 아니라 role="status"라는 접근성 역할, '작업 뒤 잠깐 나타나는 방해되지 않는 메시지(non-blocking message that appears after an action)'라는 설명까지 함께 보여줍니다.

오늘의 프롬프트 입력 결과:

스크롤을 살짝 내리면 클로드 코드/코덱스와 같은 에이전트에게 어떻게 지시하면 되는지, 프롬프트도 함께 보여줍니다.

NameThatUI에는 현재 웹 44개와 macOS 32개, 총 76개의 UI 항목이 정리되어 있습니다. 각 항목을 열면 다음 정보를 확인할 수 있습니다.

• 표준 명칭과 별칭: Toast, Snackbar처럼 같은 요소를 부르는 여러 이름을 함께 보여줍니다.
• 구조와 세부 명칭: 화면 예시 위에서 viewport, status message, action처럼 구성 요소를 나눠 설명합니다.
• 코드에서 쓰는 이름: HTML·ARIA·SwiftUI·AppKit·shadcn/ui 등 플랫폼과 프레임워크별 기호를 연결합니다.
• 구현 및 디버깅 프롬프트: 바로 붙여 넣을 수 있는 구현 지시문과 흔한 오류를 점검하는 디버깅 지시문을 제공합니다.

마무리

1. NameThatUI 같은 사이트가 등장한 배경에는 바이브 코딩의 확산이 있습니다. 이제 코드를 직접 작성하지 않아도 에이전트에게 말로 원하는 앱과 웹사이트를 만들 수 있게 되었습니다. 다만, 그 UI가 어떤 용어로 불리는지, 그 이름을 몰라 지시하기 어려울 때가 있었습니다.
2. 이런 어려움을 겪는 바이브 코더들이 많기 때문에 NameThatUI와 같은 웹사이트가 등장하게 되었습니다. NameThatUI는 일상적인 설명을 표준 UI 용어와 구현 프롬프트로 바꿔주기 때문에, 말로 UI를 설명하기 어려울 때 유용한 사이트입니다. 게다가 한국어로 검색이 된다는 점도 큰 장점입니다. 디자이너와 개발자를 포함한 모든 바이브 코더에게 도움이 될 것 같아 오늘 뉴스레터로 공유드립니다.

오늘의 Midjourney Prompt & Music

아래 Midjourney 이미지를 음악과 함께 감상해보세요:)

프롬프트 (by @jae_hong__an) :