결과물 소개와 만드는 기록의 자리를 나눴다

처음 보는 사람에게 무엇부터 보여 줄까

메인과 글 목록을 정리한 다음에는 프로젝트 상세 페이지를 바꿨다. 10월 3일에 프로젝트 페이지를 결과물부터 둘러보는 쇼룸으로 만들었다.

대표 화면과 여러 캡처를 넘겨 볼 수 있게 하고, 그 아래에 기능과 만든 방법을 설명하는 본문을 놓았다. 이 블로그의 소개도 그 구조에 맞춰 다시 썼다.

방문자는 여러 화면을 먼저 둘러본 뒤 설명을 읽는다.

소개에서 작업기록으로 이어지게 했다

프로젝트 끝에는 관련 작업기록 카드를 두고, 전체 기록을 볼 때는 그 프로젝트의 글만 걸러 보게 했다. 처음 온 사람은 결과물을 먼저 보고, 궁금하면 만드는 과정까지 따라갈 수 있다.

본문을 읽는 도구도 함께 바꿨다. 그림 아래에는 설명을 붙일 수 있게 했고, 넓은 화면에는 목차가 따라오게 했다. 막힌 곳 바로 뒤에 해결 내용을 적으면 두 상자를 수리 접수증 모양으로 묶었다.

그림 설명은 글을 쓸 때 그림 뒤에 따옴표로 붙인다. 주소는 예시다.

![프로젝트의 첫 화면](/images/example/screen.jpg "화살표로 다음 화면을 둘러본다.")

대괄호 안은 그림의 대체 설명이고, 따옴표 안은 그림 아래에 표시할 문장이다. 무엇을 찍었는지와 어디를 보면 되는지를 나눠 적을 수 있다.

캡처를 넣으니 글의 위치도 신경 써야 했다

- <img src="/images/example/screen.jpg" alt="첫 화면">
+ <img src="/images/example/screen.jpg" alt="첫 화면" width="1266" height="712">