Readiz 웹 UI 디자인

사용자는 버튼과 설명이 화면을 차지하는 구성을 싫어한다. 작은 조작부와 명확한 위계로 실제 콘텐츠를 한눈에 읽고 탐색하게 만든다. 새 웹 UI와 기존 UI 수정에 이 기준을 적용한다. 사용자가 지정한 브랜드·플랫폼·접근성 요구가 있으면 먼저 따른다.

기본 밀도

다음은 별도 디자인 지정이 없는 웹 도구의 시작값이다. 본문을 작게 눌러 담기보다 불필요한 여백과 조작부를 줄인다.

짧은 버튼은 내용 너비에 맞춘다. 주요 동작이라는 이유만으로 크거나 넓은 버튼을 만들지 않는다.
모바일에서도 컴팩트한 시각 크기를 유지한다. 공통 media query로 모든 버튼을 38~48px로 키우지 않는다. 실제 터치 오류가 확인되면 해당 조작의 간격·히트 영역을 조정하고 인접 조작과 겹치지 않는지 확인한다. 명시된 플랫폼 규격은 별도로 따른다.
긴 객관식·목록 행은 문구 길이만큼 자연스럽게 늘어난다. 높이 고정·말줄임으로 읽을 내용을 자르지 않는다. 번호 탐색처럼 현재 제목을 따로 보여 줄 수 있으면 작은 탐색 조작과 콘텐츠 제목을 분리한다.
파란색 계열을 기본 강조색으로 선호한다. 밝고 조용한 배경, 얇은 경계, 작은 모서리를 쓴다. 기존의 명시된 브랜드와 차트의 의미별 색 구분은 유지한다.

처음 보이는 영역에 실제 차트·표·핵심 내용을 배치한다. 소개용 큰 제목, 긴 부제, 중복 배지로 작업 영역을 밀어내지 않는다.
반복 수치와 비교는 표, 항목 탐색은 정렬된 목록·짧은 탭, 차트 조작은 작은 도구 모음으로 만든다. 개별 버튼을 큰 카드처럼 나열하지 않는다.
익숙한 동작은 프로젝트의 기존 SVG/아이콘 체계를 사용한다. 아이콘에는 접근 가능한 이름과 tooltip/필요한 짧은 label을 제공한다. 색만으로 선택·성공·오류를 구별하지 않는다.
핵심 요약과 자주 쓰는 조작을 남기고 상세 설명·출처·사용법·저장 기준은 ⓘ 또는 기본 접힌 details에 둔다. 오류, 저장 실패, 실행 결과와 중요한 판단 조건은 필요한 시점에 표시한다.
같은 상태를 제목·카드·뱃지·설명에서 반복하지 않는다. 사용자가 기능을 찾기 위해 긴 글을 읽게 만들지 않는다.
조작 버튼·표·차트의 간격과 정렬을 맞춘다. 데스크톱 목차는 좁게, 모바일 목차는 현재 위치가 보이는 접이식 구성이 적합하다.

수정 전 실제 버튼의 computed height, padding, line-height와 첫 콘텐츠 위치를 확인한다. 변경한 CSS 선언만 보고 작아졌다고 판단하지 않는다.
기존 컴포넌트 variant와 토큰을 먼저 수정한다. 공통 CSS, 높은 specificity, 모바일 override, 동적 스타일이 크기를 다시 늘리는지 확인한다. 덮어쓰기 규칙을 계속 쌓기보다 해당 크기의 원인을 정리한다.
대표 PC·태블릿·360~390px 모바일에서 직접 본다. 일반 조작은 위 기본값을 유지하는지, 긴 글이 잘리지 않는지, 문서 가로 넘침과 도구/차트 겹침이 없는지 확인한다.
펼침·선택·키보드 포커스·터치와 필요한 저장/복원을 확인한다. 기존 데이터·저장 키·차트 좌표를 디자인 변경 때문에 바꾸지 않는다.
요청한 범위의 결과를 구현·검증하고, 배포가 포함된 작업은 실제 배포 화면도 확인한다. 이 스킬 자체가 게시·메시지 전송 권한을 추가하지는 않는다.