공개 글
웹디자인 글
헤더, 메뉴, 타이포그래피, 푸터, 소개와 문의 화면의 접근성과 신뢰 정보를 점검합니다.
가장 최근 글 · 웹디자인
공식 출처 링크가 사라졌을 때: 404를 고치고 검수 기록을 남기는 법
링크 존재만 검사하지 않고 최종 URL·응답 상태·문서 제목·대체 근거를 함께 대조합니다. detailry 전수 검수에서 찾은 실제 끊긴 출처를 수정한 기록을 공개합니다.
글 읽기
글 · 웹디자인
웹 가이드를 인쇄하면 빠지는 정보: 인쇄용 스타일과 출처 검수
화면과 인쇄 상태의 스타일·페이지 분할·표·그림·출처를 연결해 검수합니다. 설명용 기록표로 PDF 저장과 종이 출력, 문서 정보·버전의 유지 여부를 구분합니다.
글 읽기
글 · 웹디자인
새 창 링크와 파일 다운로드를 누르기 전에 알려야 할 정보
링크 이름·최종 도착지·새 창·파일 형식과 버전을 연결해 검수합니다. 설명용 장부로 다운로드 속성과 실제 동작, 문서 내용·접근 조건을 구분해 누르기 전의 기대가 유지되는지 확인합니다.
글 읽기
글 · 웹디자인
옵션 안내 창을 닫고 어디로 돌아갈까: 대화상자 초점 검수
대화상자 열기·내부 이동·닫기·초점 복귀를 한 과업으로 검수합니다. 가상 구성 안내 창의 상태 변화와 복귀 위치, 작은 화면·확대 조건을 나누어 닫힌 뒤에도 문맥이 이어지는지 확인합니다.
글 읽기
글 · 웹디자인
모바일 비교표를 줄이지 않고 읽게 만드는 가로 스크롤과 행 제목
비교표의 행·열 제목, 단위와 자료 상태를 구분하고 모바일에서 표 영역 안 가로 이동과 제목 관계를 검수합니다. 설명용 구성표와 기록 양식으로 작은 화면에서도 같은 비교 의미가 남는지 확인합니다.
글 읽기
글 · 웹디자인
한글 웹폰트가 늦게 뜰 때: 대체 글꼴과 로딩 전후 화면 확인
한글 웹폰트의 준비 전·교체 후·요청 실패 상태를 나누고 대체 글꼴, 실제 표시 문자, 제목 줄 수와 버튼 이름을 검수합니다. 설명용 문장과 기록표로 완성 화면에서 놓치는 문제를 확인합니다.
글 읽기
글 · 웹디자인
모바일에서 큰 이미지를 내려받지 않게: srcset·sizes 검수 순서
이미지의 원본 폭·표시 폭·뷰포트 폭을 구분하고 srcset·sizes 후보, 실제 선택 URL, 읽기 품질을 함께 검수하는 방법입니다. 설명용 코드와 기록표로 흔한 오해를 확인합니다.
글 읽기
글 · 웹디자인
이미지 로딩과 화면 밀림
이미지 영역을 예약한 경우와 하지 않은 경우를 직접 비교하고 width·height·aspect-ratio의 역할을 정리합니다. 위치 이동과 실제 CLS 측정도 구분합니다.
글 읽기
글 · 웹디자인
글자와 배경의 대비 계산
불투명한 두 색의 대비를 계산하고 일반 글자와 큰 글자의 기준을 구분합니다. 회색 경계값, 버튼 상태, 반올림 오류를 직접 확인하는 예제를 제공합니다.
글 읽기
글 · 웹디자인
건너뛰기 링크와 랜드마크
반복 헤더와 긴 탐색 묶음을 건너뛰는 링크를 만들고, main·nav 등 의미 있는 랜드마크와 연결해 키보드와 보조기술의 이동 경로를 줄이는 방법을 정리합니다.
글 읽기
글 · 웹디자인
문의폼 오류 요약 연결 설계
문의폼 제출 오류를 페이지 상단의 요약과 각 입력란 가까운 메시지에 함께 표시하고, 오류 링크·초점·설명 관계를 재현 가능하게 확인하는 방법입니다.
글 읽기
글 · 웹디자인
문의 페이지 운영 정보 설계
문의 페이지에서 문의 범위, 회신 방식, 이메일 입력 이유, 개인정보 안내와 정정 경로를 분리하고 모바일·키보드·오류 상태를 검수하는 절차입니다.
글 읽기
글 · 웹디자인
줄 길이와 행간 검수
한글 웹문서에서 글자 크기만 조정하지 않고 줄 길이, 행간, 문단 간격, 강조 밀도와 리플로우를 자체 예제로 점검하는 재현 절차입니다.
글 읽기
글 · 웹디자인
검증 가능한 소개 페이지
소개 페이지에서 운영 주체, 역할, 다루는 범위, 자료 선택, 광고 고지, 정정과 문의 경로를 검증 가능한 정보로 구성하는 방법을 설명합니다.
글 읽기
글 · 웹디자인
모바일 메뉴 흐름 재설계
데스크톱 메뉴를 그대로 접지 않고 모바일 과업 순서, 그룹, 펼침 상태, 초점, 닫기 동작과 터치 영역을 자체 예제로 재설계하고 검수합니다.
글 읽기
글 · 웹디자인
푸터의 책임 경로 설계법
웹사이트 푸터를 운영 정보, 문의·정정, 정책, 광고 고지의 책임 경로로 나누고 링크 목적과 모바일 접근성을 재현 가능하게 검수하는 방법을 정리합니다.
글 읽기
글 · 웹디자인
헤더 내비게이션 우선순위
웹사이트 헤더의 로고, 주요 메뉴, 검색, 문의 행동을 역할별로 분리하고 데스크톱과 모바일에서 링크 목적·초점 순서·메뉴 상태를 검증하는 방법을 정리합니다.
글 읽기
글 · 웹디자인
첫 화면 정체와 목적 구조
웹사이트 첫 화면의 로고, 헤더, 소개 문장, 근거 링크와 주요 행동을 자체 예제로 재구성하고 화면 폭·키보드·도착 경로 기준으로 검수합니다.
글 읽기웹사이트는 첫인상보다 반복 사용의 편안함이 중요합니다.
좋은 디자인은 한 화면에서 끝나지 않습니다. 사용자가 메뉴를 찾고, 내용을 읽고, 신뢰 정보를 확인하고, 문의까지 가는 흐름이 자연스러워야 합니다.
브랜드, 메뉴, 검색, 문의 버튼이 서로 경쟁하지 않고 사용자의 다음 행동을 돕는지 봅니다.
- 메뉴명 선명도
- 검색 접근성
- 모바일 메뉴 폭
큰 제목과 본문, 버튼, 설명문이 각자의 역할에 맞는 크기와 줄간격을 갖는지 확인합니다.
- 제목 스케일
- 본문 행간
- 고아문자 방지
카드가 많아서 복잡해 보이는지, 여백이 정보를 나누는 역할을 하는지 봅니다.
- 섹션 간격
- 정렬 기준
- 반복 패턴
소개, 정책, 문의, 광고 고지, 개인정보 같은 운영 정보가 하단 정보와 문서에서 자연스럽게 연결되는지 봅니다.
- 운영자 정보
- 정책 링크
- 문의 경로
작은 화면에서 글자 하나만 떨어지는 줄, 버튼 넘침, 과도한 스크롤 압박이 없는지 확인합니다.
- 첫 화면 밀도
- 터치 영역
- 문단 폭
마우스·키보드 상태, 브라우저 아이콘과 사이트 표시 설정, 검색 결과, 오류 없는 콘솔까지 사이트의 완성도를 봅니다.
- 포커스 상태
- 콘솔 오류
- 브랜드 자산
웹디자인은 화면을 보는 순서대로 점검합니다.
웹사이트를 점검할 때는 이 경로가 기준이 됩니다. 화면 분석, 모바일 검수, 하단 정보와 정책 연결까지 같은 순서로 다룹니다.
로고만 보이는 것이 아니라 이 사이트가 무엇을 하는지 첫 문장과 구조에서 이해되는지 봅니다.
사용자가 원하는 페이지로 가기 위해 메뉴명과 버튼을 다시 해석해야 한다면 구조를 줄입니다.
페이지가 예뻐도 문단 폭, 행간, 제목 크기가 맞지 않으면 읽기 피로가 빨리 옵니다.
푸터, 정책, 문의, 작성 원칙이 사이트의 진짜 운영감을 만드는지 확인합니다.
현재 웹사이트를 빠르게 점검합니다.
디자인 평가를 취향으로 끝내지 않기 위한 기준입니다. 체크가 낮다면 색상보다 구조와 가독성을 먼저 봅니다.