읽기 좋은 기술 글의 구성
표, 수식, 코드와 다이어그램을 담은 문법 샘플.
문장과 근거
글의 구조에 마우스를 올리거나 클릭하면 짧은 설명과 관련 글을 확인할 수 있습니다.
하나의 원고가 서로 다른 읽기 환경에서도 같은 뜻을 전달하도록. 이 글은 블로그의 읽기 환경을 확인하는 중립적인 문법 샘플입니다. 실제 서비스 운영이나 개인의 성과를 설명하지 않습니다.
짧은 문단에는 하나의 생각을 담습니다. 중요한 말은 굵게, 용어나 식별자는 inline code로 구분합니다. 표와 취소선 같은 문법은 GitHub Flavored Markdown에 정의되어 있습니다.1
설명을 줄이기 전에, 설명 사이의 연결이 남아 있는지 확인합니다.
비교를 담는 표
다음은 렌더링을 확인하기 위한 편집용 예시입니다.
| 표현 | 쓰임 | 독자가 확인할 것 |
|---|---|---|
| 문장 | 한 가지 생각 설명 | 맥락과 조건 |
| 표 | 같은 기준으로 비교 | 열의 기준 |
| 그림 | 관계와 순서 표현 | 방향과 연결 |
코드로 설명하기
입력과 출력을 가까이 두면 예제를 따라 읽기 쉽습니다. 아래 코드는 화면 표시를 위한 작은 예제입니다. 두 번째 줄은 강조됩니다.
const numbers = [1, 2, 3];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); // [2, 4, 6]- 입력을 정합니다.
- 변환을 적용합니다.
- 출력과 예상을 비교합니다.
수식과 흐름
인라인 수식 는 문장의 일부로 읽습니다. 독립적인 수식은 별도 줄에 놓습니다.
이 수식은 값들의 산술평균을 나타냅니다. 아래 그림은 초안에서 검토를 거쳐 완성본으로 이어지는 흐름을 보여 줍니다.
이미지와 캡션
이미지의 설명은 캡션으로, 이미지를 보지 못할 때 필요한 내용은 대체 텍스트로 전달합니다.
마무리
- 문장과 예제가 같은 내용을 설명하는지 확인합니다.
- 작은 화면에서도 표와 코드가 읽히는지 확인합니다.
- 각주에서 본문으로 돌아올 수 있는지 확인합니다.
각주
-
GitHub Flavored Markdown Spec — 표와 취소선 등 확장 문법의 정의. ↩
문단·표·그림 같은 요소를 독자가 따라갈 수 있는 순서로 연결하는 방식입니다. 각 요소의 역할과 요소 사이의 관계를 함께 살펴봅니다.
용어 페이지 읽기