본문으로 건너뛰기
RAISE LAB

VIDEO NOTE

AI 코딩으로 웹사이트 만들 때 알아야 할 UI 핵심 용어 24가지

코드깎는노인 · 11분 · 초급 · 26. 10. 29. · 분야별 AX 사례 › 서비스 제작

YouTube 에서 보기 · 코드깎는노인 (새 탭에서 열림)

AI로 웹사이트를 만들 때 일상 언어로 설명하면 의도와 다른 결과가 나와 수정 횟수가 늘어난다. 화면 뼈대를 잡는 레이아웃 7종, 기능 부품인 컴포넌트 9종, 화면 완성도를 높이는 효과 8종의 정확한 명칭과 작동 방식을 다룬다. 'UI 용어 + 원하는 동작 + 조건' 공식으로 프롬프트를 작성하면 원하는 화면을 한 번에 만들 수 있다.

핵심

  • 화면 뼈대를 구성하는 레이아웃으로 Hero Section, Responsive Layout, Card Layout, Bento Grid, Sidebar Layout, Sticky Header, Split Layout을 소개한다.
  • 기능을 담당하는 컴포넌트로 Tabs, Accordion, Modal/Dialog, Drawer, Dropdown, Tooltip, Toast/Snackbar, Carousel, Skeleton Loading을 정리한다.
  • 완성도를 높이는 인터랙션 효과로 Hover Effect, Scroll Reveal, Stagger Animation, Smooth Transition, Glassmorphism, Parallax Scrolling, Scroll Snap, Micro-interaction을 제시한다.
  • 효과적인 AI 프롬프트 공식은 '정확한 UI 용어 + 원하는 동작 + 적용 조건'의 조합이다.

RAISE LAB 에서 배우는 사람에게

클로드 아티팩트나 바이브 코딩 도구로 웹 서비스를 프로토타이핑할 때 정확한 UI 명칭을 활용해 수정 반복을 줄여 준다.

챕터

  1. 0:00AI 코딩에서 UI 명칭이 필요한 이유 (새 탭에서 열림)
  2. 1:23화면 뼈대를 만드는 레이아웃 7종 (새 탭에서 열림)
  3. 4:02화면 요소 컴포넌트 9종 (새 탭에서 열림)
  4. 7:02완성도를 높이는 효과 및 인터랙션 8종 (새 탭에서 열림)
  5. 9:49용어를 활용한 AI 프롬프트 작성 공식 (새 탭에서 열림)
  6. 11:06UI 필수 용어 24종 치트시트 (새 탭에서 열림)

이 노트는 RAISE LAB 운영팀이 고른 영상을 AI(Gemini)가 보고 한국어로 정리한 것입니다. 영상의 저작권은 원작자에게 있고, 자막·대본은 싣지 않습니다. 코드깎는노인 원작자 채널 (새 탭에서 열림)

서비스 제작