블로그, Blog | HANSANHHA

좋아하는 것들을 모아두거나 기록하는 공간

시작일시: 2025-07-01T04:42:20Z

상태: 진행 중

주소: https://hansanhha.github.io

업데이트:

생각, 이미지 등 이것저것들을 남겨두고 싶어서 블로그를 만들었다.

시작일시를 2025년 7월 1일로 해뒀지만 사실 이것보다 더 이전부터 시작했다.

맨 처음에 시작한 날짜를 알 수 없어서 한 번 삭제했다가 다시 만든 깃허브 저장소 생성일을 기준으로 삼았다.

블로그에 작성된 게시글은 프로젝트, 프로그래밍, 일상, 아카이브, 해맞이 중 하나의 카테고리를 가진다.

카테고리는 게시글을 담아두는 폴더이자 인덱스이다. 게시글을 분류하는 용도로 사용되며 하위 카테고리를 가질 수도 있다.

각 카테고리의 목적과 성격은 아래와 같다.

프로젝트

관심있는 주제, 만들고 싶은 것 또는 주기적으로 반복하는 공통된 행동을 프로젝트로 정의하고 운영한다. 단순한 생각이나 행동에 이름과 목적을 덧붙이고 실행과 기록을 통해 의미 있는 단위로 만들어간다. 프로젝트는 생각에서 실행으로 이어지고, 그 과정과 결과가 축적되는 선형적인 흐름을 가지며 흩어진 행위에 견고한 의미를 부여한다.

블로그 또한 하나의 프로젝트에 속한다.

프로젝트를 설명하는 양식은 다음과 같다.

간단한 소개

시작일시

상태

주소

업데이트

--- 구분선

프로젝트에 대한 내용

시작일시는 년, 월, 일, 요일, 시간까지 표시하고, 상태는 진행 중/일시 중단/종료 중 하나로 표시한다. 일시 중단과 종료 상태인 경우엔 그 시점을 명시한다.

일시 중단은 언젠가 다시 할 가능성이 있을 때, 종료는 두 번 다시 하지 않을 때를 의미한다.

주소는 인터넷 웹 주소 또는 실제 공간 주소를 나타낸다.

업데이트는 깃허브 서버에 푸시된 마지막 커밋 일시를 표시하여 가장 최근의 블로그 업데이트 시점을 나타낸다. 다른 프로젝트의 소개글에서는 제외된다.

프로그래밍

프로그래밍과 컴퓨터 과학에 대해 학습한 개념이나 직접 경험한 내용을 작성한다.

단순한 사용법부터 특정 도구에 대한 원리와 동작 방식까지 폭넓게 다루며, 구현한 것과 실험한 내용을 남기고자 한다.

일상

일상 속에서 경험한 것들과 떠오르는 생각들을 기록하는 공간이다. 주로 월초 또는 월말에 업로드한다.

아카이브

시간이 지나며 모아온 관심사와 자료들을 한 곳에 담아둔 곳으로 기억에 남기고 싶은 것들을 자료의 형태와 주제별로 구성해놓았다.

해맞이

매월 초, 새로운 한 달의 시작을 맞이하기 위해 해를 보러 가는 작은 프로젝트다.

지난 시간을 돌아보며 앞으로의 시간을 생각한다. 해맞이에 대한 소개

‘단순한’ 인터페이스에 대한 설명

블로그의 구조와 게시글을 단순하고 직관적으로 표시한다.

제목

유틸리티 (인터페이스, 배경 색상, 선호하는 언어, 인덱스 페이지로 이동)

콘텐츠
├─ 홈페이지: 블로그에 작성된 모든 게시글을 나열하는 페이지. 작성일 기준 내림차순으로 정렬한다.
├─ 인덱스: 특정 카테고리에 속한 글들을 작성일 기준 내림차순으로 정렬하는 페이지.
├─ 게시글: 선택한 글의 내용을 나타내는 페이지.
└─ 유틸리티: 페이지 찾을 수 없음이나 오류를 표시하는 페이지

제목은 현재 페이지에 대한 제목이다. 홈페이지인 경우 ‘한산하 HANSANHHA’로 표시된다.

홈페이지에 나열된 게시글들은 가장 최근에 수정된 일자를 기준으로 내림차순 정렬된다. 수정되지 않은 게시글은 최초 작성일을 기준으로 한다.

그리고 각 게시글의 제목 옆에 카테고리가 표시된다. (하위 카테고리가 있는 경우 그것을 표기함)

‘인덱스 페이지로 이동’이라는 버튼은 현재 페이지의 상위 카테고리 페이지로 이동한다.

모든 인터페이스의 공통적인 디자인

8px 간격 시스템 사용
글꼴: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif
기본 글꼴 크기: 16px, 행간: 24px

‘상세한’ 인터페이스에 대한 설명

블로그에 대한 정보, 카테고리와 게시글에 대한 정보를 구조적으로 구성한다.

홈 버튼과 검색창

유틸리티: 블로그에 대한 정보와 기능을 담은 구역 (접속 환경, 인터페이스, 글꼴 크기, 배경 색상, 선호하는 언어 등)

메뉴: 블로그 메뉴를 표시하는 구역 (프로젝트, 프로그래밍, 일상, 아카이브, 해맞이)

콘텐츠
├─ 홈페이지: 가장 최근에 작성한 글 10개를 표시하는 페이지. 한글과 영문에 따라 다르게 표시될 수 있다
├─ 인덱스: 특정 카테고리에 속한 글들을 작성일 기준 내림차순으로 정렬하는 페이지. '/카테고리/' 형태로 페이지의 계층을 표시하며 계층의 링크를 클릭하여 이동할 수 있다. 선택적으로 제목이 나타난다.
├─ 게시글: 선택한 글의 내용을 나타내는 페이지. 현재 페이지에 대한 경로를 '/카테고리/페이지 | 작성일' 형태로 표시하며 페이지의 이름과 작성일은 링크가 아닌 일반 문자열로 취급된다. 선택적으로 제목이 나타난다.
└─ 유틸리티: 검색 결과나 페이지 찾을 수 없음을 표시하는 페이지

기타 정보: 블로그에 표시할 공통된 정보나 외부 링크

콘텐츠를 감싸고 있는 상단과 하단의 영역은 고정적으로 유지되며 콘텐츠의 내용만 동적으로 변경된다.

게시글 제목, 내용 등을 기반으로 한 검색을 지원한다. 글꼴 크기 조절은 콘텐츠 영역의 글꼴 크기에만 영향을 미친다.

인덱스 페이지와 게시글 페이지에서 현재 페이지의 경로를 계층적으로 나타낸다. 링크를 통해 특정 페이지로 이동할 수 있다.

또한 아카이브나 해맞이 카테고리의 일부 게시글은 ‘이전 페이지’, ‘다음 페이지’ 버튼을 통해 순차적으로 페이지를 옮겨 다닐 수 있다.

영감을 준 페이지

catern

위에서 아래로 자연스럽게 이어지는 수직적인 흐름과 불필요한 장식을 덜어낸 투박하고 직관적인 인터페이스를 참고하였다.

catern