개요
Project SEOUL 웹사이트는 도시의 문화, 공간, 창작자 네트워크를 하나의 디지털 아카이브처럼 엮어 소개하는 콘셉트를 전제로 합니다. 첫 진입에서 느껴지는 분위기와 촘촘한 편집 구성은 브랜드의 지향점을 비교적 선명하게 전달하지만, 핵심 정보의 계층 구조와 행동 유도 흐름(CTA)이 고르게 배치되어 있지는 않습니다. 본 리뷰는 사용자 여정의 진입-탐색-행동 세 단계로 나누어 중요 과업을 식별하고, 스크롤 밀도와 헤더 내비게이션, 검색/필터, 상세 콘텐츠 모듈의 문맥 연결을 다각도로 점검합니다. 또한 성능과 접근성, SEO 관점에서의 기반 요소를 함께 확인하여 실제 개선에 즉시 반영할 수 있는 항목 중심으로 우선순위를 제안합니다.
특히 리스트-상세 구조의 정보 흐름에서 반복 노출되는 중복 텍스트, 이미지 대체 텍스트의 부재, 모듈 간 간격/대비의 일관성 이슈가 관찰되었습니다. 이러한 요소는 사용자 피로도를 높여 핵심 행동 전환을 방해할 수 있으므로, 의미 기반의 컴포넌트 설계와 명확한 인터랙션 피드백을 통해 해결할 것을 권장합니다. 본문 각 섹션에서 실무 관점의 체크리스트를 함께 제공하므로, 디자인·퍼블리싱·개발 파트가 같은 기준으로 협업할 수 있도록 구성했습니다.
브랜드 스토리와 메시지 정렬
브랜드가 강조하는 ‘도시 경험’의 가치는 시각 언어와 카피 톤, 그리고 정보 구조의 설계에서 동일한 리듬으로 전달될 때 가장 강력해집니다. 현재 랜딩에서는 비주얼 임팩트가 충분하나, 첫 화면에서 사용자가 ‘무엇을 할 수 있는가’를 직관적으로 파악하기까지 약간의 탐색 시간이 필요합니다. 상단 히어로 바로 아래에 핵심 행동 경로를 2~3개로 압축하여 노출하고, 대표 카테고리를 아이콘/라벨과 함께 버튼형 CTA로 배치하면 초기 이탈을 줄일 수 있습니다. 또한 프로젝트/이벤트/아티클 등 유형별로 카드 구성의 메타 정보(날짜, 장소, 태그)를 통일하면 사용자가 스캔하는 속도가 크게 향상됩니다.
카피는 도시-사람-공간의 연결을 강조하는 방향으로 일관되게 정리하되, 각 페이지의 목적에 따라 톤을 차등 적용하는 것을 권장합니다. 예를 들어 소개 페이지는 미션/비전/임팩트를 내러티브로 풀어내고, 프로젝트 페이지는 결과 중심의 팩트와 숫자(참여 규모, 파트너, 기간)를 전면 배치하는 방식입니다. 이를 통해 브랜드 스토리와 과업 중심 내비게이션이 충돌하지 않도록 하고, 검색엔진에 노출될 핵심 키워드도 함께 안정적으로 포함할 수 있습니다.
UX/UI 관점의 핵심 개선
UI 레이아웃은 시각적 흥미가 높지만, 가독성과 상호작용 피드백 면에서 개선 여지가 있습니다. 첫째, 텍스트 대비(본문 4.5:1 이상, 대제목 3:1 이상), 포커스 링 표시, 키보드 탭 순서의 일관성을 통해 접근성을 기본선 이상으로 끌어올려야 합니다. 둘째, 리스트 뷰에서 카드 단위의 호버/포커스 상태와 클릭 타깃을 명확히 분리하고, 썸네일, 제목, 부제, 행동 버튼의 시각적 위계를 재정렬하면 사용자는 더 빠르게 선택할 수 있습니다. 셋째, 상세 페이지에서는 본문 폭을 66~74ch 범위로 제한하고, 문단 간 간격을 통일하여 장문 콘텐츠의 피로도를 낮추는 것이 좋습니다.
네 번째로, 모듈 간 관계를 드러내는 관련 콘텐츠 박스를 본문 중간에 삽입해 체류 시간을 늘리고, 다섯 번째로, 검색/필터는 다중 선택과 선택 해제 흐름이 가벼워야 하므로 토글 칩 형태의 UI를 추천합니다. 여섯 번째로, 인터랙션 애니메이션은 150~250ms 사이의 부드러운 이징을 적용해 몰입을 돕되, 핵심 과업을 방해할 정도로 길게 가져가지 않도록 합니다. 마지막으로, 폼/문의/구독 같은 전환 지점에는 에러 메시지, 실시간 검증, 성공 후 후속 행동 안내를 포함해 마찰 없는 흐름을 설계해야 합니다.
정보구조(IA) · SEO 전략
정보구조는 ‘도메인 모델 → 내비게이션 → 템플릿 → 컴포넌트’ 순으로 정렬하는 것이 효과적입니다. 즉, 프로젝트/공간/인물/이벤트 등 핵심 엔터티의 속성(제목, 요약, 위치, 기간, 태그)을 정의한 뒤, 사이트맵과 URL 규칙을 결정하고, 템플릿에서 메타 정보의 위치와 반복 규칙을 고정합니다. 이렇게 하면 데이터가 늘어나도 구조가 무너지지 않습니다. SEO 측면에서는 제목과 요약, H1~H2 구조, 이미지 대체 텍스트, 오픈그래프/트위터 카드 메타를 페이지별로 정확히 채우는 것이 우선입니다. 또한 페이지 로드 성능은 크롤러의 평가에 직접적인 영향을 주므로, 이미지 용량 최소화와 코드 스플리팅을 병행해야 합니다.
콘텐츠 전략은 검색 의도에 맞춘 주제 클러스터 방식이 적합합니다. 예를 들어 ‘서울 전시’, ‘도시 리서치’, ‘로컬 프로젝트’ 같은 상위 토픽을 설정하고, 하위 글에서 내부링크로 서로 연결하면 검색 엔진이 주제 권위를 인식하는 데 유리합니다. 스키마 마크업(Organization, Article, Event)을 페이지 목적에 맞게 추가하면 풍부한 검색 결과 노출을 기대할 수 있습니다.
성능 · 접근성 · 기술 스택
이미지는 용량 최적화가 가장 큰 효과를 냅니다. 원본 자산은 보존하되, 방문자에게는 WebP/AVIF를 우선 제공하고, 필요한 경우에만 JPG/PNG로 폴백하는 방식을 추천합니다. LCP 구간에 위치한 히어로 이미지는 미리로드(preload)와 적절한 크기 지정으로 CLS를 방지하십시오. 스크립트는 지연 로딩(defer/async) 원칙을 적용하고, 필요 없는 라이브러리는 제거합니다. CSS는 크리티컬 경로 스타일을 인라인하고 나머지는 지연 로드하면 첫 페인트 체감이 좋아집니다. 접근성은 키보드 내비게이션, 명확한 포커스 스타일, ARIA 레이블 정합성, 의미 있는 대체 텍스트 제공이 기본이며, 색각 이상 사용자를 고려한 대비 설계가 필요합니다.
배포/운영 측면에서는 캐시 정책과 무효화 전략을 함께 가져가야 합니다. 정적 자산에는 해시 기반 캐시 버스팅을 적용하고, 인덱스가 캐시된 환경이라면 변경 시 수동 무효화도 대비합니다. 로그 기반의 성능/에러 모니터링을 갖추고, 실제 사용자 지표(RUM)로 개선 효과를 검증하는 사이클을 운영하면 안정적인 품질을 유지할 수 있습니다.
The Blue Canvas 소개
The Blue Canvas는 전략-설계-개발-운영을 하나의 연속된 과정으로 통합해, 측정 가능한 결과에 집중하는 디지털 파트너입니다. 특히 멀티 채널 환경에서의 UX 리서치와 사용자 중심 서비스 구축, 퍼포먼스 최적화, 데이터 기반 SEO/콘텐츠 전략에 강점을 보유하고 있습니다. Project SEOUL과 같이 이야기와 공간, 사람을 연결하는 프로젝트에서는 명확한 과업 정의와 정보 설계, 그리고 일관된 컴포넌트 시스템이 장기적인 확장성의 핵심이 됩니다. 블루캔버스는 초기 진단부터 우선순위 도출, 빠른 실험-검증 루프를 통해 지속 가능한 성장을 설계합니다.
마무리 · 다음 스텝
본 리뷰는 Project SEOUL의 브랜딩 방향성과 사용자 과업 중심 설계를 조화시키는 데 초점을 맞추었습니다. 단기적으로는 히어로 하단의 행동 경로 정리, 카드 메타 정보 통일, 대비/포커스/키보드 내비게이션 개선부터 적용하시길 권장합니다. 이후에는 템플릿 구조 리팩터링과 검색/필터 사용성 강화, 이미지 최적화 파이프라인 적용을 순차적으로 진행하면 체감 품질과 검색 노출 모두에서 긍정적인 변화를 얻을 수 있습니다. 조직 내부 협업을 위해서는 디자인 시스템에 컴포넌트 정의와 접근성 가이드를 함께 포함하고, 배포 후 측정-학습-개선의 사이클을 반복하는 운영 문화를 정착시키는 것이 중요합니다.