삐뚠어깨

블로그를 두 번 만들었습니다 — AI와 함께

Wed, 17 Jun 2026 00:00:00 GMT

이 블로그의 첫 글로 무얼 쓸까 한참 고민하다가, 결국 가장 가까운 이야기부터 꺼내기로 했습니다. 바로 이 블로그 자체를 만든 과정입니다.

고백하자면, 이 블로그는 한 번에 만들어지지 않았습니다. 두 번 만들었거든요. 그리고 그 두 번 사이에 제가 AI와 일하는 방식에 대해 배운 게 꽤 많습니다.

1막: 직접 다 만들기

처음엔 욕심을 부렸습니다. "내 블로그인데, 바닥부터 내 손으로 만들어야지."

그래서 Astro 기반의 모노레포로 시작했습니다. pnpm 워크스페이스를 깔고, 공통 컴포넌트를 모아두는 packages/shared를 만들고, 그 아래에 실제 사이트(sites/crooked-shoulders)를 두는 구조였죠. 레이아웃(BaseLayout), 헤더와 푸터, 날짜 포맷 컴포넌트, RSS 피드, 콘텐츠 컬렉션 설정까지 — 블로그의 뼈대를 직접 짰습니다.

여기서 AI(Claude Code)의 힘을 처음 실감했습니다. 평소 같으면 문서를 뒤지며 며칠 걸렸을 골격이, AI와 함께하니 반나절 만에 섰습니다. "Astro로 블로그 레이아웃 잡아줘", "RSS 피드 추가해줘" 같은 요청이 곧바로 동작하는 코드가 되어 돌아왔으니까요.

그 기세로 브랜드도 정했습니다. pinehill network에서 pinehill studio로, 이름도 몇 번 바꿨고 — 심지어 "삐뚤어깨"라고 잘못 적었다가 "삐뚠어깨"로 고치는 커밋까지 남겼습니다. (이름 짓기가 제일 어렵다는 게 괜한 말이 아니더군요.)

멈춰 선 지점

골격이 섰으니 이제 글을 쓰면 되겠지, 싶었습니다. 그런데 막상 앉아 보니 정작 글 쓸 환경이 한참 모자랐습니다.

검색 기능, 목차, 코드 하이라이트, 다크 모드, 이미지 최적화, OG 태그, 태그·카테고리 페이지, 페이지 전환 애니메이션… 블로그라면 당연히 있어야 할 것들이 전부 "아직 안 만든 것" 목록에 있었습니다.

정신을 차려보니 저는 글이 아니라 배관 공사에 시간을 쏟고 있었습니다. 정작 쓰고 싶은 이야기는 한 줄도 못 썼는데 말이죠.

2막: 갈아엎기

그래서 결정을 바꿨습니다. 바닥부터 만들지 말고, 잘 만든 것 위에 서자.

선택한 건 Fuwari라는 Astro 기반 오픈소스 블로그 템플릿이었습니다. 제가 "있으면 좋겠다"고 생각한 기능이 이미 거의 다 들어 있더군요.

마이그레이션도 AI에게 맡겼습니다. "내 모노레포를 들어내고 Fuwari로 교체하되, 한국어 설정과 브랜드(삐뚠어깨)는 유지해줘." 그렇게 한 번의 큰 수술로 packages/shared와 sites/*를 통째로 삭제하고 Fuwari를 입혔습니다.

:::tip 이런 "큰 수술"을 AI에게 맡길 때 가장 든든한 건 git입니다. 커밋 단위로 끊어두면, AI가 모노레포를 통째로 갈아엎어도 언제든 되돌릴 수 있으니까요. 안전벨트를 매고 과감하게 운전하는 셈입니다. :::

지금 이 블로그의 구성

결국 지금 이 글이 올라가 있는 블로그는 이렇게 돌아갑니다.

Astro 5 — 정적 사이트 생성기 (뼈대)
Tailwind CSS — 스타일링
Svelte 5 — 검색·다크모드 토글 같은 인터랙션
Pagefind — 빌드 시점에 생성되는 정적 검색
Expressive Code — 코드 블록 하이라이트
RSS · 사이트맵 · KaTeX · Admonition — 블로그에 필요한 기본기
Biome — 포맷·린트, pnpm — 패키지 관리
배포는 Vercel

그리고 글쓰기는 이제 명령어 한 줄로 시작합니다.

# 새 글 한 장 만들기
pnpm new-post my-first-post

# 빌드 (정적 검색 색인까지 함께 생성)
pnpm build   # astro build && pagefind --site dist

마크다운만 쓰면 나머지는 알아서 처리됩니다. 1막에서 그렇게 만들고 싶던 환경이, 2막에서는 그냥 주어진 것이 되었습니다.

AI와 일하며 배운 것

블로그 하나 만들면서 거창한 교훈을 얻었다고 하면 좀 민망하지만, 그래도 몇 가지는 적어둘 만합니다.

AI는 0→1을 압도적으로 빠르게 해준다. 어찌나 빠른지, "직접 만들기"의 진짜 비용을 착각하게 만들 정도입니다.
그래서 더더욱 "만들 것 vs 가져다 쓸 것"의 판단이 중요해진다. AI가 순식간에 만들어줘도, 그걸 끝까지 유지보수하는 건 결국 내 몫이니까요.
좋은 템플릿은 수백 개의 이미 잘 내려진 결정이다. 그 위에 서면, 나는 정작 중요한 것 — 글 — 에 집중할 수 있습니다.
사람의 일과 AI의 일은 다르다. '무엇을, 왜'(이름, 톤, 주제, 그리고 무엇을 버릴지)는 사람의 몫이고, '어떻게'를 빠르게 구현하는 건 AI가 잘합니다.

직접 다 만들어 본 1막이 있었기에, 2막에서 "갈아엎자"는 결정을 후회 없이 내릴 수 있었던 것 같습니다. 한 번 만들어 봤으니, 무엇을 포기하는지 알고 포기한 거니까요.

앞으로 쓸 것들

이 블로그의 이름 삐뚠어깨는 그대로 두지만, 다루는 이야기는 넓혀가려 합니다. 대략 이런 것들을 쓸 생각입니다.

AI를 활용한 개발 — 오늘 같은, 실제로 만들어 본 이야기
1인 앱 개발과 창업 — 작게 만들어 세상에 내놓기까지
소프트웨어 개발 기술과 업무 생산성 — 아이패드 활용을 포함해서
주식과 경제 — 돈에 대한 공부와 기록
아파트 분양부터 입주까지 — 곧 시작될, 아주 현실적인 시리즈

첫 글이 "블로그 만든 이야기"라니 조금 메타하지만, 시작으로는 나쁘지 않은 것 같습니다. 두 번 만든 블로그에서, 이제 진짜 쓰고 싶었던 이야기들을 시작해 보겠습니다.

Markdown Extended Features

Wed, 01 May 2024 00:00:00 GMT

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

::github{repo="Fabrizz/MMM-OnSpotify"}

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

::github{repo="saicaca/fuwari"}

Admonitions

Following types of admonitions are supported: note tip important warning caution

:::note Highlights information that users should take into account, even when skimming. :::

:::tip Optional information to help a user be more successful. :::

:::important Crucial information necessary for users to succeed. :::

:::warning Critical content demanding immediate user attention due to potential risks. :::

:::caution Negative potential consequences of an action. :::

Basic Syntax

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

Custom Titles

The title of the admonition can be customized.

:::note[MY CUSTOM TITLE] This is a note with a custom title. :::

:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::

GitHub Syntax

[!TIP] The GitHub syntax is also supported.

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.

Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

The content :spoiler[is hidden ayyy]!

The content :spoiler[is hidden **ayyy**]!

Expressive Code Example

Wed, 10 Apr 2024 00:00:00 GMT

Here, we'll explore how code blocks look using Expressive Code. The provided examples are based on the official documentation, which you can refer to for further details.

Expressive Code

Syntax Highlighting

Regular syntax highlighting

console.log('This code is syntax highlighted!')

Rendering ANSI escape sequences

ANSI colors:
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m

256 colors (showing colors 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

Full RGB colors:
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m

Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m

Editor & Terminal Frames

Code editor frames

console.log('Title attribute example')

<!-- src/content/index.html -->
<div>File name comment example</div>

Terminal frames

echo "This terminal frame has no title"

Write-Output "This one has a title!"

Overriding frame types

echo "Look ma, no frame!"

# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

Text & Line Markers

Marking full lines & line ranges

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

Selecting line marker types (mark, ins, del)

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

Adding labels to line markers

// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Adding long labels on their own lines

// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Using diff-like syntax

+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
 no whitespace will be removed either

Combining syntax highlighting with diff-like syntax

  function thisIsJavaScript() {
    // This entire block gets highlighted as JavaScript,
    // and we can still add diff markers to it!
-   console.log('Old code to be removed')
+   console.log('New and shiny code!')
  }

Marking individual text inside lines

function demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

Regular expressions

console.log('The words yes and yep will be marked.')

Escaping forward slashes

echo "Test" > /home/test.txt

Selecting inline marker types (mark, ins, del)

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}

Word Wrap

Configuring word wrap per block

// Example with wrap
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with wrap=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Configuring indentation of wrapped lines

// Example with preserveIndent (enabled by default)
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with preserveIndent=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Collapsible Sections

// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // You can have multiple collapsed sections
  const a = 1
  const b = 2
  const c = a + b

  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}

// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

Line Numbers

Displaying line numbers per block

// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

Changing the starting line number

console.log('Greetings from line 5!')
console.log('I am on line 6')

Simple Guides for Fuwari

Mon, 01 Apr 2024 00:00:00 GMT

Cover image source: Source

This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post.<br/>1. Start with `http://` or `https://`: Use web image<br/>2. Start with `/`: For image in `public` dir<br/>3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`draft`	If this post is still a draft, which won't be displayed.

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

Markdown Example

Sun, 01 Oct 2023 00:00:00 GMT

An h1 header

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

this one
that one
the other one

Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺

An h2 header

Here's a numbered list:

first item
second item
third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

define foobar() {
    print "Welcome to flavor country!";
}

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i

An h3 header

Now a nested list:

First, get these ingredients:
- carrots
- celery
- lentils
Boil some water.

Dump everything in the pot and follow this algorithm:

 find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)

Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here's a link to a website, to a local doc, and to a section heading in the current doc. Here's a footnote [^1].

[^1]: Footnote text goes here.

Tables can look like this:

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they're made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it's not easy being.

A horizontal rule follows.

Here's a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here's a "line block":

| Line one | Line too | Line tree

and images can be specified like so:

Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns:

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

Include Video in the Posts

Tue, 01 Aug 2023 00:00:00 GMT

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

---
title: Include Video in the Post
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube

Bilibili