Project · 2026
풀다 공식 웹사이트 리뉴얼
풀다의 철학과 메시지를 낮과 밤 두 얼굴, 한/영 두 언어의 브랜드/콘텐츠 허브로 재구성하고 운영하며 고도화한 공식 웹사이트 프로젝트입니다.
정확한 화면 기록
아래 이미지는 현재 Astro 사이트에서 다시 캡처한 실제 화면이다. 라이트 모드는 기존 풀다가 가진 사람 중심의 철학과 전통 상징을 이어받고, 다크 모드는 같은 콘텐츠를 기술, 시스템, AI 실행의 언어로 다시 번역한다.
Live Capture
같은 사이트지만, 낮과 밤의 역할이 다릅니다.
라이트 모드는 오래된 태극기의 빛바랜 천, 한지, 붓글씨 로고, 노리개 스크롤 사인으로 풀다의 태도와 관계의 온도를 보여준다. 다크 모드는 영문 워드마크, 네온 레드, 시스템 그리드, 마우스형 스크롤 사인으로 기술 실행력을 보여준다.
전시 화면과 상세 구조
은조 아뜰리에 사이트를 다시 확인하며 방향을 더 분명히 했다. 좋은 프로젝트 페이지는 긴 설명보다 먼저 작업 장면을 보여준다. 인테리어 포트폴리오가 공간 사진을 중심으로 설득하듯, 디지털 프로젝트도 화면, 구조, 운영 시스템, 산출물을 전시해야 한다.
질문
우리가 던진 질문은 단순한 화면 교체가 아니었다.
- 기존 사이트가 가진 사람 중심의 언어를 어떻게 잃지 않을 것인가?
- 프로젝트와 스토리를 계속 쌓을 수 있는 구조를 어떻게 만들 것인가?
- 전통적 상징과 현대적 테크 이미지를 하나의 브랜드 안에서 어떻게 공존시킬 것인가?
- 완료된 결과뿐 아니라 기획 의도, 과정, 리뷰까지 전시할 수 있는 구조는 무엇인가?
기획 방향
새 사이트의 정보 구조는 소개, 프로젝트, 스토리, 문의를 실제 페이지 경로로 분리했다. 기존 사이트의 Notice는 별도 공지 게시판보다 Story 안에서 공지, 시장동향, 개인적인 이야기, 작업 노트를 함께 운영하는 방식으로 흡수했다.
철학, 역량, 대표 프로젝트, 문의를 하나의 첫 경험으로 연결
포트폴리오와 작업 산출물을 전시하는 케이스 스터디 허브
개인적 이야기, 시장동향, 공지, 작업 노트를 담는 기업 블로그
Markdown/git 기반 콘텐츠 운영 경로를 정리한 noindex 포털
프로젝트는 단순 포트폴리오 목록이 아니라 케이스 스터디 전시장으로 정의했다. 각 프로젝트는 문제 정의, 기획 의도, 진행 과정, 산출물, 결과, 리뷰를 담을 수 있어야 한다. 스토리는 기업 블로그로 시작하되, 글이 충분히 쌓인 뒤 태그나 카테고리 탭을 노출할 수 있도록 필드를 유지했다.
디자인 방향
라이트 모드는 오래된 태극기의 빛바랜 천, 한지, 오래된 홍색, 깊은 태극 청색에서 출발했다. 기존 사이트가 가진 사람과 관계의 정서를 이어가기 위해 붓글씨 로고, 한지 배경, 부채형 모바일 메뉴, 노리개 스크롤 사인을 사용했다.
오래된 태극기 색감
오래된 태극기에서 느껴지는 빛바랜 천, 먹색, 탁한 홍색과 깊은 청색을 라이트 모드의 출발점으로 삼았다. 특정 원본 이미지를 직접 노출하거나 재가공하기보다, 그 색감과 시간의 층위를 UI 토큰과 화면 분위기로 번역했다.
컬러 조견표
라이트 모드는 순백색을 피하고 한지와 빛바랜 천의 온도를 기준으로 삼았다. 다크 모드는 같은 브랜드를 기술 실행 맥락으로 전환하기 위해 깊은 남색과 네온 레드를 보조 레이어로 사용했다.
다크 모드는 단순 반전이 아니라 다른 얼굴로 설계했다. 테크 네이비, 네온 레드, 영문 풀다 워드마크, 시스템형 메뉴와 스크롤 사인을 사용해 밤의 풀다가 기술과 시스템을 다루는 회사처럼 보이도록 했다.
순백색 대신 한지색을 바탕으로 쓰고, 오래된 홍색과 깊은 태극 청색을 CTA, 강조어, 버튼, 섹션 구조에 나누어 적용했습니다.
모바일 라이트 메뉴는 부채 이미지로 열리고 닫히며, 데스크톱 히어로 우측 하단에는 노리개가 아래 흐름을 안내합니다.
히어로의 붉은 흐름은 단순한 배경 번짐이 아니라, 엉킨 매듭에서 실이 풀리는 이미지를 WebGL 흐름으로 표현했습니다.
다크 모드는 전통 자산을 줄이고, 풀다 워드마크, 네온 레드, 그리드, 마우스형 스크롤 사인으로 기술 회사의 밤 얼굴을 만듭니다.
애니메이션과 상호작용
정적인 전통 장식처럼 보이지 않도록, 상징 요소는 모두 행동 신호와 연결했다. 부채는 모바일 메뉴의 열림과 닫힘을 설명하고, 노리개는 스크롤 신호가 되며, 붉은 실 흐름은 “풀다”라는 이름의 문제 해결 태도를 히어로 첫 장면에서 전달한다.
라이트에서는 한지 위 홍색 실이 부드럽게 흐르고, 다크에서는 네온 광원이 더 선명하게 뻗어나가도록 같은 WebGL 셰이더를 테마별로 분기했습니다.
라이트에서는 노리개 몸체와 술이 따로 움직이고, 다크에서는 마우스 휠과 네온 화살표가 아래로 흐릅니다.
라이트 모바일에서는 부채가 회전하며 펼쳐지고, 다크 모바일에서는 기술 제품에 가까운 햄버거/X 메뉴로 전환됩니다.
섹션 진입 reveal, 라이트 내비게이션 붓터치 hover, 테마별 메뉴 효과음으로 작은 피드백을 만들었습니다.
산출물
표준 산출물 세트
요구사항정의서, 기능정의서, IA, 스토리보드, 아키텍처, ERD, QA 체크리스트를 Draft 문서로 구성했습니다.
샘플 프로젝트 콘텐츠
첫 번째 케이스 스터디로 이 리뉴얼 프로젝트 자체를 등록해 콘텐츠 운영 기준을 검증했습니다.
관리 화면 초안
프로젝트와 스토리 운영 경로, 접근 정책, 발행 체크리스트를 모아둔 noindex 운영 포털을 만들었습니다.
테마별 마이크로 인터랙션
부채 메뉴의 회전, 라이트/다크별 효과음, 첫 렌더 전 테마 적용으로 브랜드 경험을 정교하게 다듬었습니다.
개발과 운영 구조
기술 구조는 Astro 기반 정적 사이트로 잡았다. 콘텐츠는 Markdown + git으로 관리한다. 발행 빈도가 낮고 AI 에이전트가 직접 편집하는 운영 방식과 맞아, 별도 CMS(Sanity 등) 도입은 검토 후 보류하기로 결정했다(2026-09).
현재 구현된 주요 운영 요소는 다음과 같다.
- 프로젝트/스토리 콘텐츠 컬렉션
- 라이트/다크 테마 저장과 첫 렌더 전 적용
- 프로젝트/스토리 레이아웃 분리
- 콘텐츠 관리 어드민 화면 초안
운영하며 다듬은 것들 (2026.07–10)
첫 리뉴얼 이후에도 실제 화면을 보며 구조와 경험을 계속 고도화했다. 가장 큰 변화는 낮과 밤의 얼굴을 더 분명히 나눈 것, 한글과 영문을 별개 축으로 분리한 것, 그리고 방문자가 문의까지 이어지는 길을 만든 것이다.
테마는 색과 디자인만, 언어는 문구·로고·영문 글꼴만 결정한다. 영문은 /en/ 경로로 홈·소개·과제·스토리·문의를 제공하고, 한글 페이지에서는 스크롤 의성어를 걷어냈다.
저장된 선택이 없으면 06–18시는 라이트, 그 외는 다크로 계산한다. 자동 계산값이 고정되던 버그를 고쳐 방문자가 직접 고른 토글만 기억한다.
마우스 환경의 다크에서는 기본 커서 대신 조준 레티클이 따라오고, 탭은 단발·길게 누르면 충전 후 입자포로 반응한다. 스크롤 의도가 있을 때만 세 색 사선이 스치며 다음 섹션으로 넘어가는 히어로 연출을 넣었고, 터치와 모션 줄이기 환경에서는 꺼진다.
문화포털 전통문양(공공누리 제1유형)을 키컬러로 보정해 비단 띠 구분선, 히어로 홍색 선, 스토리 쌍학흉배, 연화문·구름문·백자떡살로 반영했다.
화면 밖이거나 탭이 숨겨졌을 때 셰이더와 무한 애니메이션을 멈추고, 고정 배경과 헤더 blur처럼 스크롤을 무겁게 하는 효과를 걷어냈다. 폰트는 자체 호스팅·시스템 폰트를 쓰고 이미지는 WebP로 바꿨다.
문의 전에 부담 없이 시작할 수 있는 자가진단을 홈·푸터·문의 페이지에 연결했다. 진단 결과는 점수와 유형에 따라 분기해 보여주고, 연락처 같은 개인 정보는 주소에 싣지 않는다.
소개 파트너와 필라테스 스튜디오를 위한 랜딩 페이지를 추가해 대상별 문의 경로를 나눴다.
이 과정에서 얻은 판단 기준도 남겨 둔다. 연출은 방문자의 스크롤 의도가 있을 때만 재생하고, 제작사 라이선스가 있는 폰트는 가공하지 않고 원본 그대로 쓴다.
결과
이번 리뉴얼은 풀다의 기존 메시지를 버리지 않고 확장하는 작업이었다. “웹상에서 이루어지는 모든 고민을 풀어내는 일”이라는 기존 방향을, 지금의 웹사이트에서는 브랜드 철학, 프로젝트 케이스 스터디, 스토리 운영, 문의 흐름으로 다시 풀어냈다.
현재 사이트는 실제로 운영되고 있으며, 풀다가 직접 프로젝트와 이야기를 축적하고 문의·진단으로 이어지는 기반이 되었다. CMS는 비개발 팀원의 직접 발행이나 하루 여러 건의 발행 같은 조건이 생길 때 다시 검토한다.
리뷰
이 프로젝트는 풀다가 자기 자신을 대상으로 수행한 첫 번째 케이스 스터디다. 그래서 결과물만큼 중요한 것은 판단의 기록이다. 어떤 상징은 풀다만의 고유 자산으로 남기고, 어떤 작업 방식은 다음 프로젝트에도 이전 가능한 기준으로 분리했다.
2026년 10월 기준으로 고도화 내용과 현재 화면을 반영했다. 스토리 보강과 문의 흐름 개선이 이어지면 이 페이지에 계속 기록한다.
← 과제 목록