검색

새 로고와 Astro로의 이전 : jls42.org의 새로운 단장
blog

새 로고와 Astro로의 이전 : jls42.org의 새로운 단장

새 로고와 Astro로의 이전 : jls42.org의 새로운 단장

블로그가 새 단장을 했습니다! 수년간 Hugo를 사용한 후, 모든 것을 재구상하기로 했습니다: 새 로고, 새 프레임워크, 새 디자인. 이 변화의 이야기를 소개합니다.

새 로고: 인공지능이 정체성에 녹아들다

새 로고는 이제 인공지능의 상징을 통합합니다:

  • 왼쪽 부분에 보이는 신경망과 분홍색 및 파란색의 빛나는 연결선
  • 명시적으로 추가된 “AI” 텍스트로 이 점을 강조
  • 설계에 통합된 회로 기판이 모델을 구동하는 하드웨어를 연상시킴
  • 뇌와 심장을 동시에 연상시키는 유기적 형태 — 지능과 열정의 융합

이 새 로고는 AI의 도움으로 생성되었습니다 — AI를 다루는 블로그로서, 일상적으로 이런 도구들을 대규모로 사용하고 있기 때문에 당연한 선택이었습니다.

Hugo에서 Astro로의 마이그레이션

왜 바꿨나?

변화가 필요했습니다. 블로그를 시작할 때는 인터넷에서 찾은 무료 Hugo 템플릿과 제 글들로 시작했죠. 수동으로 약간 커스터마이징을 했고, AI의 등장으로 더 많은 것을 해낼 수 있었습니다. 그런데 Claude Code 같은 코드 에이전트가 등장하면서 상황이 달라졌습니다 — 정말 놀라웠어요! 코드 생성이 너무 쉬워져서 더 현대적이고 커스터마이즈 가능한 프레임워크를 선택할 수 있다고 생각했습니다. 저는 웹 개발자라기보다는 DevOps/인프라에 더 가깝지만, 도전해 보기로 했습니다.

전과 후가 정말 크게 달라졌습니다. 새 디자인은 보기 좋고 깔끔하며 현대적입니다 — 라이트와 다크 두 테마 모두에서 그렇습니다.

마이그레이션 과정

마이그레이션은 이틀 밤의 두 부분에 걸쳐, Claude Code와 협업하여 비교적 빠르게 이루어졌습니다.

과정은 다음과 같았습니다:

  1. 계획 수립: 공식 문서에 접근하기 위해 MCP Astro를 사용해 Claude Code에게 마이그레이션 전략을 제안해 달라고 요청했습니다
  2. Astro 프로젝트 준비: 구조 생성, 15개 언어에 대한 i18n 설정
  3. 프랑스어 콘텐츠 마이그레이션: 모든 글, 프로젝트, 페이지를 Hugo 형식에서 Astro/MDX로 변환
  4. 에셋 마이그레이션: 로고, 필수 이미지들
  5. 새 디자인: 레이아웃(Header, Footer, ArticleCard…)을 완전히 재설계하여 현대적 스타일 적용
  6. 뉴스 통합: 이미 AI 뉴스를 위한 별도 Astro 사이트를 시작했었습니다. 일관성을 위해 뉴스를 블로그에 통합하기로 했고, Claude가 콘텐츠를 마이그레이션하고 자동화된 게시 워크플로를 조정했습니다
  7. 대량 번역: 이 마이그레이션을 계기로 제가 개선한 Python 스크립트로 모든 번역을 다시 했습니다(다음 섹션 참조)
  8. 브라우저를 통한 테스트: Claude가 단계별로 사이트를 테스트하며 문제를 수정했습니다

15개 언어 자동 번역

저는 2024년 1월부터 제 Python 스크립트 ai-powered-markdown-translator를 사용해 왔습니다. 이 프로젝트는 많은 발전을 겪었고 — 이에 대해 이 블로그의 여러 글에서 다루고 있습니다.

큰 도전 과제

기존 번역을 재사용할 수도 있었지만, 제 스크립트를 진짜 시험해보고 싶었습니다: 블로그 전체 콘텐츠를 한 번에 번역하는 도전이었죠. 먼저 2–3개의 글과 몇몇 언어로 테스트하여 Python 코드를 다듬었고, 그 후 Claude Code에게 병렬로 번역을 실행하는 bash 스크립트를 만들어 달라고 요청했습니다 — 파일 10개 병렬 처리. 스크립트가 검증되자 전체 배치를 실행했습니다.

스크립트 개선 사항

이번 마이그레이션으로 다음과 같은 핵심 기능을 추가할 수 있었습니다:

  • Option --keep_filename : 출력 파일명 유지
  • Support .env : API 키를 수동으로 내보낼 필요 없음
  • 인라인 코드 보존 : 번역 중에 backticks가 사라지지 않음
  • 경제 모드 : 대용량에 대해 비용이 저렴한 모델 사용

스크립트는 여러 제공자(OpenAI, Anthropic, Mistral, Gemini)를 지원하며 코드 블록, LaTeX 수식, YAML frontmatter를 지능적으로 처리합니다.

통계

이 블로그에 대한 수치는 다음과 같습니다:

  • 블로그 글 22개
  • 프로젝트 4개
  • × 14개 언어 = 364개 파일 번역 완료
  • 번역 실패 0건

배포 전략

무리 없이 마이그레이션하기 위해 AWS에 병렬 인프라를 만들었습니다:

  • Astro 사이트 전용 신규 S3 버킷
  • 새로운 CloudFront 배포
  • 새로운 ACM 인증서
  • 실제 조건에서 테스트할 수 있는 프리뷰 DNS (preview.jls42.org)

이 접근 방식으로 테스트 동안 두 사이트를 병행 운영할 수 있었습니다. 검증이 끝나자 Route 53을 통해 전환을 진행했고, 필요 시 즉시 롤백할 수 있었습니다. 모든 것이 순조로웠고 이전 인프라는 삭제할 수 있었습니다.

이 프로젝트가 드러내는 것

이번 마이그레이션은 제 작업 방식을 잘 보여줍니다:

  • 코드 에이전트 숙련도: 수개월 사용 후, 마이그레이션 전체 프로젝트를 맡길 만큼 도구들을 잘 다루게 되었습니다
  • 안전지대에서 벗어나기: DevOps/인프라 성향인 제가 현대적 웹 프레임워크에 도전한 점 — 이것이 프로젝트를 흥미롭게 만듭니다
  • AI로의 실험: 프롬프트만으로 모든 것을 할 수 있는지 시도했고 — 성공했습니다. 모든 작업은 Claude Code, Gemini CLI 및 Codex로 수행되었지만 주로 Claude Code를 사용했습니다
  • 자동화: 스크립트가 할 수 있는 일은 절대 수동으로 하지 않으며, 특히 자동 검증 워크플로를 갖추는 것이 중요합니다
  • 오픈 소스: 번역기는 GitLab에 공개되어 있습니다

블로그에 AI 뉴스 섹션도 추가했으며 — 이에 관해서는 별도 글에서 다룰 예정입니다.


여기까지 읽어 주셔서 감사합니다! 질문이나 피드백이 있으시면 언제든지 연락해 주세요. 계속 좋은 작업하시고 블로그에서 또 뵙겠습니다!

이 문서는 gpt-5-mini 모델을 사용하여 fr 버전에서 ko 언어로 번역되었습니다. 번역 과정에 대한 자세한 정보는 https://gitlab.com/jls42/ai-powered-markdown-translator 를 참조하세요.