블로그 사이트 마이그레이션

디자이너가 운영하던 아카이브 사이트를 Next.js로 마이그레이션하면서 댓글, 포스트 관리 기능을 추가했다.

개발자로서 가장 신경 쓴 부분은 기능을 넣으면서도 원본의 힙한 감성을 해치지 않는 것이었다.

원본 사이트의 특징

다크 모드 기본

미니멀한 타이포그래피

이미지 중심 레이아웃

여백의 미

불필요한 UI 요소 없음

추가하는 기능들이 이 감성을 해치면 안 됐다.

1. 댓글 UI: 투명하게

보통 댓글 폼은 배경색이 있고, 테두리가 두꺼우며, 라벨이 있다. 이게 다 디자인을 방해한다.

원칙: 있는 듯 없는 듯


<form className="space-y-4">
  <input
    placeholder="닉네임"
    className="
      bg-transparent 
      border-b border-white/20 
      focus:border-white/60 
      transition-colors
      outline-none 
      w-full py-2
    "
  />
  <textarea
    placeholder="댓글을 남겨주세요"
    className="
      bg-transparent 
      border border-white/20
      focus:border-white/60 
      transition-colors
      outline-none 
      w-full p-3 
      resize-none
    "
  />
</form>

포인트:

bg-transparent: 배경 없음

border-white/20: 희미한 테두리

focus:border-white/60: 포커스 시에만 살짝 강조

placeholder로 라벨 대체

2. 버튼: 텍스트만

원본 사이트에는 틀 같은 버튼이 없었다. 그래서 우리도 버튼을 최대한 절제했다.


<button
  type="submit"
  className="
    text-white/60 
    hover:text-white 
    transition-colors
    text-sm
  "
>
  등록
</button>

포인트:

배경색, 테두리 없음

텍스트만

평상시는 희미하게, hover 시 밝게

4. 폰트: 원본 사이트와 통일

원본 사이트는 Press Start 2P 폰트를 사용했다. 이걸 그대로 가져왔다.


/* globals.css */
@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/PressStart2P-Regular.ttf');
}

:root {
  --font-mono: 'Press Start 2P', monospace;
}


// site.config.ts
export const siteConfig = {
  name: "Parallel Walk",
  slogan: "Walk in your own orbit.",
  // ...
};

사이트 이름, 슬로건 등에 이 폰트를 적용해 원본과 통일감을 줬다.

5. 레이아웃: 여백의 미

원본 사이트는 여백이 많았다. 콘텐츠가 빽빽하게 차있지 않았다.


// PostCard
<article className="space-y-4">
  {/* 이미지 */}
  <div className="aspect-square" />
  
  {/* 작성자, 날짜 - 여백 충분히 */}
  <div className="mt-4 space-y-1">
    <p className="text-sm">{author}</p>
    <p className="text-xs text-white/40">{date}</p>
  </div>
</article>

포인트:

요소 간 충분한 간격 (space-y-4, mt-4)

텍스트는 작게 (text-sm, text-xs)

부가 정보는 희미하게 (text-white/40)

6. 색상: 다크 모드 기본

원본이 다크 모드였으므로, 라이트 모드는 고려하지 않았다.


/* globals.css */
:root {
  --background: #000000;
  --foreground: #ffffff;
  --muted: rgba(255, 255, 255, 0.4);
  --border: rgba(255, 255, 255, 0.2);
}

모든 UI가 이 색상 시스템을 따르도록 했다.

결과

이미지 크기에 따라 딱 정돈된게 아니라

이미지 사이즈에 맞춰 각 레이어가 구분되게끔 설계

정리: 디자인 원칙

요소	원칙	적용
배경	투명	`bg-transparent`
테두리	희미	`border-white/20`
텍스트	작게	`text-sm`, `text-xs`
강조	focus시만	`focus:border-white/60`
컨트롤	최소화	돈트만, 버튼 없음
여백	충분히	`space-y-4`, `mt-4`

개발자로서 기능을 추가할 때 "이게 원래 있던 것처럼" 보여야 한다는 게 가장 어려웠다. 기능을 넣는 것보다 절제하는 게 더 어려웠다.

또, 일관적이지 않은 디자인이 요구사항이어서 최대한 맞춰서 구현해보았다.