웹 개발 경험 없이 0달러로 유연한 포트폴리오 사이트 빠르게 구축하기: 유연함과 간결함 사이의 타협점

아이디어의 탄생과 초기 요구사항

저는 모바일 앱 개발자입니다. 웹 개발에 대해서는 아주 피상적인 지식만 있을 뿐 실무 경험은 전혀 없습니다. 내 모바일 앱들을 마침내 Google Play에 출시해야겠다는 생각이 머릿속을 떠나지 않았을 때, 내 모든 프로젝트에 대한 정보가 담긴 포트폴리오 사이트를 어떻게 만들지 즉시 고민하기 시작했습니다. 이때 시작 단계나 장기적인 관점에서 제작이나 유지보수에 많은 시간을 할애하고 싶지 않았지만, 사이트에 대한 요구사항은 결코 단순하지 않았습니다. 처음부터 사이트에서 정확히 무엇이 필요한지 알고 있었습니다. 그러면서도 다루기 힘든 무거운 것을 만들 생각은 없었습니다. 기사 업로드 등을 간소화하기 위해 직접 다양한 추상화 코드를 작성할 준비는 되어 있었지만, 모듈이 달린 일반적인 CMS나 그와 유사한 복잡한 솔루션을 설정하느라 고생하고 싶지는 않았습니다.

그래서 제가 세운 기준들과 왜 그렇게 정의했는지에 대해 간략히 설명하겠습니다:

개발 및 유지보수 노력 최소화와 유연한 커스터마이징: 처음에는 템플릿이 있기를 원했지만, 시스템이 허용하는 범위 내에서만 움직이는 것이 아니라 필요할 때 직접 코드를 수정해서 원하는 대로 구현할 수 있는 것을 원했습니다.
SEO 친화적인 설정: 사이트가 내 모바일 앱으로 트래픽을 유도하는 역할도 해주기를 항상 바랐습니다.
Markdown 지원: 매번 처음부터 코딩하는 것은(비록 매 페이지를 복사해서 붙여넣는 식이라 할지라도) 상당한 고역이기에, 내 생각을 정해진 형식에 맞춰 담아낼 수 있는 일종의 템플릿을 형성할 수 있어야 한다고 생각했습니다.
쉬운 다국어 지원: 앞선 항목과 마찬가지로 트래픽 때문입니다. 이론적으로 경쟁이 덜할 수 있는 다른 언어의 검색 수요를 확보하지 않을 이유가 없었습니다.
비용은 적을수록 좋음: 절대적인 기준은 아니었지만, 인디 개발자에게는 항상 반가운 보너스입니다.

옵션 조사와 Astro 및 Cloudflare Pages의 선택

여기서는 구체적으로 무엇을 시도했는지 언급하지 않고 짧게 말씀드리겠습니다. 다양한 포트폴리오 제작 사이트와 템플릿 생성기들을 살펴봤습니다. 무료 요금제는 제약이 너무 많았습니다. 어떤 곳은 SEO 관리가 불가능했고, 어떤 곳은 요금제를 결제하지 않으면 아무것도 할 수 없다는 것을 즉시 깨닫게 했습니다. 하지만 템플릿 생성 방식을 제외시킨 가장 큰 이유는 제작 메커니즘이 저를 만족시키지 못했기 때문입니다. 어떤 옵션은 기본적인 페이지를 만드는 법조차 직관적이지 않았습니다. 제 기분 탓이었거나 철저히 파고들 동기가 부족했을 수도 있지만, 무의식 속에는 이런 생각이 있었습니다. “내가 웹 개발자는 아니고 이 분야를 잘 모르지만, AI 어시스턴트의 도움을 받아 내 작업에 편리한 템플릿 구조를 직접 만들어보면 어떨까?” 기술적인 측면에 너무 깊이 빠져들어 불확실한 문제들을 해결하느라 시간을 허비하고, 결국 동기 부여를 잃어버리지는 않을까 하는 걱정도 있었습니다(많은 분이 동기 상실에 대한 두려움을 알고 계실 것입니다).

그러던 중 어느 날 저녁, AI와 옵션에 대해 논의하던 중 Astro와 Cloudflare Pages 조합을 제안받았습니다.

Astro와 Cloudflare Pages 조합의 사용 경험

AI와의 대화를 통해 이 조합이 제 기준을 완벽하게 충족하며, 그 이상이라는 것을 깨달았습니다. 보너스로 따라온 주요 장점들은 다음과 같습니다:

도커(Docker), 프로젝트 빌드, 배포에 신경 쓸 필요 없음: Cloudflare Pages에 git 저장소 접근 권한을 주고 master 브랜치에 push만 하면, 서비스가 빌드와 배포를 알아서 처리합니다. 즉, push 후에는 정말 아무것도 할 필요가 없습니다.
로컬 확인: 작업한 내용을 로컬에서 확인하는 과정이 문자 그대로 명령어 한 줄이면 끝납니다. 확인하고 테스트한 뒤 다시 push하면 됩니다.

이 조합을 테스트해 본 결론은, 제 요구사항과 목표가 모두 달성되었으며 이 방향으로 계속 나아갈 수 있다는 확신을 얻었다는 것입니다. 제 사이트의 첫 번째 구조를 갖춘 초안은 문자 그대로 하룻밤 만에 만들어졌습니다.

Astro와 나의 기준

Google에서 쉽게 찾을 수 있는 이 프레임워크에 대한 찬사를 되풀이하지는 않겠습니다. Astro가 제 개인적인 문제를 어떻게 해결했는지만 설명하겠습니다:

최소한의 노력과 유연한 커스터마이징: 급하게 만든 사이트 초안이 하룻밤 만에 생성되었습니다.
SEO 설정: Astro에서는 기본적으로 모든 페이지가 순수 HTML이므로, 결과적으로 모든 SEO 제어권이 제 손에 있습니다.
Markdown 지원: Astro의 마크다운 구현은 훌륭합니다. 웹 페이지 템플릿 구조를 만들고, md 또는 mdx 파일에서 불러올 콘텐츠의 최소한의 조건만 별도로 작성할 수 있습니다. 나중에 새 페이지를 만들 때는 md 파일만 생성하면 됩니다. HTML 복사-붙여넣기가 필요 없습니다.
다국어 지원: Astro에서는 i18n 메커니즘으로 구현되어 있습니다. 폴더 수준에서 구조를 올바르게 설계하는 것만으로 충분합니다. 저는 각 페이지의 문자열을 JSON 형식의 배열로 저장하는 방식을 택했습니다. 마크다운 파일의 번역도 지원되므로 구조만 잘 잡아두면 됩니다.
비용: Cloudflare Pages는 무료 요금제임에도 불구하고 관대한 한도(월간 최대 500회 빌드)를 제공했습니다. 결과적으로 도메인 비용만 지불했습니다.

웹 개발의 발전 속도를 고려할 때, Astro와 Cloudflare Pages가 유일한 해결책은 아닐 것입니다. 저는 단지 어느 날 저녁 ‘운명적인 만남(match)‘이 일어났고 제 요구사항이 충족되었을 뿐이며, 그것이 제가 필요로 했던 전부였습니다. 비슷한 목표를 가지고 계신다면 이 조합을 분명히 추천합니다.

조언

제가 후회했거나 처음에 고려하지 못했던 것들에 대해(웹에 처음 입문하는 분들을 위한 생각):

구조를 미리 구상하세요: 코드를 만지기 전에 아무 에디터에나 사이트의 구조를 그려보며 페이지 계층 구조를 이해하는 것이 좋습니다.
컴포넌트의 통일: 반복되는 컴포넌트(헤더, 푸터, 버튼)가 무엇이 될지 미리 생각하세요. 나중에 리팩토링하거나 공통 스타일을 분리하느라 시간을 낭비하지 않도록 디자인 시스템 형식으로 생각하는 것이 좋습니다.
다국어 지원: 검색 엔진 로봇이 번역된 버전들 사이에서 혼란을 겪지 않도록 표준 태그(canonical tags)가 무엇인지 미리 파악하세요.

결론

제 관점에서 웹 개발 경험이 없더라도 Astro와 Cloudflare Pages의 조합을 활용하면 유연하고 강력한 사이트를 만들 수 있습니다. AI 도구를 활용하면 오늘날 대부분의 문제는 완벽하게 해결 가능합니다. 그리고 많은 분에게 중요한 점은, 이것이 무료로 가능하다는 것입니다(정당한 투자라고 생각하는 도메인 비용을 제외하면 말이죠).