개요
- 이 문서는 사이트를 읽고 이용하는 데 적용 중인 화면 기준을 정리한 것임.
- 독자가 화면의 동작을 예측할 수 있도록 기준을 공개하는 것이 목적임.
- 기준은 운영 중 바뀔 수 있으며, 아래 내용은 작성일 시점의 현황임.
화면 구성
- 상단 띠: 블로그 제목, 메뉴, 라이트·다크 전환 버튼으로 구성됨.
- 본문: 홈, 아티클 목록, 지식 지도, 글 본문이 이 영역에 표시됨.
- 하단 독: 이전 단계로 이동하는 버튼, 현재 화면에 맞는 탐색 버튼, 검색 버튼으로 구성됨.
- 스크롤을 내리면 상단 띠와 하단 독이 숨고, 올리면 다시 나타남.
- 글 제목은 표지에 한 번만 표시하며 본문에서 반복하지 않음.
읽기 환경
- 글 본문
- 줄 길이가 지나치게 길어지지 않도록 본문 폭을 제한함.
- 긴 코드와 표는 본문 폭을 넘기지 않고 안에서 가로로 스크롤됨.
- 긴 코드는 접어서 볼 수 있는 카드로 묶는 것을 원칙으로 함.
- 글에 딸린 정보
- 출처 및 참고자료와 관련 아티클은 하단 독의 버튼으로 열 수 있음.
- 목차는 넓은 화면에서 본문 오른쪽에 표시됨.
- 화면 폭
- 320px 폭의 화면까지 가로 넘침 없이 보이도록 구성함.
- 좁은 화면에서는 한 줄에 글 하나를 배치함.
테마
- 처음 방문하면 사용 중인 기기의 라이트·다크 설정을 따름.
- 상단 띠의 전환 버튼으로 직접 고를 수 있으며, 선택한 값은 이후 방문에도 유지됨.
- 직접 고르지 않은 경우에는 기기 설정이 바뀌면 화면도 함께 바뀜.
- 글 표지는 테마마다 별도로 만든 이미지를 사용함.
조작 방식
- 검색: 하단 독의 검색 버튼 또는 키보드의
/키로 열고,Esc키로 닫음. - 스크롤: 사이트가 스크롤 입력을 가로채거나 잠그지 않음. 화면 전환 효과는 스크롤 위치를 읽기만 하여 구성함.
- 가로로 넘기는 목록: 목록을 선택하면 넘길 수 있는 방향에 화살표가 잠시 나타남. 넘길 공간이 없으면 표시하지 않음.
- 선택 상태: 선택한 메뉴, 탭, 칩은 배경 음영으로 구분함.
- 움직임 줄이기: 기기에서 움직임 줄이기를 켜 두면 일부 애니메이션과 자동 이동 효과를 멈추도록 구성함.
브라우저에 저장되는 값
- 저장 목록
- 테마 선택값
- 읽은 글 표시(본문을 어느 정도 읽은 글의 주소 일부)
- 홈 추천 글의 직전 분류
- 이 값들은 이용자의 브라우저 안에만 저장되며 서버로 전송하지 않음.
- 브라우저의 사이트 데이터를 삭제하면 함께 지워짐.
- 방문 통계와 광고 관련 정보는 개인정보처리방침에 따로 정리함.
접근성
- 색은 본문과 배경의 대비를 확보하는 방향으로 정했으며, 라이트·다크 모두에 적용함.
- 아이콘 버튼에는 이름표를 달았으며, 검색 열기·닫기 등 일부 조작은 키보드로 할 수 있음.
- 별도의 접근성 인증은 받지 않았으며, 스크린 리더 등 보조기기를 이용한 전체 점검도 진행하지 않음.
- 이용 중 불편한 점은 블로그 소개의 연락처로 알려 주면 확인함.
광고 배치
- 광고는 승인 및 설정이 끝난 경우에만 표시함.
- 표시할 때는
광고문구로 본문과 구분함. - 상단 띠와 하단 독에 겹치지 않는 자리, 첫 화면을 제외한 자리에 두는 것을 원칙으로 함.
- 안내 문서 페이지(블로그 소개, 개인정보처리방침, AI 활용방침, 이 문서)에는 광고를 표시하지 않음.
문서 변경
- 화면 기준이 바뀌면 이 문서를 갱신하고 아래 날짜를 고침.
- 최초 작성일: 2026년 11월 5일
