글쓰기 가이드

글 쓰는 순서대로 정리했어요. 대부분은 보이는 그대로 쓰는 편집기로 편하게 쓰면 되고, 아래 몇 가지 특별한 것만 정해진 방법을 따르면 돼요. 어렵지 않으니 천천히 따라와요.

0. 이 블로그는 우리 둘의 공간#

이 블로그에 글을 쓸 수 있는 사람은 현지와 용배, 우리 둘뿐이에요(편집 권한이 우리에게만 있거든요). 다른 분들은 편하게 읽으러 와요. 댓글은 GitHub 계정이 있으면 누구나 남길 수 있고요.

1. 관리자 페이지 들어가기#

글은 관리자 페이지에서 써요. GitHub 계정으로 로그인하면 돼요.

  1. 블로그 오른쪽 위 “글쓰기” 버튼을 눌러요. (주소창에 livvy.byb.kr/admin 을 쳐도 돼요.)
  2. “GitHub으로 로그인” 을 누르고, 처음이면 접근 승인(Authorize) 까지 눌러요.

로그인이 안 되거나 권한 오류가 나면 용배에게 말해줘요.

2. 화면 둘러보기#

  • 가운데에 지금까지 쓴 글 목록이 보여요.
  • 위쪽에 “글”, “페이지” 분류가 있는데, 보통은 “글” 을 쓰면 돼요.
  • 목록에서 글을 누르면 고치기, 위쪽 ＋ 버튼으로 새 글을 만들어요.

3. 새 글 시작하기#

화면 위쪽 ＋ 버튼을 누르면 빈 작성 화면이 열려요. 이제 하나씩 채워볼게요.

4. 항목 채우기#

위에서부터 차례로 채우면 돼요.

  • 제목 — 글 제목이에요.
  • 주소(slug) — 글 주소가 되는 값. 영어 소문자·숫자·하이픈(-) 을 권장해요(한글도 되지만 주소가 좀 지저분해져요). 예: hello-world
  • 게시일 — 지금 시각이 자동으로 들어가요. 여행 중 그곳 시각으로 남기고 싶으면 바꿔도 돼요.
  • 저자 — 현지 / 용배 중에 골라요.
  • 카테고리 — 잡담 / 공부 / 같이 놀기 중 하나. 새 카테고리가 필요하면 용배에게 말해줘요(직접 추가는 안 돼요).
  • 태그 — 여러 개면 한 줄에 하나씩 적어요.
  • 요약 — 목록과 공유 미리보기에 나오는 짧은 소개예요(안 써도 돼요).
  • 초안 — 새 글은 처음엔 비공개(초안) 예요. 다 쓰고 초안 체크를 풀면 그때 공개돼요.

5. 본문 쓰기#

본문은 대부분 편집기로 자유롭게 쓰면 돼요. 아래 몇 가지만 정해진 방법이 있는데, 편집기엔 글자 그대로 보여도 게시하면 예쁘게 바뀌니 걱정 말아요.

한자 위에 읽는 법 (후리가나 · 병음)#

{한자|읽기} 처럼 쓰면 글자 위에 작게 읽는 법이 올라가요.

  • 일본어 — {漢字|かんじ} → 漢字(かんじ)
  • 중국어 — {中文|zhōngwén} → 中文(zhōngwén)

가운데 세로 막대 | 는 키보드에서 Shift + ₩(\) 키로 쳐요.

이미지 넣기#

편집기 툴바의 이미지 버튼(Browse) 으로 파일을 고르면 자동으로 붙고, 게시할 때 알아서 가볍게 최적화돼요. (끌어다 놓기도 되지만 Browse 가 제일 안정적이에요.)

유튜브 영상 넣기#

유튜브 링크만 한 줄에 딱 붙여넣으면 자동으로 재생되는 영상이 돼요. 앞뒤에 다른 글자 없이 링크만 있으면 됩니다.

https://youtu.be/영상아이디
  • youtu.be/..., youtube.com/watch?v=... 둘 다 돼요
  • 처음엔 미리보기 그림만 보이고, 누르면 그 자리에서 재생돼요(페이지가 안 무거워요)
  • 문장 속에 링크를 넣으면 영상이 아니라 그냥 파란 글자 링크로 남아요. 영상으로 만들고 싶으면 링크를 한 줄에 혼자 두세요.

실제로는 이렇게 보여요(눌러서 재생) 👇

트위터(X)·지도 넣기#

유튜브와 똑같이 링크만 한 줄에 두면 돼요.

  • 트위터/X: 트윗 주소(.../status/숫자)를 한 줄에 붙이면 트윗 카드로 보여요.
  • 구글 지도: 지도에서 장소를 연 뒤 브라우저 주소창의 전체 주소를 복사해 붙이세요(주소 안에 @위도,경도가 있어야 해요). 또는 구글 지도 공유 → 지도 삽입에서 나오는 주소도 돼요.
    • ⚠️ maps.app.goo.gl/... 같은 짧은 공유 링크는 좌표가 없어서 지도로 안 바뀌어요. 주소창의 긴 주소를 쓰세요.
  • 실행 코드(CodePen·StackBlitz): CodePen이나 StackBlitz 링크를 한 줄에 붙이면 바로 실행되는 예제로 들어가요(개발 글용).

실제 예시들이에요 👇

트윗:

지도:

실행 코드(StackBlitz):

코드 넣기 (기술 글용)#

코드는 백틱을 세 개 써서 위아래를 감싸면 색이 입혀지고 복사 버튼도 생겨요. 첫 줄에 title="파일이름" 을 붙이면 파일명 탭까지 나와요.

예시.js
const hello = "world";
console.log(hello);

문장 속 짧은 코드는 백틱 하나로 감싸요: `SELECT * FROM users` → SELECT * FROM users

강조 박스 (콜아웃)#

특별히 눈에 띄게 하고 싶은 말은 강조 박스로 만들 수 있어요. 인용문(>) 첫 줄에 [!종류]를 적으면 돼요.

> [!NOTE]
> 참고할 내용이에요.
  • 종류: NOTE(참고·파랑) · TIP(팁·초록) · IMPORTANT(중요·보라) · WARNING(주의·노랑) · CAUTION(경고·빨강)

실제로는 이렇게 보여요 👇

참고

참고할 내용이에요.

주의

이렇게 주의도 줄 수 있어요.

각주#

문장 뒤에 [^1]을 붙이고, 아래 어딘가에 [^1]: 설명을 적으면 각주가 돼요. 번호를 누르면 설명으로, 설명에서 화살표를 누르면 본문으로 돌아와요.

로마는 하루아침에 이루어지지 않았다[^1].


[^1]: 오래 걸렸다는 뜻이에요.

실제로는 이렇게 보여요: 로마는 하루아침에 이루어지지 않았다1. (숫자를 누르면 페이지 맨 아래 각주로 가요)

언어 공부에 도움되는 것들#

  • 정답 가리기: ||가릴 내용|| 처럼 감싸면 눌러야 보이는 가림이 돼요. 뜻이나 번역을 먼저 스스로 떠올려보게 할 때 좋아요. 
    「ありがとう」의 뜻은 ||고맙습니다|| 예요.
    실제로는 이렇게 보여요 → 「ありがとう」의 뜻은 고맙습니다 (눌러보세요)
  • 읽어주기: 글을 볼 때 문장을 드래그해서 선택하면 작은 🔊 읽어주기 버튼이 떠요. 누르면 음성으로 읽어줍니다(한/일/중/프/영 자동 감지).
    • 목소리는 보는 사람 기기에 깔린 것에 따라 달라요. 짧은 무악센트 프랑스어는 영어로 읽힐 수도 있어요.

연재로 묶기 (여러 편 글)#

여러 편으로 이어지는 글은 연재로 묶을 수 있어요(예: “골절일기 1편, 2편…”). 글 정보에서:

  • 연재 이름: 묶고 싶은 글마다 같은 이름을 적으면 돼요.
  • 연재 순서(숫자): 1, 2, 3… 으로 순서를 정해요(비우면 게시일 순).

그러면 글 위쪽에 연재 목록이 떠서 편끼리 오갈 수 있어요.

6. 게시하기#

초안 체크를 풀고 저장하면 끝이에요! 사이트에 반영되기까지 1~2분 걸려요. 그동안 관리자 화면 위쪽에 진행 상태(게시 중… → 게시 완료!) 가 떠요. 완료가 뜨면 블로그에서 확인하면 돼요. 수고했어요 🎉

각주#

  1. 오래 걸렸다는 뜻이에요. ↩

© 2017–2026 livvy & ybbarng · RSS

Claude Code로 다시 만들었습니다