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