개요 및 핵심 포인트
아름다운가게 MBTI 캠페인은 대중에게 친숙한 성격유형 테스트의 문법을 비영리 브랜드 이미지와 연결하여 참여 허들을 낮춘다는 점이 강점입니다. 그러나 유입 이후의 설명 밀도와 CTA 배치 일관성, 정보 계층의 뎁스 관리가 충분히 설계되지 않으면 사용자는 재미 요소에만 머물다 전환 구간으로 이동하지 못할 수 있습니다. 본 리뷰는 랜딩에서 결과 확인, 후원·참여 액션까지의 흐름을 전제로 정보 구조 재배치, 컴포넌트 단위의 UI 규칙 정리, 텍스트의 가독성과 검색 도달성 개선을 목표로 합니다. 또한 접근성 표준을 준수해 더 넓은 이용자에게 메시지가 도달하도록 하는 것을 우선 원칙으로 삼았습니다. 이를 위해 명확한 헤더 구조, 콘텐츠 블록화, 상황별 버튼 레이블링, 지연 로딩과 리소스 최적화를 권장하며, 캠페인 목적과 조직 정체성을 자연스럽게 연결하는 서사를 제시합니다.
브랜드 메시지와 톤
비영리 캠페인의 핵심은 ‘왜 지금 참여해야 하는가’를 사용자의 언어로 풀어내는 데 있습니다. 테스트라는 가벼운 문법을 쓰더라도 결과 화면에서 조직의 미션과 연결되는 의미 있는 문장이 먼저 보여야 합니다. 예를 들어 “당신의 유형은 나눔을 확장하는 데 이런 강점을 가지고 있습니다”처럼 사용자 정체성을 긍정적으로 지지하고, 곧바로 참여 행동으로 이어질 수 있는 ‘행동 제안’을 함께 표기하면 전환률이 높아집니다. 또한 리스트·배지·인포박스 같은 컴포넌트를 이용해 근거·사실·효과를 압축 제시하고, 감성 카피는 캡션·보조 텍스트로 내려 가독성을 확보합니다. 헤드라인에는 가능한 한 구체적 명사와 행동 동사를 사용하고, 버튼에는 ‘참여하기’, ‘가게 방문’, ‘재사용 기부 방법 보기’처럼 목적 기반 레이블을 씁니다. 시각적으로는 녹색 계열의 브랜드 아이덴티티를 유지하되, 대비비율 4.5:1 이상을 지키고 포커스 아웃라인을 숨기지 않는 등 접근성 우선 규칙을 적용합니다.
UX/UI 흐름과 컴포넌트
유입 랜딩에서는 “3단계로 끝나는 테스트”처럼 작업량을 수치화하여 심리적 부담을 낮추고, 상단 고정 내비게이션에는 ‘테스트 시작’ 버튼을 배치해 어떤 스크롤 위치에서도 행동을 유도합니다. 문항 화면은 한 화면에 한 과업만 보이도록 설정하고, 이전/다음 버튼 외의 링크 노출을 최소화하여 이탈을 방지합니다. 결과 화면은 유형 설명을 카드·아코디언 컴포넌트로 구분해 스캔을 돕고, 유형에 맞춘 추천 참여 액션(재사용 기부, 매장 방문, 자원활동 신청 등)을 문맥형 CTA로 노출합니다. 동일 레이아웃 내에서 버튼 크기·간격·색상 규칙을 재사용해 예측 가능성을 높이되, 1차 행동(참여하기)은 채도 높은 프라이머리, 2차 행동(더 알아보기)은 아웃라인 버튼으로 시각적 위계를 분리합니다. 폼·동의 요소는 라벨-컨트롤-헬프텍스트 순서를 지켜 보조기술 사용자도 무리 없이 이용할 수 있도록 합니다. 마지막으로, 공유(카카오/링크복사) 액션은 결과 상단과 하단 두 위치에 제공해 테스트의 확산성과 전환의 균형을 맞춥니다.
IA·SEO 전략
정보구조는 “테스트 소개 → 진행 → 결과 → 참여/후원 → 매장/수거 안내”의 5단 뎁스로 단순화하고, 각 페이지의 H1은 유일하게 유지합니다. H2~H3는 정보블록(정의, 절차, 효과, 사례) 기준으로 배치하여 검색봇이 문맥을 파악하기 쉽게 만듭니다. URL·타이틀·메타 디스크립션에는 ‘아름다운가게’, ‘MBTI’, ‘재사용 기부’, ‘자원활동’ 등 핵심 키워드를 포함하고, 결과 유형명은 동적 파라미터로 추가해 공유 시 검색 의도에 적합한 미리보기를 제공합니다. 이미지에는 구체적 대체텍스트를 제공하고, 썸네일(t.jpg)은 리스트 카드 전용으로 사용하며 본문에는 노출하지 않습니다. 스키마 마크업은 WebPage/CollectionPage를 기본으로, 결과 화면에는 BreadcrumbList를 적용해 탐색성과 내부 링크 그래프를 강화합니다. 중복 콘텐츠 방지를 위해 결과 공유용 URL에는 canonical을 사용하고, 검색 노출은 대표 결과 페이지에 집중합니다.
성능·접근성 체크
초기 로딩은 100kB 이하의 핵심 CSS를 인라인하고, 나머지 스타일은 미디어쿼리·defer로 분리합니다. 이미지는 지연 로딩을 적용하고, 가능한 경우 WebP를 병행 제공하되 원본도 보존하여 호환성을 확보합니다. 폰트는 시스템 스택 우선으로 FOUT를 허용하며, CLS를 줄이기 위해 이미지·컴포넌트에 명시적 크기를 지정합니다. 스크립트는 모듈화하여 문항 로직/결과 렌더/공유 기능을 분리하고, 이벤트 바인딩은 위임 패턴을 통해 중복 리스너를 방지합니다. 접근성 측면에서는 색 대비, 키보드 포커스 순서, 스킵 링크, 폼 라벨/에러 텍스트, 라이브영역(결과 점수) 등을 점검합니다. 또한 프라이버시 관점에서 테스트 응답 저장 시 최소 수집 원칙을 적용하고, 동의/철회 UI를 명확히 제공합니다. 전반적으로 성능 지표(LCP, INP, CLS)와 접근성 규격(WCAG 2.2 AA) 충족을 목표로 삼습니다.
The Blue Canvas 소개
The Blue Canvas는 브랜드 전략과 UX/UI 디자인, 정보구조, 퍼포먼스 최적화까지 한 번에 연결하는 디지털 파트너입니다. 캠페인 페이지처럼 감성/참여 유도가 중요한 프로젝트에서도 데이터 기반의 개선 프레임을 적용해 메시지 도달과 전환을 동시에 끌어올립니다. 특히 비영리 조직의 맥락을 이해한 카피/디자인 시스템 정비, 테스트·폼 UX 개선, 검색 도달을 위한 구조화 등 실무형 솔루션을 제공합니다. 아래 링크를 통해 포트폴리오와 서비스 범위를 확인해 주세요.
마무리 제안
아름다운가게 MBTI 캠페인의 강점은 친숙함과 참여 확산성에 있습니다. 이제는 테스트 경험과 전환 경로를 더 견고하게 연결할 차례입니다. 간결한 정보구조, 문맥형 CTA, 접근성 중심의 UI 규칙만으로도 이탈을 줄이고 후원/참여 행동을 유의미하게 늘릴 수 있습니다. 본 리뷰의 체크리스트를 우선 적용하고, 결과 공유 데이터를 기반으로 제목/설명/컴포넌트를 순차 실험해 보세요. 작은 개선의 누적이 가장 확실한 성과로 돌아옵니다.