HeroSection 현재의 모습

Figma로 전체 디자인을 하고, 여러 레퍼런스들을 참조하되 아래와 같은 조건을 지키려고 노력했다.

• "안효태, 나의 블로그" 임이 확실하게 표시되어야 한다.
• 블로그라는 정체성을 잊지 말아야 한다. 가독성이 최우선이다.
• 화려한 디자인과 애니메이션은 오히려 가독성을 해친다.
• 반드시 코드로 구현해보기.

HeroSection

*라이트모드

*다크모드

최적화는 필수

메인화면을 구성하고 나니, 역시나 성능 점수가 많이 내려갔다. 원인은 이름과 배경 구현에 여러 레이어의 CSS와 motion.div를 사용한 것이었다. JS번들링 최소화를 위해 코드 스플리팅은 필수였다. 특히 배경 구현에서 많은 고민이 있었다. 가장 단순한 해결책은 적절한 이미지를 넣는 것이었지만, 개발자의 아집이 발동해서 코드로 직접 구현해보고 싶었다. Tailwind와 CSS를 조합하고 Framer-Motion은 최소한으로 활용해서 별이 반짝이는 듯한 배경효과를 만들었다.

단색 배경은 너무 단조로운 것 같아서 추가적인 약간의 취향을 더했다. 라이트모드와 다크모드 모두 적절해 보이는 그라데이션을 적용해서 최대한 심심해 보이지 않게 노력했다. 이렇게 성능과 시각적인 부분, 그리고 가독성 사이에서 균형을 찾다보니 생각보다 많은 시간이 걸리게 됐다.

서버/클라이언트 렌더링 간의 불일치를 해결하면서도 테마에 따른 동적 변화를 구현하는데 초점을 뒀다. 배경 효과를 넣으면서도 불필요한 리렌더링이나 레이아웃 시프트가 발생하지 않도록 신경썼다. 앞으로도 추가적인 코드 스플리팅과 최적화가 필요해 보이지만, 일단은 균형 잡힌 버전을 완성했다.

배경 컴포넌트

블로그의 메인, HeroSection 구현하기

블로그의 정체성을 보여주는 곳이라 매우 중요하다고 생각했다. 글리치효과를 넣고 약간의 그라데이션 차이를 통해서 라이트모드와 다크모드일 때의 모습이 살짝 다르게 구성했다. 마찬가지로 여러겹의 CSS와 tailwind가 있어서 서버/클라이언트 컴포넌트로 많이 나누게 되었고 최종적으로는 아래와 같은 방식으로 작성하게 됐다.

최대한 집중한 부분은 서버/클라이언트 컴포넌트의 깔끔한 분리였다. 서버 컴포넌트인 HeroSection에서는 데이터와 레이아웃만 관리하고, 실제 인터랙션과 상태 관리는 클라이언트 컴포넌트인 HeroSectionClient로 최대한 위임시켰다.

tagline의 경우에는 4초마다 변경되도록 수동으로 구현했다. useEffect와 setInterval을 활용해 tagline이 순환되도록 했고, 마운트 해제 시 interval을 정리하는 클린업 함수를 넣어줬다. 메모리 누수를 방지하고 컴포넌트가 언마운트된 후에도 불필요한 상태 업데이트가 발생하지 않도록 노력했다. 또한 배경 컴포넌트에서도 그랬지만 mounted 상태를 통해 하이드레이션 이슈를 처리했다. 차이점은 배경과는 달리 이름 부분과 tagline, tags 들은 마운트 되기 전에는 스켈레톤 UI를 보여주도록 구성했다.

앞으로의 계획

생각보다 블로그를 만드는게 쉽진 않은 것 같다. Next라는 새로운 환경 때문만은 아니다. 단순하게 글을 올리고 포스팅하고 배포하는 과정 자체는 기존의 React와 똑같아서 큰 어려움은 없다. 나의 취향을 넣으면서도 아이디어와 디자인, 컨텐츠에 대한 고민이 지금까지도 이어지고 있다. 기본 MVP기능들은 구성된 것 처럼 보이지만 여전히 갈길이 먼 것 같다.

🔥 계획

• 블로그 운영방식과 그 방향에 대한 포스팅 자세하게 작성하기
  • 글의 포스팅 및 수정은 어떻게 하는가? 등등..
  • 배포는 왜 안해?
• 태그 필터링 기능 및 검색기능 구현하기
• 현재 UI사이즈 및 라우팅과 관련된 고민으로 추상화에 고민이 있음.
• 나에 대한 소개 페이지 간단하게라도 작성하기