보기 좋게 통일되고 누구나 쓰기 쉬운 웹 페이지 화면(UI) 만들기

## 가장 중요한 내용과 다음 행동이 먼저 보이게 하기 장식을 다듬기 전에 시각적 가중치로 중요도를 분명하게 드러냅니다. 페이지는 사람들이 몇 초 안에 목적을 파악하고, 핵심 가치를 이해하며, 다음 행동을 알아볼 수 있게 해야 합니다. - 각 화면이나 섹션에 하나의 핵심 메시지를 부여합니다. - 핵심 계층은 페이지 제목, 섹션 제목, 본문 텍스트로 유지하고, 더 깊은 단계는 필요할 때만 추가합니다. - 크기, 대비, 위치 및 주변 여백을 사용해 더 중요한 콘텐츠를 강하게 드러냅니다. - 빠르게 훑어보는 것이 중요할 때는 뒷받침하는 세부 정보보다 결론을 먼저 배치합니다. - 가장 강한 시각적 처리는 핵심 행동이나 의사결정에만 사용합니다. - 모든 요소를 크고 굵고 화려하거나 대비가 높게 만들지 않습니다. - 다섯 초 테스트를 실시합니다. 처음 보는 사람이 페이지와 의도된 다음 단계를 설명할 수 있습니까? ## 공통 그리드와 간격으로 요소를 가지런히 놓기 간격은 요소 사이의 관계를 전달합니다. 공통 척도와 그리드를 사용해 관련 항목은 연결되어 보이고, 분리된 그룹은 구별되며, 레이아웃이 바뀌어도 리듬이 유지되게 합니다. - 8픽셀 간격 척도로 시작하고, 더 세밀한 제어가 필요할 때는 4픽셀 단위 분할을 허용합니다. - 휴대전화에서는 한 열, 태블릿에서는 두 열, 넓은 화면에서는 최대 열두 열과 같은 단순한 반응형 그리드를 사용합니다. - 그룹 내부의 간격을 그룹 사이의 간격보다 작게 유지합니다. - 반복되는 컴포넌트를 공통 열, 가장자리 및 기준선에 맞춥니다. - 시작점으로 본문 줄 높이는 1.6 정도, 문단 간격은 줄 높이의 1.5배에서 2배 정도로 설정합니다. - 거의 중복되는 측정값을 새로 만들지 말고 간격 값에 토큰을 사용합니다. - 지원되는 모든 너비에서 섹션과 컴포넌트 전체의 수직 리듬을 점검합니다. ## 휴대폰부터 넓은 화면까지 읽는 순서 지키기 사람들이 필요로 하는 순서대로 콘텐츠를 배치하고, 시각적 레이아웃으로 그 순서를 강화합니다. 반응형 디자인은 단지 작은 화면에 맞추는 데 그치지 않고 의미를 보존해야 합니다. - 모바일을 기준으로 콘텐츠 순서를 먼저 설계한 다음, 더 넓은 화면에 맞게 레이아웃을 개선합니다. - 가능하면 일본어 본문은 한 줄에 35자에서 45자 정도, 라틴 문자 텍스트는 45자에서 75자 정도로 유지합니다. - 첫 줄 들여쓰기에 의존하지 말고 여백으로 웹 문단을 구분합니다. - 각 섹션의 핵심 요점은 근거보다 앞에, 관련 행동은 근거 뒤에 배치합니다. - 본문 텍스트 없이 읽어도 제목의 순서를 이해할 수 있게 합니다. - 열이 접히거나 요소가 이동할 때도 논리적인 소스 순서를 유지합니다. - 확대, 텍스트 확대, 좁은 너비, 긴 레이블, 날짜, 가격 및 혼합 문자 체계를 테스트합니다. ## 읽기 쉬운 글자 크기와 줄 간격 정하기 타이포그래피는 계층, 가독성 및 신뢰를 형성합니다. 제한된 글자 크기 척도와 충분한 줄 높이를 사용해 작은 화면에서도 텍스트를 편안하게 읽을 수 있고 콘텐츠 변화에도 안정적으로 유지되게 합니다. - H1은 28픽셀에서 36픽셀, H2는 22픽셀에서 28픽셀, H3는 18픽셀에서 20픽셀, 본문은 16픽셀에서 18픽셀 정도로 시작합니다. - 본문 줄 높이는 1.6 정도, 제목 줄 높이는 1.25에서 1.4 정도로 설정합니다. - 모바일에서 13픽셀에서 14픽셀 이하의 본문 텍스트에 의존하지 마십시오. - 글꼴 패밀리와 굵기 수를 제한하고, 서체를 더 추가하기 전에 계층을 통해 차이를 만듭니다. - 일본어의 일반적인 자간을 유지하고, 라틴 문자 디스플레이 텍스트에는 필요할 때만 미세한 트래킹을 적용합니다. - 굵은 강조는 실제로 빠른 탐색을 돕는 소수의 문구에만 사용합니다. - 숫자, 기호, 다국어 문자열, 사용자가 생성한 텍스트 및 누락된 글리프를 테스트합니다. ## 색 수를 줄이고 글자가 읽힐 만큼 대비 지키기 색상은 의미를 전달하는 유일한 수단이 되지 않으면서 우선순위, 상태 및 정체성을 전달해야 합니다. 절제된 팔레트를 사용하면 핵심 행동과 중요한 상태 변화를 더 쉽게 알아볼 수 있습니다. - 지배적인 배경, 보조 텍스트 또는 표면 색상 범위, 작은 비율의 강조색을 사용합니다. - 기능 색상 약 세 가지에 중립색과 하나의 기본 강조색을 더해 시작합니다. - 성공, 경고, 위험 및 정보 색상을 일관되게 지정합니다. - 일반 텍스트는 최소 4.5:1, 큰 텍스트는 최소 3:1의 대비를 목표로 합니다. - 핵심 행동에는 색상, 형태, 레이블 및 배치를 구별되는 방식으로 조합합니다. - 색상으로 구분한 상태에는 텍스트, 아이콘, 패턴 또는 색상 이외의 다른 단서를 함께 제공합니다. - 비활성화, 호버, 포커스 및 이미지 오버레이 상태를 포함해 모든 전경색과 배경색 조합을 확인합니다. ## 자주 쓰는 버튼 등을 공통 컴포넌트로 묶기 일관성은 사용자의 학습 비용과 팀의 유지관리 비용을 낮춥니다. 개별 페이지를 따로 수정하는 대신 반복되는 시각적 결정을 공통 토큰과 컴포넌트로 전환합니다. - 색상, 간격, 타이포그래피, 반경, 테두리, 그림자 및 모션용 토큰을 정의합니다. - 재사용 가능한 버튼, 카드, 내비게이션, 양식, 대화상자, 배지 및 피드백 요소를 만듭니다. - 해당하는 경우 기본, 호버, 활성, 비활성화, 로딩, 오류 및 포커스 상태를 정의합니다. - 일시적인 외형이 아니라 목적이나 역할에 따라 변형의 이름을 정합니다. - 같은 역할은 제품 전체에서 시각적으로나 동작 면에서 일관되게 유지합니다. - 허용되는 변형, 콘텐츠 규칙, 접근성 요구사항 및 반응형 동작을 문서화합니다. - 패턴이 바뀌면 공통 컴포넌트를 변경하고, 페이지별 편차가 생기지 않게 합니다. ## 이미지와 아이콘을 꾸밈이 아닌 설명에 쓰기 이미지, 아이콘 및 다이어그램은 설명하거나 방향을 제시하거나 신뢰를 뒷받침해야 합니다. 자산 처리를 표준화하면 장식이 메시지를 가리는 것을 막으면서 체감 품질을 높일 수 있습니다. - 히어로 영역과 카드처럼 반복되는 자산 역할에 일관된 종횡비를 지정합니다. - 이미지를 표시되는 크기에 맞게 조정하고 효율적인 최신 형식을 우선합니다. - 반응형 소스를 제공하고, 핵심 콘텐츠를 숨기지 않는 경우 화면 밖 이미지의 로딩을 지연합니다. - 이미지의 외형만이 아니라 목적을 전달하는 대체 텍스트를 작성합니다. - 한 세트 안에서 아이콘의 선, 모서리, 채우기 및 시각적 크기를 일관되게 유지합니다. - 명확한 범례와 함께 다이어그램을 설명, 시각적 모델 및 간결한 핵심 결론으로 구성합니다. - 이미지 위 텍스트의 대비를 확인하고 필요할 때 안정적인 배경 처리를 제공합니다. ## 누르거나 입력하면 빠르고 차분하게 반응하기 상호작용 디자인은 사용할 수 있는 항목을 드러내고, 입력을 인지하고, 진행 상황을 보여 주며, 결과를 확인해야 합니다. 모션은 작업을 지연시키거나 불편을 유발하지 않으면서 상태 변화를 명확히 해야 합니다. - 가능하면 핵심 입력에 약 100밀리초 이내로 눈에 보이는 반응을 제공합니다. - 호버 및 전환 시간은 짧게 유지하며, 보통 120밀리초에서 200밀리초 정도로 설정합니다. - 관련 컨트롤에 눌림, 로딩, 성공, 오류, 비활성화 및 포커스 피드백을 정의합니다. - 완료가 즉시 이루어지지 않을 때는 진행 표시기나 스켈레톤을 사용합니다. - 방향과 이징을 장식이 아니라 공간 또는 레이어 변화를 설명하는 데 사용합니다. - 콘텐츠와 경쟁하거나 시선을 붙잡거나 입력을 차단하는 애니메이션을 피합니다. - 모션 감소 환경설정을 존중하고 주의를 분산시키는 배경 미디어를 자동 재생하지 않습니다. ## 키보드와 스크린 리더로도 끝까지 쓸 수 있게 하기 접근성은 최종 시각 감사가 아니라 핵심 상호작용 요구사항입니다. 사람들은 서로 다른 입력 및 출력 방식을 통해 상태를 인지하고, 컨트롤을 이해하고, 탐색하고, 오류에서 복구하고, 핵심 흐름을 완료할 수 있어야 합니다. - 눈에 보이는 포커스 표시기와 논리적인 키보드 순서를 유지합니다. - 가능하면 상호작용 대상의 크기를 최소 44픽셀 × 44픽셀로 만듭니다. - 이미지에는 의미 있는 대체 수단을, 컨트롤에는 접근 가능한 이름을, 양식 필드에는 명시적인 레이블을 제공합니다. - 오류가 해당 필드를 식별하고, 문제를 설명하며, 수정 방법을 알리게 합니다. - 의미 있는 오디오와 비디오에는 자막이나 대본을 제공합니다. - 키보드만 사용하고 화면 읽기 프로그램 출력을 확인하면서 전체 핵심 흐름을 검증합니다. - 대비, 확대, 텍스트 크기 조정, 모션 감소 및 일반적인 색각 차이를 테스트합니다. ## 공개 전에 로딩 속도와 검색용 기본 설정 확인하기 성능, 검색 가능성 및 유지관리성은 설계된 경험의 일부입니다. 측정 가능한 릴리스 검사를 정의하고 결정을 보존해, 일상적인 콘텐츠 및 컴포넌트 변경 후에도 개선 사항이 유지되게 합니다. - 반응형 압축 이미지를 사용하고 중요하지 않은 자산은 필요할 때만 로드합니다. - 글꼴 서브셋을 만들고, 폴백 렌더링을 허용하고, 렌더링을 차단하는 스타일을 최소화하며, 불필요한 스크립트 로딩을 지연합니다. - 각 페이지에 의미 있는 H1 하나와 서로 구별되는 제목, 설명 및 소셜 미리보기를 제공합니다. - 시작 목표로 LCP를 2.5초 미만, CLS를 0.1 미만으로 설정한 다음 최신 성능 표준을 적용합니다. - 가장 중요한 가입, 구매 또는 요청 흐름에서 속도와 이탈을 테스트합니다. - 릴리스 전에 계층, 간격, 타이포그래피, 색상, 상태, 자산, 접근성 및 성능을 검토합니다. - 디자인 결정을 기록하고 공통 컴포넌트와 토큰을 통해 변경 사항을 구현합니다. - 실제 사용자 결과를 모니터링하고 근거가 더 나은 기준을 보여 줄 때 임계값을 수정합니다.