공개 글
웹디자인 글
헤더, 메뉴, 타이포그래피, 푸터, 소개와 문의 화면의 접근성과 신뢰 정보를 점검합니다.
가장 최근 글 · 웹디자인
저장됐다는 알림을 놓쳤을 때: 상태 문장과 결과 위치 남기기
일시적인 상태 알림과 지속되는 현재 값을 나누고, role=status의 갱신·초점·중복 알림과 메시지 제거 뒤의 결과를 확인합니다.
글 읽기
글 · 웹디자인
필터 주소를 공유했는데 선택이 풀릴 때: GET 폼과 복수값
GET 폼의 반복 키와 getAll·append로 복수 필터를 저장·복원하고, 허용값·해제·페이지 초기화의 왕복 규칙을 정합니다.
글 읽기
글 · 웹디자인
전체 선택인데 두 개만 체크됐을 때: 일부 선택 상태 다루기
개별 항목의 체크 상태에서 없음·일부·전부를 계산하고, 전체 선택의 checked·indeterminate·요약 문장을 동기화합니다.
글 읽기
글 · 웹디자인
모바일 100vh 아래로 버튼이 숨을 때: svh·lvh·dvh 선택
작은·큰·동적 viewport 높이를 구분하고, 고정 높이와 최소 높이·내부 스크롤을 콘텐츠 조건에 맞춰 고릅니다.
글 읽기
글 · 웹디자인
이전 페이지와 상위 분류는 다릅니다: 경로 안내를 고르는 기준
방문 기록과 사이트 분류를 나누고, 복수 분류·직접 진입·현재 항목 표시·돌아가기 문맥을 경로 안내 예제로 비교합니다.
글 읽기
글 · 웹디자인
sticky를 넣었는데 붙지 않을 때: 부모의 스크롤과 남은 높이
sticky의 실패를 inset·조상 overflow·부모 높이·정렬로 나누고, 같은 내용의 두 내부 스크롤 영역에서 기준 차이를 확인합니다.
글 읽기
글 · 웹디자인
빈 수량을 0으로 읽지 않게: 숫자 입력의 세 가지 상태
빈 값과 0, 전체 문자열의 형식과 변환을 분리합니다. 1~999 정수 수량의 입력 정책을 함수와 경계값으로 확인합니다.
글 읽기
글 · 웹디자인
탭에 초점만 옮겼는데 내용까지 바뀔 때: 선택과 활성화 나누기
규격·배송·관리 탭에서 방향키의 초점 이동과 Enter의 선택을 나누고, 패널·aria-selected·Tab 경로를 연결하는 수동 활성화 예제입니다.
글 읽기
글 · 웹디자인
같은 1fr인데 카드가 화면을 밀어낼 때: 그리드의 최소 너비
1fr 트랙의 자동 최소 크기, 자식의 min-width, 긴 문자열의 줄바꿈을 실제 두 칸 예제로 나누어 확인합니다.
글 읽기
글 · 웹디자인
더 보기 후 글을 읽고 돌아왔을 때: 목록 주소와 위치 복원
페이지별 링크를 기반으로 더 보기를 설계하고, 누적 목록·History API·뒤로가기·로딩 실패·키보드 이동의 관계를 설명합니다.
글 읽기
글 · 웹디자인
목차를 눌렀는데 제목이 가려질 때: 앵커 여백과 초점 이동
고정 헤더 아래의 문서 앵커를 scroll-margin-top으로 조정하고, 해시 주소·첫 방문·키보드 초점의 차이를 설명합니다.
글 읽기
글 · 웹디자인
모바일 이메일 입력이 번거로운 이유: 형식·자동완성·키보드 역할 나누기
이메일 입력 형식, 저장 주소 자동완성, 모바일 키보드는 서로 다른 기능입니다. 회신 주소와 로그인 ID 예제를 비교하고 주소 변형·붙여넣기·형식 검사와 실제 수신 확인을 구분합니다.
글 읽기
글 · 웹디자인
동작 줄이기 설정을 켰을 때: 장식 애니메이션을 멈추고 상태 정보는 남기는 법
prefers-reduced-motion을 적용할 때 움직임과 정보 전달을 분리합니다. 등장 효과·부드러운 스크롤·저장 상태를 나눠 설계하고 CSS와 JavaScript가 사용자 설정 변경에 반응하는 예제를 제공합니다.
글 읽기
글 · 웹디자인
고정 헤더 뒤로 사라지는 키보드 초점: Tab·역방향 이동·본문 바로가기 점검법
키보드 초점이 이동해도 현재 링크가 헤더 뒤에 숨는 문제를 다룹니다. 초점 표시와 가림을 구분하고 위쪽 스크롤 여유, 변하는 헤더 높이, 역방향 탐색을 구체적인 예제로 확인합니다.
글 읽기
글 · 웹디자인
이미지가 안 떠도 본문이 무너지지 않게: 실패 상태와 대체 정보 설계
상품 이미지가 느리거나 깨져도 치수·색상·링크 목적을 잃지 않는 구조를 설명합니다. 실패 상태별 확인표, img와 사양 텍스트 예제, complete와 naturalWidth의 판정 한계를 다룹니다.
글 읽기
글 · 웹디자인
사이트맵 수정일이 글과 다를 때: lastmod 오류를 찾는 대조법
사이트맵 lastmod, 화면의 수정일, 구조화 데이터가 달라지는 원인을 예제로 풉니다. 의미 있는 내용 변경을 기준으로 날짜를 정하고 시간대·캐시·생성 경로를 순서대로 대조합니다.
글 읽기
글 · 웹디자인
공식 출처 링크가 사라졌을 때: 404를 고치고 검수 기록을 남기는 법
출처 링크가 열리지 않을 때 응답 상태, 실제 문서, 인용한 주장을 차례로 확인하는 방법입니다. 주소 교체·인용 축소·삭제를 나누고 변경 기록을 남기는 예제를 제공합니다.
글 읽기
글 · 웹디자인
웹 가이드를 인쇄하면 빠지는 정보: 인쇄용 스타일과 출처 검수
인쇄용 CSS와 페이지 분할을 조정하고 넓은 표, 그림 설명, 출처가 PDF와 종이 출력에 남는지 확인하는 방법을 설명합니다.
글 읽기
글 · 웹디자인
새 창 링크와 파일 다운로드를 누르기 전에 알려야 할 정보
외부 링크와 다운로드에 목적지·새 창 여부·파일 형식·버전을 표시하고 실제 응답과 도착 행동을 확인하는 방법을 정리합니다.
글 읽기
글 · 웹디자인
옵션 안내 창을 닫고 어디로 돌아갈까: 대화상자 초점 검수
옵션 안내 대화상자의 첫 초점, 내부 이동, 닫기 경로와 복귀 위치를 과업별로 정하는 방법을 설명합니다.
글 읽기
글 · 웹디자인
모바일 비교표를 줄이지 않고 읽게 만드는 가로 스크롤과 행 제목
행·열 제목과 단위를 유지하면서 모바일 비교표를 읽게 만드는 가로 스크롤, 제목 셀, 카드 대체 방식의 차이를 설명합니다.
글 읽기
글 · 웹디자인
한글 웹폰트가 늦게 뜰 때: 대체 글꼴과 로딩 전후 화면 확인
한글 웹폰트의 첫 방문·재방문·요청 실패 상태를 나눠 보고, 대체 글꼴에서 줄바꿈과 버튼 이름이 유지되는지 확인합니다.
글 읽기
글 · 웹디자인
모바일에서 큰 이미지를 내려받지 않게: srcset·sizes 검수 순서
srcset 후보 폭, sizes의 표시 폭, DPR을 구분하고 currentSrc와 네트워크 요청으로 실제 선택 파일을 확인하는 방법을 설명합니다.
글 읽기
글 · 웹디자인
이미지 로딩과 화면 밀림
이미지 영역을 예약한 경우와 하지 않은 경우를 직접 비교하고 width·height·aspect-ratio의 역할을 정리합니다. 위치 이동과 실제 CLS 측정도 구분합니다.
글 읽기
글 · 웹디자인
글자와 배경의 대비 계산
불투명한 두 색의 대비를 계산하고 일반 글자와 큰 글자의 기준을 구분합니다. 회색 경계값, 버튼 상태, 반올림 오류를 직접 확인하는 예제를 제공합니다.
글 읽기
글 · 웹디자인
건너뛰기 링크와 랜드마크
반복 헤더와 긴 탐색 묶음을 건너뛰는 링크를 만들고, main·nav 등 의미 있는 랜드마크와 연결해 키보드와 보조기술의 이동 경로를 줄이는 방법을 정리합니다.
글 읽기
글 · 웹디자인
문의폼 오류 요약 연결 설계
문의폼 제출 오류를 페이지 상단의 요약과 각 입력란 가까운 메시지에 함께 표시하고, 오류 링크·초점·설명 관계를 재현 가능하게 확인하는 방법입니다.
글 읽기
글 · 웹디자인
문의 페이지 운영 정보 설계
문의 페이지에서 문의 범위, 회신 방식, 이메일 입력 이유, 개인정보 안내와 정정 경로를 분리하고 모바일·키보드·오류 상태를 검수하는 절차입니다.
글 읽기
글 · 웹디자인
줄 길이와 행간 검수
같은 한글·영문·숫자 문장을 두고 본문 폭, 행간, 문단·제목 간격을 하나씩 바꿉니다. 모바일 정보 손실 검사와 간격 선택을 구분합니다.
글 읽기
글 · 웹디자인
검증 가능한 소개 페이지
소개 페이지에서 운영 주체, 역할, 다루는 범위, 자료 선택, 광고 고지, 정정과 문의 경로를 검증 가능한 정보로 구성하는 방법을 설명합니다.
글 읽기
글 · 웹디자인
모바일 메뉴 흐름 재설계
일반 사이트 메뉴를 disclosure 버튼과 링크 목록으로 구성하고, 닫힘·열림·Escape·초점 복귀·짧은 화면·스크립트 실패를 확인합니다.
글 읽기
글 · 웹디자인
푸터의 책임 경로 설계법
웹사이트 푸터를 운영 정보, 문의·정정, 정책, 광고 고지의 책임 경로로 나누고 링크 목적과 모바일 접근성을 재현 가능하게 검수하는 방법을 정리합니다.
글 읽기
글 · 웹디자인
헤더 내비게이션 우선순위
웹사이트 헤더의 로고, 주요 메뉴, 검색, 문의 행동을 역할별로 분리하고 데스크톱과 모바일에서 링크 목적·초점 순서·메뉴 상태를 검증하는 방법을 정리합니다.
글 읽기
글 · 웹디자인
첫 화면 정체와 목적 구조
처음 방문한 사람이 사이트의 목적과 현재 위치를 이해하도록 소개 한 문장, 페이지별 문맥, 확인 문서의 역할을 나눕니다.
글 읽기웹사이트는 첫인상보다 반복 사용의 편안함이 중요합니다.
좋은 디자인은 한 화면에서 끝나지 않습니다. 사용자가 메뉴를 찾고, 내용을 읽고, 신뢰 정보를 확인하고, 문의까지 가는 흐름이 자연스러워야 합니다.
브랜드, 메뉴, 검색, 문의 버튼이 서로 경쟁하지 않고 사용자의 다음 행동을 돕는지 봅니다.
- 메뉴명 선명도
- 검색 접근성
- 모바일 메뉴 폭
큰 제목과 본문, 버튼, 설명문이 각자의 역할에 맞는 크기와 줄간격을 갖는지 확인합니다.
- 제목 스케일
- 본문 행간
- 고아문자 방지
카드가 많아서 복잡해 보이는지, 여백이 정보를 나누는 역할을 하는지 봅니다.
- 섹션 간격
- 정렬 기준
- 반복 패턴
소개, 정책, 문의, 광고 고지, 개인정보 같은 운영 정보가 하단 정보와 문서에서 자연스럽게 연결되는지 봅니다.
- 운영자 정보
- 정책 링크
- 문의 경로
작은 화면에서 글자 하나만 떨어지는 줄, 버튼 넘침, 과도한 스크롤 압박이 없는지 확인합니다.
- 첫 화면 밀도
- 터치 영역
- 문단 폭
마우스·키보드 상태, 브라우저 아이콘과 사이트 표시 설정, 검색 결과, 오류 없는 콘솔까지 사이트의 완성도를 봅니다.
- 포커스 상태
- 콘솔 오류
- 브랜드 자산
웹디자인은 화면을 보는 순서대로 점검합니다.
웹사이트를 점검할 때는 이 경로가 기준이 됩니다. 화면 분석, 모바일 검수, 하단 정보와 정책 연결까지 같은 순서로 다룹니다.
로고만 보이는 것이 아니라 이 사이트가 무엇을 하는지 첫 문장과 구조에서 이해되는지 봅니다.
사용자가 원하는 페이지로 가기 위해 메뉴명과 버튼을 다시 해석해야 한다면 구조를 줄입니다.
페이지가 예뻐도 문단 폭, 행간, 제목 크기가 맞지 않으면 읽기 피로가 빨리 옵니다.
푸터, 정책, 문의, 작성 원칙이 사이트의 진짜 운영감을 만드는지 확인합니다.
현재 웹사이트를 빠르게 점검합니다.
디자인 평가를 취향으로 끝내지 않기 위한 기준입니다. 체크가 낮다면 색상보다 구조와 가독성을 먼저 봅니다.