SHIUI
SHIUI는 플랫 2D 스타일의 재사용 가능한 UI 컴포넌트 키트로, 세 가지 색, 1.5px 선, 그림자 없음을 특징으로 하며 컴포넌트를 페이지에서 바로 사용해 보고 소스 코드를 복사할 수 있습니다.
SHIUI 소개
SHIUI는 재사용 가능한 UI 컴포넌트 키트로, 일본 국기 포스터 스타일의 플랫 2D 디자인을 시각적 기준으로 삼습니다. 세 가지 색(종이 흰색 #e5e3dc, 먹색 #2a2926, 주홍색 #e14d2a)만 사용하고, 1.5px 선을 통일하며, 전 과정에서 그림자를 사용하지 않습니다. 공식 웹사이트에 따르면 현재 111개의 인터랙티브 요소와 24개의 블록을 포함하고 있으며, 이 요소들은 쇼케이스 페이지에서 실제로 작동합니다. 클릭, 뒤집기, 닫기 등이 가능하고, 각 카드에서 해당 import 문이나 전체 소스 코드를 바로 복사할 수 있습니다. 또한 클릭 한 번으로 복사할 수 있는 디자인 토큰(색상 체계)을 제공하여 프로젝트에 바로 적용하기에 적합합니다.
적합한 사용자
적합한 활용 장면
영어 인터페이스를 위한 플랫하고 절제된 비주얼 시스템을 구축하고, 컴포넌트 소스 코드를 바로 복사하여 사용
색상과 선 규격을 통일해야 할 때, 3색 디자인 토큰을 복사하여 프로젝트 기반으로 활용
컴포넌트를 선택하기 전에 공식 웹사이트 카드에서 클릭, 뒤집기, 닫기 등 인터랙션 효과를 직접 사용해 보기
기능
인터랙티브 컴포넌트 카탈로그
공식 웹사이트에 따르면 111개의 인터랙티브 요소와 24개의 블록이 포함되어 있으며, 각 카드는 페이지에서 실제로 클릭, 뒤집기, 닫기가 가능합니다.
import 문 또는 소스 코드 원클릭 복사
각 컴포넌트 카드에서 해당 import 문이나 전체 소스 코드를 바로 복사할 수 있어 프로젝트에서 사용하기 편리합니다.
3색 디자인 토큰
Paper, Sumi, Shu 세 가지 색상 토큰을 제공하며, 웹사이트에서 한 번에 복사하여 인터페이스의 색상, 선, 포인트 컬러 사용을 통일할 수 있습니다.
플랫 포스터 스타일 비주얼
플랫 2D, 통일된 1.5px 선, 그림자 없는 비주얼 시스템을 채택했으며, 공식 웹사이트에서 컴포넌트 형태로 전시됩니다.
장점
- 컴포넌트가 공식 웹사이트에서 실제 인터랙티브 형태로 전시되어 보이는 그대로 사용할 수 있음
- import 문이나 전체 소스 코드를 바로 복사할 수 있어 도입 비용이 낮음
- 복사 가능한 3색 디자인 토큰을 제공하여 스타일이 통일됨
단점
- 이 컴포넌트 키트는 영어 인터페이스를 대상으로 하며, UI 문구가 주로 영어 레이아웃에 맞춰 설계되어 있음