홈페이지, 직접 만들기로 했습니다
스타트업 초기에 홈페이지를 외주에 맡기는 경우가 많지만, Dartwork는 기술 회사답게 직접 만들기로 결정했습니다. 기술 역량을 보여주는 첫 번째 포트폴리오이기도 하니까요.
기술 스택 선택
여러 프레임워크를 검토한 끝에 다음과 같은 스택을 선택했습니다:
- SvelteKit — Svelte 5 기반의 풀스택 프레임워크. 컴파일 타임 최적화 덕분에 번들 사이즈가 작고, 개발 경험이 뛰어납니다.
- Tailwind CSS v4 — 유틸리티 퍼스트 CSS. v4에서 CSS-first 설정 방식으로 바뀌면서 더 직관적이 되었습니다.
- Paraglide v2 — 컴파일 타임 i18n 라이브러리. 트리쉐이킹이 자동으로 되어 사용하지 않는 번역은 번들에 포함되지 않습니다.
- mdsvex — Markdown 안에서 Svelte 컴포넌트를 사용할 수 있는 프리프로세서. 블로그, 소식, IR 등의 콘텐츠를 관리합니다.
다국어 지원
영어와 한국어 두 개 언어를 지원합니다. 언어는 URL로 나뉩니다. 기본인 영어는 /, 한국어는 /kr/... 아래에 있습니다. Paraglide v2는 감싸는 컴포넌트가 필요 없습니다. 서버 미들웨어(hooks.server.ts의 paraglideMiddleware)가 요청 URL에서 언어를 읽고, reroute 훅(hooks.ts)이 /kr 접두어를 걷어 내 두 언어가 같은 SvelteKit 라우트를 함께 씁니다. 링크는 localizeHref를 거치므로, 언어를 바꾸면 같은 페이지의 다른 언어 주소로 옮겨 갈 뿐입니다.
콘텐츠 파일도 src/content/ko/와 src/content/en/ 디렉토리에 분리하여 관리하고 있습니다.
콘텐츠 시스템
mdsvex를 활용해 블로그, 소식, IR 자료 등을 Markdown 파일로 관리합니다. 각 콘텐츠는 폴더 기반 구조(index.svx + 관련 에셋)로 구성되어, 이미지 등 에셋과 콘텐츠를 함께 관리할 수 있습니다.
마치며
아직 부족한 점이 많지만, 지속적으로 개선해 나갈 예정입니다. 기술적인 도전과 배움의 과정을 이 블로그를 통해 공유하겠습니다.