Project · 2026
풀다 공식 웹사이트 리뉴얼
아임웹 기반 기존 사이트의 철학과 메시지를 Astro 기반 브랜드/콘텐츠 허브로 재구성한 공식 웹사이트 리뉴얼 프로젝트입니다.
출발점
기존 아임웹 사이트는 풀다의 첫 얼굴이었다. Home, Project, Story, Contact, Notice로 이어지는 단순한 구조 안에서 풀다는 스스로를 “매듭을 풀어내는 사람들”로 소개했고, 사회적 가치, 일하는 사람의 행복, 동등한 관계를 중요한 기준으로 세웠다.
이 메시지는 풀다의 본질을 잘 담고 있었지만, 프로젝트 사례와 작업 과정, 기업 블로그형 기록, 향후 콘텐츠 운영까지 담기에는 구조가 좁았다. 새 웹사이트는 기존 문장의 온도를 유지하면서도 풀다가 실제로 어떤 문제를 어떻게 풀어내는지 보여주는 브랜드/콘텐츠 허브가 되어야 했다.
Before · Imweb
메시지는 있었지만, 수주 판단을 돕는 증거 구조는 약했습니다.
- Home / Project / Story / Contact / Notice 중심의 단순 구조
- “매듭을 풀어내는 사람들”이라는 좋은 메시지
- 대표 프로젝트와 작업 과정을 깊게 전시하기 어려운 구조
- 스토리, 공지, 작업 노트가 축적되는 콘텐츠 허브의 부재
- 정적 라우트, SEO 메타, 구조화 데이터, RSS까지 이어지는 운영 기준의 부족
After · Astro
브랜드, 작업, 기록, 문의가 이어지는 전시형 사이트로 재구성했습니다.
- 소개 / 프로젝트 / 스토리 / 문의를 실제 페이지로 분리
- 라이트와 다크가 전혀 다른 브랜드 표정을 갖도록 설계
- 프로젝트 상세를 케이스 스터디와 갤러리 중심으로 전환
- Markdown 콘텐츠 컬렉션, sitemap, RSS, robots, 향후 Sanity 전환 기준 준비
정확한 화면 기록
아래 이미지는 현재 Astro 사이트에서 다시 캡처한 실제 화면이다. 라이트 모드는 기존 풀다가 가진 사람 중심의 철학과 전통 상징을 이어받고, 다크 모드는 같은 콘텐츠를 기술, 시스템, AI 실행의 언어로 다시 번역한다.
Live Capture
같은 사이트지만, 낮과 밤의 역할이 다릅니다.
라이트 모드는 오래된 태극기의 빛바랜 천, 한지, 붓글씨 로고, 노리개 스크롤 사인으로 풀다의 태도와 관계의 온도를 보여준다. 다크 모드는 영문 워드마크, 네온 레드, 시스템 그리드, 마우스형 스크롤 사인으로 기술 실행력을 보여준다.
전시 화면과 상세 구조
은조 아뜰리에 사이트를 다시 확인하며 방향을 더 분명히 했다. 좋은 프로젝트 페이지는 긴 설명보다 먼저 작업 장면을 보여준다. 인테리어 포트폴리오가 공간 사진을 중심으로 설득하듯, 디지털 프로젝트도 화면, 구조, 운영 시스템, 산출물을 전시해야 한다.
질문
우리가 던진 질문은 단순한 화면 교체가 아니었다.
- 기존 사이트가 가진 사람 중심의 언어를 어떻게 잃지 않을 것인가?
- 프로젝트와 스토리를 계속 쌓을 수 있는 구조를 어떻게 만들 것인가?
- 전통적 상징과 현대적 테크 이미지를 하나의 브랜드 안에서 어떻게 공존시킬 것인가?
- 완료된 결과뿐 아니라 기획 의도, 과정, 리뷰까지 전시할 수 있는 구조는 무엇인가?
기획 방향
새 사이트의 정보 구조는 소개, 프로젝트, 스토리, 문의를 실제 페이지 경로로 분리했다. 기존 사이트의 Notice는 별도 공지 게시판보다 Story 안에서 공지, 시장동향, 개인적인 이야기, 작업 노트를 함께 운영하는 방식으로 흡수했다.
철학, 역량, 대표 프로젝트, 문의를 하나의 첫 경험으로 연결
포트폴리오와 작업 산출물을 전시하는 케이스 스터디 허브
개인적 이야기, 시장동향, 공지, 작업 노트를 담는 기업 블로그
Sanity 이전을 염두에 둔 콘텐츠 관리 콘솔 초안
프로젝트는 단순 포트폴리오 목록이 아니라 케이스 스터디 전시장으로 정의했다. 각 프로젝트는 문제 정의, 기획 의도, 진행 과정, 산출물, 결과, 리뷰를 담을 수 있어야 한다. 스토리는 기업 블로그로 시작하되, 글이 충분히 쌓인 뒤 태그나 카테고리 탭을 노출할 수 있도록 필드를 유지했다.
디자인 방향
라이트 모드는 오래된 태극기의 빛바랜 천, 한지, 오래된 홍색, 깊은 태극 청색에서 출발했다. 기존 사이트가 가진 사람과 관계의 정서를 이어가기 위해 붓글씨 로고, 한지 배경, 부채형 모바일 메뉴, 노리개 스크롤 사인을 사용했다.
오래된 태극기 색감
오래된 태극기에서 느껴지는 빛바랜 천, 먹색, 탁한 홍색과 깊은 청색을 라이트 모드의 출발점으로 삼았다. 특정 원본 이미지를 직접 노출하거나 재가공하기보다, 그 색감과 시간의 층위를 UI 토큰과 화면 분위기로 번역했다.
컬러 조견표
라이트 모드는 순백색을 피하고 한지와 빛바랜 천의 온도를 기준으로 삼았다. 다크 모드는 같은 브랜드를 기술 실행 맥락으로 전환하기 위해 깊은 남색과 네온 레드를 보조 레이어로 사용했다.
다크 모드는 단순 반전이 아니라 다른 얼굴로 설계했다. 테크 네이비, 네온 레드, 영문 풀다 워드마크, 시스템형 메뉴와 스크롤 사인을 사용해 밤의 풀다가 기술과 시스템을 다루는 회사처럼 보이도록 했다.
순백색 대신 한지색을 바탕으로 쓰고, 오래된 홍색과 깊은 태극 청색을 CTA, 강조어, 버튼, 섹션 구조에 나누어 적용했습니다.
모바일 라이트 메뉴는 부채 이미지로 열리고 닫히며, 데스크톱 히어로 우측 하단에는 노리개가 아래 흐름을 안내합니다.
히어로의 붉은 흐름은 단순한 배경 번짐이 아니라, 엉킨 매듭에서 실이 풀리는 이미지를 WebGL 흐름으로 표현했습니다.
다크 모드는 전통 자산을 줄이고, 풀다 워드마크, 네온 레드, 그리드, 마우스형 스크롤 사인으로 기술 회사의 밤 얼굴을 만듭니다.
애니메이션과 상호작용
정적인 전통 장식처럼 보이지 않도록, 상징 요소는 모두 행동 신호와 연결했다. 부채는 모바일 메뉴의 열림과 닫힘을 설명하고, 노리개는 스크롤 신호가 되며, 붉은 실 흐름은 “풀다”라는 이름의 문제 해결 태도를 히어로 첫 장면에서 전달한다.
라이트에서는 한지 위 홍색 실이 부드럽게 흐르고, 다크에서는 네온 광원이 더 선명하게 뻗어나가도록 같은 WebGL 셰이더를 테마별로 분기했습니다.
라이트에서는 노리개 몸체와 술이 따로 움직이고, 다크에서는 마우스 휠과 네온 화살표가 아래로 흐릅니다.
라이트 모바일에서는 부채가 회전하며 펼쳐지고, 다크 모바일에서는 기술 제품에 가까운 햄버거/X 메뉴로 전환됩니다.
섹션 진입 reveal, 라이트 내비게이션 붓터치 hover, 테마별 메뉴 효과음으로 작은 피드백을 만들었습니다.
산출물
표준 산출물 세트
요구사항정의서, 기능정의서, IA, 스토리보드, 아키텍처, ERD, QA 체크리스트를 Draft 문서로 구성했습니다.
샘플 프로젝트 콘텐츠
첫 번째 케이스 스터디로 이 리뉴얼 프로젝트 자체를 등록해 콘텐츠 운영 기준을 검증했습니다.
관리 화면 초안
프로젝트와 스토리를 관리할 수 있는 정적 어드민 UI를 만들고, Sanity 전환 방향을 시각화했습니다.
테마별 마이크로 인터랙션
부채 메뉴의 회전, 라이트/다크별 효과음, 첫 렌더 전 테마 적용으로 브랜드 경험을 정교하게 다듬었습니다.
개발과 운영 구조
기술 구조는 Astro 기반 정적 사이트로 잡았다. 초기 콘텐츠는 Markdown으로 관리하고, 이후 Sanity Studio를 별도 어드민으로 붙일 수 있도록 프로젝트와 스토리 필드를 먼저 정리했다.
현재 구현된 주요 운영 요소는 다음과 같다.
- 프로젝트/스토리 콘텐츠 컬렉션
- SEO 메타데이터와 구조화 데이터
- sitemap, RSS, robots 자동 생성
- 라이트/다크 테마 저장과 첫 렌더 전 적용
- 프로젝트/스토리 레이아웃 분리
- 콘텐츠 관리 어드민 화면 초안
결과
이번 리뉴얼은 풀다의 기존 메시지를 버리지 않고 확장하는 작업이었다. “웹상에서 이루어지는 모든 고민을 풀어내는 일”이라는 기존 방향을, 지금의 웹사이트에서는 브랜드 철학, 프로젝트 케이스 스터디, 스토리 운영, 문의 흐름으로 다시 풀어냈다.
아직 최종 완료 전이지만, 새 구조는 앞으로 풀다가 직접 프로젝트와 이야기를 축적하고, 필요할 때 CMS로 운영 방식을 확장할 수 있는 기반이 된다.
리뷰
이 프로젝트는 풀다가 자기 자신을 대상으로 수행한 첫 번째 케이스 스터디다. 그래서 결과물만큼 중요한 것은 판단의 기록이다. 어떤 상징은 풀다만의 고유 자산으로 남기고, 어떤 작업 방식은 다음 프로젝트에도 이전 가능한 기준으로 분리했다.
앞으로 이 페이지는 최종 배포, Sanity 연결, 실제 콘텐츠 운영이 진행될수록 완료형 케이스 스터디로 업데이트한다.
← 과제 목록