ABOUT STYLE GALLERY
인터페이스 지식을
다시 꺼내 쓰기 쉽게.
화면을 만드는 일에는 여러 가지 판단이 필요합니다.
어떻게 배치할지, 어떻게 반응할지, 같은 단어를 어떻게 이해할지.
StyleGallery는 그 판단에 필요한 패턴과 가이드를 모읍니다. 6개 도메인의 124개 자료를 한국어 키워드로 검색하고, 작은 예제를 직접 다뤄보고, 영문 원문의 맥락까지 이어서 읽을 수 있습니다.
01
하고 싶은 일로 찾기
“검색 화면”, “저장”, “인벤토리”처럼 작업으로 검색해 보세요. 한국어 키워드와 영문 이름을 함께 찾습니다.
02
작게 바꿔보며 이해하기
영역의 너비를 줄이고, 전환을 중단하고, 응답 순서를 바꿔보세요. 대표 예제에서 동작을 확인할 수 있어요.
03
맥락과 함께 적용하기
원문의 적용 범위와 출처를 확인하세요. 실험적 가이드와 예제를 자신의 제품에서 검증하며 사용합니다.
하나의 화면, 6가지 관점.
갤러리 둘러보기 ↗Layout
콘텐츠가 제자리를 찾는 구조.
정렬, 그리드, 반응형 배치와 스크롤을 위한 작은 HTML·CSS 패턴.
Motion변화를 이해할 수 있는 움직임.
전환과 피드백, 중단과 재시도까지 생각하는 모션 가이드.
Design Engineering작은 상호작용까지 견고하게.
상태의 주인, 저장 중 편집, 비동기 응답과 복구를 다루는 구현 패턴.
Game UI플레이어의 다음 행동이 보이도록.
HUD, 인벤토리, 메뉴와 오버레이를 작업과 입력의 관점에서 탐색하세요.
Platform Guides플랫폼의 차이를 알고 적용하기.
Apple, Android, Windows의 상호작용을 출처와 적용 범위로 비교합니다.
Design Terminology같은 단어, 다른 맥락.
디자인 용어가 어느 출처에서 어떤 의미로 쓰이는지 함께 읽어보세요.
OPEN KNOWLEDGE
사람이 읽고,
에이전트도 조회합니다.
이 사이트의 자료는 StyleGallery 저장소에서 가져옵니다. 원문과 패턴 코드는 저장소에서 관리하고, 사이트는 그 지식을 사람이 둘러보기 쉽게 보여줍니다.
자동화에 연결하려면 CLI와 읽기 전용 MCP 안내를 확인하세요.
저장소와 사용법 보기 ↗