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 모바일에서 직접 봅니다. 일반 조작은 위 기본값을 유지하는지, 긴 글이 잘리지 않는지, 문서 가로 넘침과 도구/차트 겹침이 없는지 확인합니다.
펼침·선택·키보드 포커스·터치와 필요한 저장/복원을 확인합니다. 기존 데이터·저장 키·차트 좌표를 디자인 변경 때문에 바꾸지 않습니다.
요청한 범위의 결과를 구현·검증하고, 배포가 포함된 작업은 실제 배포 화면도 확인합니다. 이 스킬 자체가 게시·메시지 전송 권한을 추가하지는 않습니다.