<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>삐뚠어깨</title><description>개발·창업·투자, 그리고 일상의 기록</description><link>https://blog.pinehill.kr/</link><language>ko</language><item><title>블로그를 두 번 만들었습니다 — AI와 함께</title><link>https://blog.pinehill.kr/posts/building-this-blog-with-ai/</link><guid isPermaLink="true">https://blog.pinehill.kr/posts/building-this-blog-with-ai/</guid><description>직접 만든 모노레포를 갈아엎고 오픈소스 템플릿으로. AI(Claude Code)와 블로그를 만들며 배운 것들.</description><pubDate>Wed, 17 Jun 2026 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;이 블로그의 첫 글로 무얼 쓸까 한참 고민하다가, 결국 가장 가까운 이야기부터 꺼내기로 했습니다. 바로 &lt;strong&gt;이 블로그 자체를 만든 과정&lt;/strong&gt;입니다.&lt;/p&gt;
&lt;p&gt;고백하자면, 이 블로그는 한 번에 만들어지지 않았습니다. &lt;strong&gt;두 번&lt;/strong&gt; 만들었거든요. 그리고 그 두 번 사이에 제가 AI와 일하는 방식에 대해 배운 게 꽤 많습니다.&lt;/p&gt;
&lt;h2&gt;1막: 직접 다 만들기&lt;/h2&gt;
&lt;p&gt;처음엔 욕심을 부렸습니다. &quot;내 블로그인데, 바닥부터 내 손으로 만들어야지.&quot;&lt;/p&gt;
&lt;p&gt;그래서 Astro 기반의 &lt;strong&gt;모노레포&lt;/strong&gt;로 시작했습니다. pnpm 워크스페이스를 깔고, 공통 컴포넌트를 모아두는 &lt;code&gt;packages/shared&lt;/code&gt;를 만들고, 그 아래에 실제 사이트(&lt;code&gt;sites/crooked-shoulders&lt;/code&gt;)를 두는 구조였죠. 레이아웃(&lt;code&gt;BaseLayout&lt;/code&gt;), 헤더와 푸터, 날짜 포맷 컴포넌트, RSS 피드, 콘텐츠 컬렉션 설정까지 — 블로그의 뼈대를 직접 짰습니다.&lt;/p&gt;
&lt;p&gt;여기서 AI(Claude Code)의 힘을 처음 실감했습니다. 평소 같으면 문서를 뒤지며 며칠 걸렸을 골격이, AI와 함께하니 &lt;strong&gt;반나절 만에&lt;/strong&gt; 섰습니다. &quot;Astro로 블로그 레이아웃 잡아줘&quot;, &quot;RSS 피드 추가해줘&quot; 같은 요청이 곧바로 동작하는 코드가 되어 돌아왔으니까요.&lt;/p&gt;
&lt;p&gt;그 기세로 브랜드도 정했습니다. &lt;code&gt;pinehill network&lt;/code&gt;에서 &lt;code&gt;pinehill studio&lt;/code&gt;로, 이름도 몇 번 바꿨고 — 심지어 &quot;삐뚤어깨&quot;라고 잘못 적었다가 &quot;삐뚠어깨&quot;로 고치는 커밋까지 남겼습니다. (이름 짓기가 제일 어렵다는 게 괜한 말이 아니더군요.)&lt;/p&gt;
&lt;h2&gt;멈춰 선 지점&lt;/h2&gt;
&lt;p&gt;골격이 섰으니 이제 글을 쓰면 되겠지, 싶었습니다. 그런데 막상 앉아 보니 정작 &lt;strong&gt;글 쓸 환경&lt;/strong&gt;이 한참 모자랐습니다.&lt;/p&gt;
&lt;p&gt;검색 기능, 목차, 코드 하이라이트, 다크 모드, 이미지 최적화, OG 태그, 태그·카테고리 페이지, 페이지 전환 애니메이션… 블로그라면 당연히 있어야 할 것들이 전부 &quot;아직 안 만든 것&quot; 목록에 있었습니다.&lt;/p&gt;
&lt;p&gt;정신을 차려보니 저는 &lt;strong&gt;글이 아니라 배관 공사&lt;/strong&gt;에 시간을 쏟고 있었습니다. 정작 쓰고 싶은 이야기는 한 줄도 못 썼는데 말이죠.&lt;/p&gt;
&lt;h2&gt;2막: 갈아엎기&lt;/h2&gt;
&lt;p&gt;그래서 결정을 바꿨습니다. &lt;strong&gt;바닥부터 만들지 말고, 잘 만든 것 위에 서자.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;선택한 건 &lt;a href=&quot;https://github.com/saicaca/fuwari&quot;&gt;Fuwari&lt;/a&gt;라는 Astro 기반 오픈소스 블로그 템플릿이었습니다. 제가 &quot;있으면 좋겠다&quot;고 생각한 기능이 이미 거의 다 들어 있더군요.&lt;/p&gt;
&lt;p&gt;마이그레이션도 AI에게 맡겼습니다. &quot;내 모노레포를 들어내고 Fuwari로 교체하되, 한국어 설정과 브랜드(삐뚠어깨)는 유지해줘.&quot; 그렇게 한 번의 큰 수술로 &lt;code&gt;packages/shared&lt;/code&gt;와 &lt;code&gt;sites/*&lt;/code&gt;를 통째로 삭제하고 Fuwari를 입혔습니다.&lt;/p&gt;
&lt;p&gt;:::tip
이런 &quot;큰 수술&quot;을 AI에게 맡길 때 가장 든든한 건 &lt;strong&gt;git&lt;/strong&gt;입니다. 커밋 단위로 끊어두면, AI가 모노레포를 통째로 갈아엎어도 언제든 되돌릴 수 있으니까요. 안전벨트를 매고 과감하게 운전하는 셈입니다.
:::&lt;/p&gt;
&lt;h2&gt;지금 이 블로그의 구성&lt;/h2&gt;
&lt;p&gt;결국 지금 이 글이 올라가 있는 블로그는 이렇게 돌아갑니다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Astro 5&lt;/strong&gt; — 정적 사이트 생성기 (뼈대)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Tailwind CSS&lt;/strong&gt; — 스타일링&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Svelte 5&lt;/strong&gt; — 검색·다크모드 토글 같은 인터랙션&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Pagefind&lt;/strong&gt; — 빌드 시점에 생성되는 정적 검색&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Expressive Code&lt;/strong&gt; — 코드 블록 하이라이트&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;RSS · 사이트맵 · KaTeX · Admonition&lt;/strong&gt; — 블로그에 필요한 기본기&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Biome&lt;/strong&gt; — 포맷·린트, &lt;strong&gt;pnpm&lt;/strong&gt; — 패키지 관리&lt;/li&gt;
&lt;li&gt;배포는 &lt;strong&gt;Vercel&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;그리고 글쓰기는 이제 명령어 한 줄로 시작합니다.&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;# 새 글 한 장 만들기
pnpm new-post my-first-post

# 빌드 (정적 검색 색인까지 함께 생성)
pnpm build   # astro build &amp;amp;&amp;amp; pagefind --site dist
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;마크다운만 쓰면 나머지는 알아서 처리됩니다. 1막에서 그렇게 만들고 싶던 환경이, 2막에서는 그냥 &lt;strong&gt;주어진 것&lt;/strong&gt;이 되었습니다.&lt;/p&gt;
&lt;h2&gt;AI와 일하며 배운 것&lt;/h2&gt;
&lt;p&gt;블로그 하나 만들면서 거창한 교훈을 얻었다고 하면 좀 민망하지만, 그래도 몇 가지는 적어둘 만합니다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;AI는 0→1을 압도적으로 빠르게 해준다.&lt;/strong&gt; 어찌나 빠른지, &quot;직접 만들기&quot;의 진짜 비용을 착각하게 만들 정도입니다.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;그래서 더더욱 &quot;만들 것 vs 가져다 쓸 것&quot;의 판단이 중요해진다.&lt;/strong&gt; AI가 순식간에 만들어줘도, 그걸 끝까지 유지보수하는 건 결국 내 몫이니까요.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;좋은 템플릿은 수백 개의 이미 잘 내려진 결정이다.&lt;/strong&gt; 그 위에 서면, 나는 정작 중요한 것 — 글 — 에 집중할 수 있습니다.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;사람의 일과 AI의 일은 다르다.&lt;/strong&gt; &apos;무엇을, 왜&apos;(이름, 톤, 주제, 그리고 무엇을 버릴지)는 사람의 몫이고, &apos;어떻게&apos;를 빠르게 구현하는 건 AI가 잘합니다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;직접 다 만들어 본 1막이 있었기에, 2막에서 &quot;갈아엎자&quot;는 결정을 후회 없이 내릴 수 있었던 것 같습니다. 한 번 만들어 봤으니, 무엇을 포기하는지 알고 포기한 거니까요.&lt;/p&gt;
&lt;h2&gt;앞으로 쓸 것들&lt;/h2&gt;
&lt;p&gt;이 블로그의 이름 &lt;strong&gt;삐뚠어깨&lt;/strong&gt;는 그대로 두지만, 다루는 이야기는 넓혀가려 합니다. 대략 이런 것들을 쓸 생각입니다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;AI를 활용한 개발&lt;/strong&gt; — 오늘 같은, 실제로 만들어 본 이야기&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;1인 앱 개발과 창업&lt;/strong&gt; — 작게 만들어 세상에 내놓기까지&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;소프트웨어 개발 기술&lt;/strong&gt;과 &lt;strong&gt;업무 생산성&lt;/strong&gt; — 아이패드 활용을 포함해서&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;주식과 경제&lt;/strong&gt; — 돈에 대한 공부와 기록&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;아파트 분양부터 입주까지&lt;/strong&gt; — 곧 시작될, 아주 현실적인 시리즈&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;첫 글이 &quot;블로그 만든 이야기&quot;라니 조금 메타하지만, 시작으로는 나쁘지 않은 것 같습니다. 두 번 만든 블로그에서, 이제 진짜 쓰고 싶었던 이야기들을 시작해 보겠습니다.&lt;/p&gt;
</content:encoded></item></channel></rss>