프로젝트 개요와 브랜드 맥락
센텀 CY부지 네이밍 공모전은 지역 개발과 도시 브랜딩의 관점에서 대중 참여를 촉진하는 캠페인형 프로젝트입니다. 방문자는 빠르게 “무엇을 해야 하는지, 언제까지 가능한지, 어떤 기준으로 평가되는지”를 파악해야 하며, 동시에 공신력 있는 주최·주관 정보와 명확한 참여 가이드가 제시되어야 신뢰가 형성됩니다. 본 사이트는 대조 대비가 높은 색상 체계와 직관적인 구성요소 배치를 통해 이러한 목적을 뒷받침하고 있으며, 첫 화면에서 핵심 일정과 상금, 제출 규격, 심사 기준 등 사용자의 결정에 중요한 정보를 시각적으로 계층화해 제공합니다. 특히 원클릭 참여 신청 버튼과 단계별 안내 박스는 사용자의 망설임을 줄이는 중요한 역할을 수행합니다. 또한 궁금증을 해소할 수 있도록 자주 묻는 질문 항목을 접이식으로 제공하고, 관련 규정 PDF 다운로드 버튼을 눈에 잘 띄도록 배치하여 정보 탐색 비용을 낮추고 있습니다.
한편 공모전 특성상 노출되는 비주얼은 ‘도시의 미래상’과 ‘참여의 활기’를 동시에 전달해야 합니다. 메인 히어로 영역의 대표 이미지는 색상 대비가 선명하고 메시지 밀도가 적절하여, 첫인상 단계에서 긍정적인 주목을 형성합니다. 단, 모바일 환경에서는 타이포가 이미지 요소와 겹치지 않도록 세이프 영역을 넉넉하게 두고, 핵심 문구는 이미지가 아닌 텍스트로 구현해 접근성과 SEO 모두를 확보하는 방향이 바람직합니다. 결과적으로 본 사이트는 명확한 행동 유도와 브랜드 신뢰를 기본 축으로 하여, 캠페인의 KPI(방문→참여 전환)에 유의미하게 기여하도록 설계되어 있습니다.
UX 흐름과 정보구조(IA)
사용자 여정은 대체로 랜딩 → 조건 확인 → 제출 준비 → 신청 → 결과 확인의 순서를 따릅니다. 이 과정에서 핵심은 ‘다음 단계가 무엇인지’를 즉시 알 수 있도록 만드는 것입니다. 본 사이트는 TOC, 앵커 링크, 단계 카드 컴포넌트 등을 활용해 섹션 간 이동을 빠르게 지원하며, 규정·서식·예시 등 보조 자료를 다운로드 버튼으로 명확히 분리해 인지부하를 낮춥니다. 또한 신청 폼 진입 전 체크리스트를 제공하면, 제출 실패 가능성을 선제적으로 줄일 수 있습니다. 라벨과 도움말 텍스트를 분리해 가독성을 높이고, 에러 메시지는 구체적이고 즉각적으로 노출하는 것이 바람직합니다.
IA 측면에서는 상·중·하 단의 계층 구분이 뚜렷하며, 상단 글로벌 내비에 일정/요강/FAQ/접수 등 행동에 직결되는 항목을 노출해 깊은 탐색 없이도 목적 달성이 가능합니다. 스크롤 진척에 따라 부유형 요약 바를 제공하고, 마감 임박 시 주의 배경색으로 전환하는 모션을 더하면 시의성 정보를 놓치지 않게 됩니다. 아울러 서브 섹션의 제목 체계를 H2/H3로 일관되게 정리하고, 섹션 시작부에 핵심 한줄 요약을 배치하면 모바일에서도 빠른 스캐닝이 가능해져 이탈을 줄일 수 있습니다.
브랜딩과 UI 디자인 시스템
컬러 팔레트는 도시 이미지를 연상시키는 네이비–블루–시안 계열을 중심으로 구성되어 신뢰와 역동성을 동시에 전달합니다. 기본 배경 위 대비가 높은 버튼, 칩, 배지 컴포넌트는 상태 표현(기본/호버/활성/비활성)이 명확하며, 인터랙션은 150–250ms 이내로 경쾌하게 설계되어 있습니다. CTA는 형태·색·레이블 세 요소가 일관되어 즉시 인지되며, 카드형 정보 요약 블록은 아이콘과 함께 제공되어 메시지 해석 시간을 단축합니다. 단락 중간의 하이라이트 박스는 주요 규정이나 마감 안내 등 긴급 메시지를 시각적으로 이격하여, 읽기 흐름을 유지하면서도 인지 강도를 확보합니다.
타이포그래피는 한국어 본문에 적합한 자간과 행간이 적용되어 장문의 가독성이 양호합니다. 다만 모바일 초소형 뷰포트에서는 본문 대비 캡션·버튼 텍스트가 다소 작아질 수 있으므로 최소 14–15px 이상을 유지하는 것이 바람직합니다. 이미지 캡션은 접근성 관점에서 대체 텍스트와 동일한 정보를 반복하지 않도록, 맥락적 설명(예: 촬영 위치, 결과물 요지, 심사 포인트)을 보완하는 형태로 제공하면 SEO 측면에서도 효과적입니다.
접근성과 퍼포먼스 최적화
접근성 기본 원칙(지각 가능성, 운용 가능성, 이해 가능성, 견고성)을 반영하여 구성요소 간 대비를 4.5:1 이상으로 유지하고, 모든 인터랙티브 요소에 명확한 포커스 스타일을 제공합니다. 키보드 전용 탐색 시 포커스 트랩이 발생하지 않도록 모달·드롭다운·탭 컴포넌트에 대한 순환 흐름을 점검해야 합니다. 이미지에는 구체적인 대체 텍스트를 제공하고, 장식 목적의 그래픽은 빈 `alt`로 처리해 보조기기 사용자의 혼선을 줄입니다. 또한 aria-속성을 과도하게 사용하기보다는, 시맨틱 요소(버튼/내비/메인/푸터 등)를 우선 적용하는 것이 유지보수와 접근성 모두에 유리합니다.
퍼포먼스는 LCP 이미지를 `preload`하거나 `fetchpriority` 속성을 병행하고, 나머지 시각 요소는 `loading="lazy"`로 지연 로드해 초기 페인트를 가볍게 유지합니다. 크리티컬 렌더링 경로에서 블로킹 리소스를 최소화하고, 컴포넌트 단위 코드 스플리팅으로 번들을 분할하면 TTI를 개선할 수 있습니다. 아이콘은 가능하면 SVG 스프라이트를 사용하고, 애니메이션은 `transform/opacity` 속성 위주로 구현하여 레이아웃 스래싱을 피합니다. 결과적으로 사용자 체감 성능과 검색 노출 모두에서 긍정적인 영향을 기대할 수 있습니다.
콘텐츠 전략과 SEO
공모전 성격상 검색 유입 키워드는 ‘공모전’, ‘네이밍’, ‘센텀’, ‘도시브랜딩’ 등 테마 키워드와 ‘상금’, ‘마감일’, ‘접수 방법’ 같은 정보 키워드로 양분됩니다. 페이지 상단과 FAQ, 가이드 문서의 제목·요약에 이러한 단어를 자연스럽게 배치하고, 구조화 데이터(Organization, FAQ, Event)를 적절히 마크업하면 CTR과 가시성을 높일 수 있습니다. 미디어는 파일명과 `alt`에 의미 있는 단어를 사용하고, 캡션에는 맥락 설명을 제공해 문맥 신호를 강화합니다. 내부 링크는 ‘접수’로만 단일화하지 말고 ‘제출 규격 확인’, ‘심사 단계 보기’처럼 의도 기반 앵커를 다양화하면 체류 시간과 전환 모두에 긍정적입니다.
또한 외부 홍보용 랜딩(요약 페이지)과 상세 규정 페이지를 분리하고 정규화 링크를 설정하면 중복 콘텐츠 이슈를 줄일 수 있습니다. 오픈그래프·트위터 카드 이미지는 핵심 메시지와 데드라인을 조합해 소셜 쉐어링에서 주목도를 확보하는 편이 좋습니다. 마지막으로 브랜드 레퍼런스를 명확히 제시하기 위해 하단에 The Blue Canvas(블루캔버스) 소개 섹션을 두고, 공식 웹사이트로 연결하면 신뢰 신호를 보강할 수 있습니다.
The Blue Canvas 소개
The Blue Canvas는 브랜드와 디지털 프로덕트가 풀어야 할 문제를 전략적으로 정의하고, 이를 UX/UI, 콘텐츠, 프론트엔드 엔지니어링까지 통합적으로 해결하는 스튜디오입니다. 우리는 ‘비즈니스 목표’와 ‘사용자 가치’를 정렬시키는 데 집중하며, 실측 데이터와 실험을 통해 가설을 검증합니다. 특히 캠페인/공모전/랜딩 환경에서 전환을 이끄는 정보 설계, 성능 중심의 프런트엔드, 접근성 표준 준수를 강점으로 합니다. 프로젝트 상담이나 포트폴리오가 필요하다면 언제든 블루캔버스 공식 사이트를 방문해 주세요.
