탐색Component개발 협업 SaaS 컴포넌트 — 설정 내비와 연동 카드 그리드←→ 이전 · 다음 이미지

1 / 4

아이콘 레일과 라벨 목록을 나란히 놓은 설정 내비게이션 패널이다. 상단에 단축키 힌트가 붙은 검색 필드가 있고 워크플레이스·계정·팀 섹션이 구분선으로 나뉘며, 활성 항목만 옅은 회색 배경으로 표시된다. 좁은 폭 변형도 함께 보여준다.

Component

개발 협업 SaaS 컴포넌트 — 설정 내비와 연동 카드 그리드

2026-07-29 · 이미지 4

X에서 보기

AI 분석

개발 협업 SaaS의 설정 내비, 연동 카드, 업셀 배너를 묶은 라이트 모드 컴포넌트 세트다.

흰 카드를 옅은 회색 배경 위에 얹는 라이트 모드 컴포넌트 모음이다. 설정 화면은 아이콘 전용 레일과 라벨 목록을 나란히 둔 이중 사이드바 구조이며, 섹션 헤더를 작은 대문자 캡션으로 구분하고 활성 항목만 옅은 회색 필로 표시한다. 타이포그래피는 중립 산세리프 한 종을 굵기와 회색 단계로만 위계를 만들고, 색은 거의 무채색으로 유지한 채 서비스 로고와 흐릿한 그라데이션 배경에서만 채도가 들어온다. 3열 카드 그리드, 카테고리 필터 칩, 검색 필드, 검은 배지, 우측 정렬 액션 버튼처럼 연동 마켓플레이스에 필요한 요소가 한 세트로 정리돼 있다. 절제된 톤으로 밀도 높은 설정·연동 화면을 구성하는 방식의 참고로 쓸 만하다.

minimal · light-mode · soft-gradient · corporate