← Insight
로그

AfterDay Project 이 사이트에 대하여

하루의 끝에서 시작한 개인 프로젝트, 그 방향과 구축 과정에 대한 기록

#개발일지#사이드프로젝트#회고

개요

이전부터 업무와는 별개로, 온전히 나만을 위한 개인 프로젝트를 해보고 싶다는 생각을 계속해왔다.
어떤 방향으로 만들어갈지 오랜 시간 고민한 끝에 하나의 기준이 생겼다.

“하루의 모든 일과가 끝난 이후의 시간”

회사 업무와 완전히 분리된 상태에서,
내가 궁금한 것, 만들어보고 싶은 것, 그리고 나를 성장시키는 것들을 기록하는 공간.

그렇게 시작하게 된 것이 AfterDay Project다.

이 글에서는 그 구축 과정과 고민들을 정리해보려고 한다.

사이트 콘텐츠 구성

가장 먼저 고민했던 것은 “무엇을 담을 것인가”였다.
결과적으로 세 가지 축으로 정리했다.

Tools

개발을 하다 보면 자주 사용하는 유틸리티들이 있다.
그때마다 검색해서 광고가 많은 사이트를 거쳐 사용하는 과정이 꽤 번거롭게 느껴졌다.

그래서 자연스럽게 이런 생각이 들었다.

그냥 내가 직접 만들어서 쓰면 되지 않을까?

이 공간에는 다음과 같은 도구들을 담고 있다.

  • 비밀번호 생성기
  • 유닉스 타임스탬프 변환기
  • IP 주소 확인
  • 이미지 최적화 도구

앞으로도 필요할 때마다 계속 추가해 나갈 예정이다.

Daily UI

UI 컴포넌트를 하나씩 만들어가는 챌린지 공간이다.

업무나 리서치 중에 흥미롭게 느꼈던 인터랙션을
직접 구현하고, 실험하고, 기록한다.

이곳은 결과를 보여주는 공간이라기보다
과정을 쌓아가는 연구실에 가깝다.

Insight

개발을 하면서 느낀 점들을 기록하는 공간이다.

  • 업무 중 고민했던 부분
  • 기술 선택에 대한 생각
  • 빠르게 변하는 업계 속에서의 깨달음
  • 잘한 점과 아쉬웠던 점에 대한 회고

이 기록들이 쌓이면서 나만의 기준과 방향이 만들어질 것이라 생각한다.

기술 스택 선택

Next.js → Astro

처음에는 익숙한 Next.js(React)로 시작했다.
라우팅이 직관적이고 기존 지식을 그대로 활용할 수 있었기 때문이다.

하지만 운영하면서 몇 가지 불편함이 눈에 들어오기 시작했다.

  • 클라이언트 사이드 JS가 거의 필요 없음에도 번들 사이즈가 커진다
  • Markdown 기반 콘텐츠 관리가 번거롭다
  • 정적 사이트로 다루기에는 제약이 있다

결론은 명확했다.

이 프로젝트에는 Next.js가 과하다

그래서 Astro로 전환했다.

Astro는 정적 사이트에 최적화되어 있으면서도
필요한 경우 React, Vue, Svelte를 함께 사용할 수 있다.

기본은 가볍게 유지하면서 필요한 부분만 선택적으로 사용하는 구조가
이 프로젝트와 잘 맞았다.

Tailwind CSS v4 설정

Astro의 공식 Tailwind integration은 v3 기준이기 때문에
v4를 사용하려면 직접 설정이 필요하다.

// astro.config.mjs
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

CSS에서는 아래 한 줄이면 충분하다.

@import 'tailwindcss';

Node.js 버전 문제

Astro 5부터는 Vite 8을 사용하는데,
여기서 사용하는 rolldown이 Node 20 이상을 요구한다.

기존 환경(Node 21.7.3)에서는 실행되지 않아
Volta로 Node 22를 고정했다.

volta pin node@22

Content Collections 변경

Astro 5 이후로 entry.render()가 deprecated되면서
사용 방식이 변경되었다.

import { render } from 'astro:content';
const { Content } = await render(entry);

Canvas API 활용

이미지 최적화, 크롭, favicon 생성은 모두 Canvas API로 처리했다.

  • 서버 업로드가 필요 없음
  • 프라이버시 측면에서 유리
  • 서버리스 환경 제약에서 자유로움

다국어 대응

일본어를 기본으로, 한국어와 영어를 함께 지원한다.

Astro의 [lang] 라우팅과 간단한 유틸리티만으로
별도의 i18n 라이브러리 없이 구현했다.

Markdown 기반 콘텐츠

src/content/insight/에 파일을 추가하면
자동으로 목록과 정적 페이지가 생성된다.

Daily UI 구현 중 고민

Daily UI 카드에서 iframe으로 데모를 보여주는 기능이 생각보다 까다로웠다.

function updateIframeScales() {
  document.querySelectorAll('.scale-wrapper').forEach(wrapper => {
    const scale = wrapper.offsetWidth / 1280;
    wrapper.querySelectorAll('.demo-iframe').forEach(iframe => {
      iframe.style.transform = `scale(${scale})`;
    });
  });
}

앞으로

지금 단계에서 가장 중요한 것은 기능 추가보다 지속성이다.

  • 콘텐츠를 꾸준히 쌓기
  • 도구를 조금씩 확장하기
  • 기록을 멈추지 않기

이 프로젝트는 완성형을 목표로 하기보다
계속 변화하고 쌓여가는 공간에 가깝다.

AfterDay라는 이름처럼,
하루가 끝난 이후의 시간을 어떻게 쓰느냐가
이 사이트의 방향을 만들어갈 것이다.