1. 기획: 숲속의 비밀 연구소
나의 디지털 정원은 전체적으로 따뜻한 아이보리(Stone-50)와 녹색(Green)을 사용하여 편안한 산책로 같은 느낌을 준다.
하지만 새로 만든 ‘AI 실험실(Laboratory)’ 만큼은 달랐으면 했다. 이곳은 내가 사용하는 도구(Stack)와 프롬프트(Prompts)를 모아두는 곳이다. 산책로가 아니라, 밤늦게까지 불이 켜져 있는 “숲속 깊은 곳의 비밀 연구소” 같은 몰입감을 주고 싶었다.
그래서 과감하게 다크 모드를 적용하기로 했다.
2. 난관: 헤더가 말을 안 듣네?
lab.astro 페이지의 배경색을 bg-green-950(아주 짙은 녹색)으로 바꾸는 건 쉬웠다. 문제는 **헤더(Header)**였다.
Header.astro 컴포넌트는 모든 페이지에서 공통으로 사용되는데, 기본색이 bg-green-800(밝은 녹색)으로 고정되어 있었다. 실험실 페이지에 들어가도 헤더만 둥둥 떠 보이는 ‘색종이 붙이기’ 같은 어색함이 발생했다.
3. 해결: Props로 스타일 배달하기
이 문제를 해결하기 위해 “상위 컴포넌트에서 하위 컴포넌트로 스타일을 전달하는” 방식을 사용했다.
-
Header.astro수정: 고정된 클래스 대신 외부에서customClass를 받을 수 있게 열어두었다.const { customClass = "bg-green-800" } = Astro.props; <header class:list={[customClass, "shadow-md"]}> -
Layout.astro수정: 페이지와 헤더 사이의 중개자 역할을 하도록headerClass속성을 추가했다. -
lab.astro적용: 페이지에서 원하는 색상을 지정해서 넘겨주었다.<Layout headerClass="bg-green-950 border-b border-green-900">
4. 결과: 톤온톤(Tone-on-tone)의 완성
덕분에 실험실 페이지는 헤더부터 본문, 푸터까지 **‘Deep Green’과 ‘Dark Stone’**이 자연스럽게 이어지는 완벽한 어둠의 공간이 되었다.
단순히 색만 바꾼 것이 아니라, **데이터 흐름(Data Flow)**을 제어하여 디자인의 자유도를 얻었다는 점에서 의미 있는 작업이었다.