1. 웹사이트에 '영혼'을 불어넣는 디자인 철학

'별자리 다방' 프로젝트의 시작은 단순한 웹 서비스 구축이 아니었습니다. 우리는 사용자가 브라우저를 통해 접속하는 순간, 일상의 번잡함을 잊고 19세기 말 유럽의 고전적인 다방에 들어온 듯한 신비로운 경험을 제공하고 싶었습니다. 넘쳐나는 정보와 차갑고 딱딱한 플랫 디자인이 주류를 이루는 현대 웹 생태계에서, 역설적으로 가장 '고전적인 미학'을 현대적 기술로 재해석하는 것이 우리의 첫 번째 도전이었습니다.

우리가 선택한 예술적 모티브는 알폰스 무하로 대표되는 '아르누보(Art Nouveau)' 양식이었습니다. 식물의 유기적인 곡선, 풍부한 장식성, 그리고 마음을 편안하게 해주는 부드러운 파스텔 톤의 조화는 사주와 타로라는 '운명적이고 신비로운' 콘텐츠와 완벽하게 어우러졌습니다. 단순히 예쁜 사이트를 만드는 것이 아니라, 사용자에게 시각적 위로를 줄 수 있는 '디지털 치유 공간'을 설계하는 것이 Phase 1의 근본적인 철학이었습니다.

2. CSS를 이용한 질감과 공간의 재구성

아르누보의 핵심은 '장식적 디테일'에 있습니다. 우리는 이를 이미지 파일에만 의존하지 않고 순수 CSS와 웹 폰트 기술을 통해 구현하려 노력했습니다. 가장 먼저 집중한 것은 '질감'이었습니다. 배경색으로 사용된 `Warm Parchment`(#f5ebd9)와 `Light Cream`(#fdfbf7)은 오래된 양피지의 부드러운 느낌을 전달하도록 미세하게 조정되었습니다. 여기에 40px 간격의 방사형 그라데이션 점 패턴을 배경에 깔아줌으로써 정적인 화면에 미세한 공감감을 부여했습니다.

또한, 사이트의 모든 '경계'를 정의하는 데 공을 들였습니다. 일반적인 단일 선이 아닌, `3px double` 속성을 활용한 이중 테두리는 고전적인 액자 프레임의 느낌을 줍니다. 헤더(Header) 하단과 섹션 타이틀 주변에 배치된 ❦, ✧, ❧와 같은 특수 문자와 장식 기호들은 가상 요소(`::before`, `::after`)를 통해 정교하게 배치되었습니다. 이러한 요소들은 단순한 장식을 넘어, 콘텐츠의 시각적 위계를 정리하고 사용자의 시선을 자연스럽게 유도하는 가이드 역할을 합니다.

3. 살아 움직이는 생명력: Morphing Ball 애니메이션

사용자가 사이트에 접속했을 때 가장 먼저 마주하는 메인 페이지의 'Morphing Shape'는 우리 프로젝트의 기술적 자부심입니다. 이 요소는 고정된 이미지가 아닙니다. CSS의 `border-radius` 값을 시간에 따라 유동적으로 변화시키는 `@keyframes` 애니메이션을 통해 끊임없이 모양이 변하는 동적인 오브젝트입니다. 8초의 주기로 부드럽게 형태를 바꾸는 이 구체는 '고정되지 않고 끊임없이 변화하는 인간의 운명'을 상징합니다.

우리는 여기서 한 걸음 더 나아가, 구체의 배경에 반투명한 그라데이션을 겹치고 반대 방향으로 회전하는 테두리를 추가하여 입체감을 극대화했습니다. 이는 CPU 점유율을 최소화하면서도 사용자에게 웹사이트가 '살아있다'는 느낌을 주는 강력한 장치로 작동합니다. 이러한 디테일은 단순한 코딩을 넘어, 예술적 감성을 기술로 구현하는 고난도의 작업이었습니다.

4. 첫 번째 이정표를 세우며

Phase 1의 완성으로 '별자리 다방'은 튼튼한 미학적 뼈대를 갖게 되었습니다. 단순한 웹사이트가 아니라 하나의 '작품'으로서의 정체성을 확립한 것입니다. 이 아름다운 캔버스 위에 앞으로 채워질 복잡한 만세력 데이터와 타로의 상징들이 어떻게 조화를 이룰지 기대하며 첫 번째 단계를 마칩니다. 다음 Phase에서는 이 아름다운 껍질 속에 채워질 강력한 '논리의 심장', 사주 및 타로 엔진 개발기를 들려드리겠습니다.