개요
핵심 요약
- 토스임팩트는 토스의 사회적 책임 활동을 소개하는 전용 페이지로, ‘토스가 바꾸는 세상의 기준들’이라는 부제를 건다.
- ‘토스가 만들어 온 금융의 기준’ 구획은 2015년 간편송금 등장부터 현재까지 8개 이정표를 가로 탭 타임라인으로 배열한다.
- ‘토스의 세가지 실천’ 구획은 impact for all·trust·growth 세 카테고리 아래 각각 4개 세부 항목을 아코디언 형태로 담는다.
- 밴드 ADOY와 16팀의 비주얼 아티스트가 참여한 뮤직비디오 ‘Spectrum’을 삽입해 사회공헌 메시지를 영상 콘텐츠로 확장한다.
- meta description·og 태그·canonical은 갖춰져 있으나 hreflang과 구조화 데이터는 확인되지 않는다.
토스임팩트는 토스가 운영하는 사회공헌·ESG 전용 페이지다. 첫 화면은 파스텔 그라데이션 배경에 ‘toss impact’ 로고 타입과 ‘토스가 바꾸는 세상의 기준들’이라는 한 줄 카피만 놓고, 스크롤을 유도하는 화살표 아이콘으로 마무리한다. 상품 소개나 가입 유도 없이 메시지 하나로 첫 화면을 채운 점이 일반적인 토스 서비스 페이지와 다르다.
히어로 다음으로는 ‘토스가 만들어 온 금융의 기준’ 타임라인, ‘일상의 기준을 바꾸는 토스의 세가지 실천’, ‘우리가 꿈꾸는 세상의 모습’ 뮤직비디오, ‘최근 소식’ 뉴스 피드가 순서대로 이어진다. 이번 리뷰에서는 연혁을 타임라인으로 구조화한 방식과, 사회공헌 활동을 세 축으로 분류한 정보 설계를 살펴본다.
브랜드 & 메시지
브랜드 화법은 ‘서비스가 아니라 기준을 만든다’는 문장으로 요약된다. ‘쉽고 간편하게, 금융을 모두의 손 안으로’, ‘달라진 금융을 넘어 새로운 일상으로’처럼 토스임팩트는 개별 기능이 아니라 산업 전체의 기준을 바꿨다는 서사를 앞세운다. 간편송금의 등장을 ‘토스 간편송금 2015’라는 각주와 함께 첫 이정표로 명시하고, 이후 신용관리·고객참여 시작하기·은행 업의 확장까지를 연속된 흐름으로 배치한다.
‘impact for all’, ‘impact for trust’, ‘impact for growth’ 세 카드는 각각 파랑·하늘·노랑 톤으로 구분되며 ‘모두의 경험’, ‘안전한 기술’, ‘성장의 토대’라는 부제를 단다. 접근성 개선, 보이스피싱 방지 같은 보안 기술, 사업자 지원까지 한 회사의 사회적 역할을 세 갈래로 나눈 구성이다. 이 분류 덕분에 ‘토스가 무슨 사회공헌을 하는가’라는 질문에 카테고리 단위로 답할 수 있다.
UX/UI 관점
강점은 다섯 가지다. 첫째, 연혁을 단순 나열이 아니라 가로 탭 타임라인으로 만들어, 각 이정표를 클릭하면 해당 시점의 설명과 이미지가 함께 전환된다. 2015년 간편송금부터 순서대로 훑을 수도, 관심 있는 시점으로 바로 이동할 수도 있다. 둘째, 세 가지 실천 카드 안에 각 4개씩 세부 항목을 아코디언으로 접어 뒀다. 한 화면에 모든 텍스트를 노출하지 않고 관심 있는 항목만 펼쳐보게 해 정보 밀도를 조절했다.
셋째, 뮤직비디오 ‘Spectrum’을 사회공헌 메시지 전달 수단으로 삽입해, 텍스트로 설명하기 어려운 ‘꿈꾸는 세상의 모습’이라는 추상적 주제를 영상으로 대체했다. 넷째, 뮤직비디오 아래 ‘당신이 꿈꾸는 세상의 모습은?’ 구획에서 사용자 참여형 이미지 갤러리를 이어 붙여 일방적 홍보에서 참여형 콘텐츠로 넘어간다. 다섯째, 최근 소식 구획에 전체·산업분야·성과지표 탭을 두고 날짜순으로 뉴스를 정렬해, 이 페이지가 정적 소개글이 아니라 계속 갱신되는 채널임을 보여준다.
IA·SEO 전략
title은 ‘토스임팩트 Toss Impact’, meta description은 ‘금융을 넘어, 일상까지. 긍정적 변화를 만드는 토스의 여정을 소개해요.’로 간결하고 완결된 문장이다. canonical이 `https://toss.im/impact`로 명시돼 있고, og:title·og:description·og:image·og:site_name까지 오픈그래프 태그가 모두 채워져 있어 링크 공유 시 미리보기 품질이 안정적이다.
다만 이 페이지에서 구조화 데이터(JSON-LD)와 hreflang 선언은 확인되지 않는다. 사회공헌 활동처럼 보도자료·연혁이 누적되는 콘텐츠는 Article이나 Event 타입의 구조화 데이터를 각 이정표나 뉴스 항목에 적용하면 검색 결과에서 개별 사건이 노출될 가능성이 커진다. 지금 구조에서는 타임라인 안의 8개 이정표가 페이지 하나의 텍스트로만 존재해, 특정 사건 하나를 검색했을 때 이 페이지가 답으로 걸릴 확률이 낮다.
성능·접근성
이미지 최적화 인프라는 갖춰져 있다. `resources-fe.toss.im`을 통해 width·quality 파라미터가 붙은 반응형 이미지 URL을 다수의 해상도로 preload 선언해 두고 있어, 기기별로 적절한 크기의 이미지를 내려받는 구조다. 로고와 타임라인 대표 이미지처럼 초기 노출이 중요한 자산에 이 방식을 적용한 점이 눈에 띈다.
접근성 측면에서는 파스텔 그라데이션 배경 위 텍스트의 대비, 그리고 타임라인 탭과 아코디언이 키보드 탐색과 스크린리더로 온전히 조작되는지 확인이 필요하다. 뮤직비디오 삽입 영역에는 대체 텍스트나 자막 제공 여부를 점검하는 편이 좋다. 사회공헌 메시지가 영상에 담겨 있다면, 영상을 보지 못하는 사용자에게도 핵심 메시지가 텍스트로 전달돼야 한다.
자주 묻는 질문
토스임팩트는 무엇을 하는 페이지인가요?
토스의 사회공헌·ESG 활동을 소개하는 전용 페이지입니다. 2015년 간편송금부터 이어진 연혁을 타임라인으로, 현재의 실천을 impact for all·trust·growth 세 카테고리로 정리해 보여줍니다.
기업 사회공헌 페이지를 타임라인 형태로 만들면 어떤 효과가 있나요?
개별 활동을 나열하는 것보다 연속된 서사로 읽혀 신뢰도가 높아집니다. 토스임팩트처럼 연도별 이정표를 클릭형 탭으로 만들면 방문자가 원하는 시점으로 바로 이동할 수 있어 체류 시간에도 유리합니다.
ESG 페이지에도 SEO 구조화 데이터가 필요한가요?
필요합니다. 보도자료나 사회공헌 사건처럼 개별 항목이 쌓이는 콘텐츠는 Article이나 Event 구조화 데이터를 적용하면 특정 사건 검색에서 개별적으로 노출될 가능성이 커집니다. 지금처럼 한 페이지에 텍스트로만 담겨 있으면 이 기회를 놓치기 쉽습니다.
사회공헌 페이지 제작도 일반 기업 홈페이지 제작과 비용이 비슷한가요?
콘텐츠 구조와 영상·인터랙션 요소의 범위에 따라 달라집니다. 타임라인이나 아코디언 같은 인터랙션이 들어갈수록 개발 범위가 늘어나므로, 요구사항을 정리한 뒤 상담을 통해 범위를 정하는 편이 정확합니다.
디지털 파트너 더블루캔버스
사회공헌 페이지는 일반 서비스 페이지와 다른 과제를 안는다. 전환을 유도할 필요는 없지만, 신뢰를 구체적인 사실과 숫자로 증명해야 한다. 막연한 선언문으로 채워진 ESG 페이지는 읽히지 않고, 사건과 숫자가 빠진 페이지는 검색에서도 발견되지 않는다.
The Blue Canvas(더블루캔버스)는 기업의 사회공헌·ESG 콘텐츠를 다룰 때 연혁을 타임라인 구조로, 개별 활동을 구조화 데이터로 나눠 설계한다. 서사로 읽히면서도 검색엔진이 개별 사건을 인식할 수 있는 형태로 만드는 작업이며, 이 균형이 ESG 콘텐츠가 실제로 인용되게 하는 조건이다.
마무리와 다음 스텝
토스임팩트는 연혁을 타임라인으로 구조화하고, 사회적 실천을 세 카테고리로 분류하고, 뮤직비디오까지 연결해 사회공헌 메시지를 서사로 풀어낸 완성도 높은 페이지다. 메타 태그와 오픈그래프도 빠짐없이 채워져 있어 링크 공유 품질도 안정적이다.
실행 제안은 셋이다. 첫째, 타임라인 속 8개 이정표와 최근 소식의 개별 항목에 Article·Event 구조화 데이터를 적용해 개별 검색 노출을 늘린다. 둘째, 뮤직비디오와 영상 콘텐츠에 자막이나 텍스트 요약을 함께 제공해 접근성을 보완한다. 셋째, hreflang을 검토해 해외에서 토스의 사회공헌 활동을 찾는 방문자에게도 대응한다. 서사의 완성도는 이미 갖췄으니, 남은 과제는 그 서사를 개별 사실 단위로도 발견되게 하는 일이다.
