문학광장

개요

문학광장 웹사이트는 브랜드 아이덴티티를 전달하는 시각 언어와 실제 사용 여정을 연결해야 합니다. 본 리뷰는 첫 인상(히어로, 헤더), 주요 전환(메뉴/CTA), 신뢰 증거(콘텐츠 깊이), 기술적 기반(성능/접근성/SEO)의 네 축으로 현황을 설명하고, 사용자가 정보를 더 빨리, 더 정확히 찾도록 돕는 개선 포인트를 제안합니다. 특히 하향식 정보 설계와 명료한 문장, 시맨틱 마크업을 기반으로 한 접근성 향상을 핵심 원칙으로 설정합니다.

또한 비주얼 우선 구성에서 발생하기 쉬운 문제(텍스트 대비, 모션 과다, 스크롤 유도 약화)를 점검하고, 모바일 퍼스트 관점에서 터치 영역, 타이포 스케일, 카드 간 간격을 정교화하는 방법을 제시합니다. 최종 목표는 사용자의 맥락에서 장애물을 제거하고, 브랜드가 전달하려는 가치가 CTA 클릭과 문의로 자연스럽게 이어지도록 하는 것입니다.

브랜드 전략·메시지

문학광장 의 핵심 가치를 한 문장으로 요약하고, 모든 화면 상단과 주요 섹션에 동일한 어조로 노출하는 것이 중요합니다. 영문·국문 혼용 시 가독성을 해치지 않도록 타이포 페어링과 줄바꿈 기준을 통일하고, 메시지 계층(헤드라인 → 서브카피 → 근거/사례 → CTA)을 카드 컴포넌트 단위로 재사용 가능하게 설계하면 유지보수성이 높아집니다. 또한 이미지 캡션과 대체 텍스트를 브랜드 보이스에 맞춰 서술형으로 작성해 검색 맥락과 접근성을 함께 개선합니다.

랜딩 구간에서는 과감한 시각 대비와 간결한 행동 유도 버튼을 배치하고, 하단으로 갈수록 구체적 근거(수치, 고객 사례, 언론/수상)를 배치해 신뢰를 쌓는 ‘내러티브 스크롤’을 구현합니다. 이때 버튼 문구는 “자세히 보기” 대신 가치 중심 표현(예: “데모 요청”, “상담 예약”)을 사용해 전환 효율을 높입니다.

UX/UI 분석

내비게이션은 2-3단계로 얕게 유지하고, 카테고리 명칭을 사용자 과업 중심으로 정리합니다. 카드 레이아웃은 그리드 균형과 줄 간격을 표준화해 시각적 소음을 줄이고, 인터랙션은 200–250ms 범위의 부드러운 트랜지션으로 통일합니다. 폼은 자동완성, 실시간 유효성 검증, 오류 안내의 일관성을 확보하고, 동일 구성요소는 디자인 토큰을 통해 단일 소스에서 제어합니다. 컬러 대비는 WCAG AA 기준을 만족하도록 재조정합니다.

이미지 자산은 용도별로 웹 최적화(목록 썸네일, 본문 원본 유지)를 병행하고, 불필요한 반복 사용을 피합니다. 특히 t.jpg/t.png는 목록 썸네일 전용으로만 사용하고 본문에는 노출하지 않습니다. 콘텐츠 모듈을 재사용 가능한 패턴으로 정리해, 신규 캠페인/제품 페이지 제작 시 생산성과 일관성을 동시에 확보합니다.

정보구조·SEO

주요 랜딩의 H1은 페이지 목적을, H2/H3는 사용자 과업을 설명하도록 재배열합니다. 메타 타이틀·디스크립션은 실제 검색 질의와 일치하는 어휘로 작성하고, 이미지 대체 텍스트는 맥락 설명형으로 개선합니다. 내부 링크는 하위→상위, 관련→후속 읽기 흐름이 끊기지 않게 배치하며, 브레드크럼은 Schema.org 마크업을 적용합니다. 표/목록/정의 목록 등 시맨틱 요소로 정보 구조를 드러내고, 문장 길이와 문단 길이를 최적화해 모바일에서도 읽기 리듬이 유지되도록 합니다.

또한 핵심 전환 페이지에 대해 정적 HTML 우선 전략을 채택하고, 필수 스크립트만 지연 로드하여 CLS·LCP를 안정화합니다. 사용자 여정 기준으로 URL 네이밍을 정리하고, 캐노니컬를 명시해 중복 콘텐츠를 방지합니다.

성능·접근성

이미지는 크기에 맞는 소스로 제공하고, width/height를 명시해 레이아웃 시프트를 방지합니다. 폰트는 서브셋과 사전 연결(preconnect)을 적용하여 초기 렌더링 속도를 높입니다. 포커스 링, ARIA 레이블, 키보드 트랩 제거 등 기초 접근성 항목을 점검하고, 모션 민감 사용자를 위한 ‘감소된 모션’ 지원을 권장합니다. 컴포넌트는 역할과 상태를 명확히 전달하도록 설계합니다.

빌드 측면에서는 캐시 무효화 전략과 에셋 지문(해시)을 병행하고, 이미지 원본은 리포지토리에 그대로 보관하되, 필요 시 WebP/AVIF 추가를 고려합니다. 단, t.jpg/t.png는 목록 카드 썸네일 전용으로만 활용합니다.

The Blue Canvas

더블루캔버스는 디자인과 콘텐츠, 개발의 경계를 연결해 브랜드가 ‘전달하고자 하는 가치’를 ‘사용자가 실제로 경험하는 가치’로 바꾸는 데 집중합니다. 전략 컨설팅부터 UX/UI 설계, 콘텐츠 구조화와 라이팅, 컴포넌트 시스템 구축, 런칭 이후 분석/최적화까지 전 과정을 일관된 기준으로 수행합니다. 포트폴리오와 서비스는 아래 링크에서 확인할 수 있습니다.

The Blue Canvas 바로가기

마무리

문학광장 프로젝트의 다음 스텝은 (1) 핵심 메시지 재정의와 페이지 상단 통일, (2) 내비게이션/카드 패턴 표준화, (3) 접근성·성능 기준선 수립(Lighthouse/PA11Y 기반), (4) 전환 중심 카피/CTA 개선입니다. 본 리뷰의 체크리스트를 바탕으로 빠르게 실험하고, 지표 기반으로 반복 개선할 것을 권장합니다.