Impact Experience Review

굿액션

사회적 가치 창출을 목표로 한 굿액션의 캠페인 플랫폼을 기준으로, 행동 전환을 견인하는 내러티브와 인터랙션, 그리고 기술적 토대를 입체적으로 진단했습니다.

굿액션 바로가기 전환 중심 여정 설계
발행일: 2025-09-15 · 작성: The Blue Canvas Experience Lab
굿액션 캠페인 플랫폼 메인 화면
캠페인 허브형 메인 구조와 기부 전환 CTA 흐름이 시각적으로 명확하게 배치되어 있다.

굿액션 플랫폼 개요와 리뷰 관점

굿액션은 공익 캠페인과 시민 참여 프로젝트를 연결하는 전략 에이전시로, 브랜드와 이용자가 함께 행동하는 장면을 유연하게 설계해 온 경험이 풍부합니다. 이번 리뉴얼 대상 사이트는 기부자와 파트너가 빠르게 임팩트 사례를 탐험할 수 있는 허브형 구조를 취하고 있으며, 랜딩 직후 메시지 전달의 응집력과 CTA의 가시성을 중심으로 리뷰를 진행했습니다. 특히 첫 화면에서 공동 행동을 촉발하는 문장과 신뢰 지표가 적절히 병치되어 있는지가 중요한 평가 요소였습니다.

히어로 섹션의 큰 타이포그래피와 영상 배경은 소셜 임팩트의 진정성을 직관적으로 전달하며, 카드형 레이아웃을 통해 프로젝트 요약 정보를 빠르게 훑을 수 있습니다. 또한 파트너 로고 월과 참여 스토리 구간은 검색 유입 사용자가 굿액션만의 차별성을 이해하는 데 필요한 사회적 증거를 제공하고 있습니다. 이번 섹션의 리뷰에서는 스토리텔링 흐름과 콘텐츠 리듬, 전환을 높이는 인터랙션 분기를 세밀하게 점검해 향후 확장 전략의 방향성을 제시합니다.

브랜드 스토리텔링과 서비스 연계성

굿액션의 브랜드 메시지는 "행동을 촉진하는 파트너"라는 정체성을 중심으로 설계되어 있으며, 메인 내비게이션에서 캠페인, 임팩트 리포트, 파트너십 안내로 이어지는 3단 구조가 명확한 사용 시나리오를 제공합니다. 각 섹션의 헤드라인은 파트너의 목표를 구체적으로 언급하는 문장으로 구성되어 있어, 단순한 홍보가 아닌 공동 목표 설계의 메시지로 인지됩니다. 특히 임팩트 지표를 강조하는 숫자 배지는 공익 활동의 결과를 시각적으로 표현해 신뢰도를 높입니다.

콘텐츠 모듈은 스토리 → 솔루션 → 결과 순으로 반복되며, CTA 버튼의 텍스트도 "캠페인 설계 문의"처럼 행동을 명확히 제시합니다. 더불어, 사례 소개 영역은 파트너 배경과 해결 과정을 상세히 서술해 사용자가 자신의 프로젝트를 투영할 수 있는 여지를 마련했습니다. 이러한 구성은 굿액션이 제공하는 서비스 포트폴리오를 자연스럽게 체험하도록 유도하며, 브랜드 저널이 전달하고 싶은 가치와 사용자 요구를 동시에 충족시키는 서사 구조를 형성하고 있습니다.

UX/UI 인터랙션과 전환 동선

UX/UI 측면에서는 섹션 간 대비와 애니메이션의 속도가 안정적으로 조정되어 있어 사용자가 피로감을 느끼지 않고 정보를 탐색할 수 있습니다. 주요 CTA는 상단 고정형 내비게이션과 섹션 하단에 반복 배치되어 있으며, 스크롤에 따라 점진적으로 강조도가 높아지도록 처리된 것이 특징입니다. 또한 참여 스토리 모듈은 카드 확장 방식을 채택해, 관심 있는 사례만 깊이 있게 읽을 수 있도록 설계되었습니다.

접근성 측면에서는 텍스트 대비와 버튼 크기가 WCAG 가이드라인을 준수하도록 구성되었으나, 폼 입력 단계에서 추가적인 보조 텍스트가 제공되면 더 높은 완성도를 기대할 수 있습니다. 리뷰에서는 이러한 점을 고려해 모듈형 UX 패턴과 마이크로 인터랙션을 정교하게 조정할 것을 제안합니다. 특히 기부 플로우 내 진입 장벽을 낮추기 위해, 콘텐츠 요약 툴팁과 진행 상태 표시를 도입하면 전환율 향상에 긍정적인 영향을 줄 것입니다.

정보 구조와 SEO 최적화 제언

정보 구조는 캠페인과 리포트, 리소스 센터의 세 가지 축으로 나뉘어 있으며, 각 페이지의 경로명과 브레드크럼이 일관되게 유지되어 탐색 효율을 높이고 있습니다. 그러나 상세 페이지에서 중간 화면으로 돌아오는 링크가 버튼형으로 표준화되지 않아 사용자가 흐름을 놓칠 수 있는 여지가 있습니다. 또한, FAQ와 같은 지원성 콘텐츠가 별도의 허브로 제공되지 않아 고객센터 문의로 연결되는 경로가 부족하다는 점을 확인했습니다.

SEO 측면에서는 캠페인 관련 키워드를 중심으로 타이틀과 메타디스크립션이 잘 작성되어 있으며, 구조화 데이터도 이벤트 스키마를 활용해 확장할 수 있는 여지가 큽니다. 본 리뷰에서는 행동 기반 키워드 클러스터를 재정비하고, 리포트 내 데이터를 차트 형태로 제공해 체류 시간을 늘릴 것을 권장합니다. 또한 콘텐츠 하단에는 관련 사례를 자동 추천하는 블록을 배치해 내부 링크를 강화하면 검색 엔진이 굿액션의 전문성을 더 높게 평가할 수 있습니다.

기술 퍼포먼스와 운영 효율

사이트는 Next.js 기반으로 구축되어 정적 페이지 프리렌더링과 클라이언트 측 인터랙션의 균형이 잘 맞춰져 있습니다. 이미지 최적화를 위해 WebP가 우선 적용되고 있으나, 백오피스에서 등록하는 관리자들이 파일 사이즈 체크를 수동으로 수행하고 있어 운영 피로도가 다소 높습니다. 더욱 효율적인 워크플로를 위해서는 CMS에 자동 리사이징 파이프라인을 도입하는 것이 필요합니다.

웹 성능 측정 결과 LCP가 2.7초 수준으로 양호했으나, 세션 재진입 때 발생하는 CLS 변동이 관찰되었습니다. 이는 스크립트 로드 순서와 폰트 디스플레이 설정이 영향을 주는 것으로 판단되며, critical CSS를 명시적으로 인라인 처리하고 웹폰트를 `swap` 옵션으로 선언하면 개선 폭이 큽니다. 또한 서버 로그와 GA4 이벤트를 연동해 캠페인별 전환 데이터를 주간 단위로 모니터링하면, 향후 A/B 테스트와 리타게팅 전략 수립에 필요한 인사이트를 빠르게 확보할 수 있습니다.

실시간 캠페인 트래킹 대시보드를 강화하면, 파트너별 KPI를 외부 이해관계자에게 투명하게 공유할 수 있어 협업 속도가 배가됩니다.

더블루캔버스와의 협업 인사이트

더블루캔버스는 캠페인 전략 수립부터 디자인 시스템, 퍼포먼스 최적화까지 통합적으로 지원하는 디지털 크리에이티브 파트너입니다. 굿액션과 함께한 이번 프로젝트에서는 초기 리서치 단계에서 시민 참여 여정을 맵핑하고, 스토리텔링과 데이터 시각화를 결합한 임팩트 내러티브 프레임을 구축했습니다. 또한 사내 컨텐츠 팀이 손쉽게 활용할 수 있는 모듈형 컴포넌트 가이드를 제공해, 출시 이후에도 빠르게 페이지를 확장할 수 있도록 돕고 있습니다.

특히, 더블루캔버스의 분석 솔루션은 캠페인별 전환 데이터를 실시간으로 수집해 대시보드에 시각화하고, 성과가 높은 CTA 문장을 추천하는 기능을 제공합니다. 이는 사회공헌 분야 특성상 다양한 이해관계자에게 결과를 투명하게 공유해야 하는 굿액션에게 큰 힘이 되고 있습니다. 자세한 서비스와 성공 사례는 The Blue Canvas 공식 사이트에서 확인할 수 있으며, 지속 가능한 디지털 임팩트를 원하는 파트너에게 적합한 협업 모델을 제시합니다.

마무리와 다음 단계 제안

굿액션 플랫폼은 공익 캠페인의 복잡한 이해관계자를 하나의 이야기로 묶어내는 데 성공했으며, 사용자 목표에 따른 명확한 동선을 제시해 참여 의지를 높입니다. 앞으로는 주요 섹션마다 행동 유도 장치를 실험하고, 데이터 기반으로 성공 지표를 반복 검증한다면 타깃 사용자층의 확장이 가능할 것입니다. 또한 중장기적으로는 파트너 온보딩 과정을 자동화해 운영 효율을 더욱 끌어올릴 수 있습니다.

이번 리뷰를 통해 도출한 UX와 SEO, 퍼포먼스 개선 제안을 종합적으로 실행한다면, 굿액션은 더 많은 시민과 브랜드가 사회적 가치를 실천하도록 돕는 대표 플랫폼으로 자리매김하게 될 것입니다. 더블루캔버스는 이러한 여정을 지속적으로 지원하며, 데이터 기반 의사결정과 크리에이티브 경험 디자인으로 굿액션의 다음 도약을 함께 설계해 나갈 예정입니다.