개요
핵심 요약
- 토스 메인 페이지는 ‘금융부터 일상까지 마침내 토스 하나로’라는 히어로 카피와 인물 사진으로 시작한다.
- 송금·자산관리·주식·카드·보험 학습을 각각 별도 섹션으로 나누고, 실제 앱 화면 목업 이미지를 함께 배치한다.
- ‘상품 판매와 정산 이것마저도 토스로’ 섹션에서 이커머스 판매자를 위한 정산 기능을 소비자 기능과 같은 층위로 다룬다.
- ‘토스의 3,000만 고객이 내 고객이 될 때까지’ 섹션은 소비자 서비스에서 비즈니스 파트너 유치로 화제를 전환하는 지점이다.
- 페이지 마무리는 ‘All in one App’ 문구와 지구본 그래픽으로, og:url은 `new.toss.im`을 가리키고 있어 실제 서비스 도메인과 표시 도메인이 다르다.
토스는 간편송금으로 시작해 결제·투자·보험·비즈니스 서비스까지 확장한 핀테크 기업이다. 메인 페이지 첫 화면은 지하철 창가에 앉은 인물 사진 위에 ‘금융부터 일상까지’, ‘마침내’, ‘토스 하나로’라는 세 구절을 순서대로 강조해 보여준다. 서비스 나열 대신 ‘하나로 통합됐다’는 결론을 먼저 던지는 구성이다.
히어로 다음으로는 송금, 자산 관리, 주식·카드·보험 학습, 실시간 투자 대시보드, 이커머스 정산, 비즈니스 파트너 소개, 브랜드 디자인, ‘토스가 바꿀 일상’, ‘All in one App’ 순서로 이어진다. 이번 리뷰에서는 소비자용 기능과 사업자용 기능을 한 페이지 흐름 안에 배치한 정보 구조와, 실제 서비스 도메인이 표시 URL과 다른 지점을 살펴본다.
브랜드 & 메시지
브랜드 화법은 ‘여러 개를 하나로 줄인다’는 문장을 반복한다. ‘첫 만만 누르면 끝나는 송금’, ‘자산을 관리하는 일은 한켓 단순하게’, ‘공부할 필요 없이 누구나 금융 전문가로’처럼 각 섹션 제목이 전부 ‘복잡한 것을 간단하게 만들었다’는 구조를 공유한다. 금융 용어를 설명하는 대신, 그 용어를 몰라도 되게 만들었다는 점을 카피로 삼는다.
후반부에서는 톤이 한 번 바뀐다. ‘토스의 3,000만 고객이 내 고객이 될 때까지’, ‘함께 매출을 만드는 든든한 비즈니스 파트너로서’는 소비자가 아니라 입점을 고민하는 사업자를 향한 문장이다. 같은 브랜드 언어(간단함, 신뢰)를 유지하면서 청자만 소비자에서 사업자로 바꾼 구성이며, ‘어떤 공간에도 어울리는 디자인’ 섹션에서 아이맥·스마트폰 목업으로 브랜드 디자인 언어를 한 번 더 각인시킨 뒤 다시 소비자 메시지로 돌아온다.
UX/UI 관점
강점은 다섯 가지다. 첫째, 각 기능 섹션마다 실제 앱 화면을 그대로 목업으로 보여줘, 카피만으로 설명하지 않고 사용자가 실제 화면을 미리 확인하게 한다. 둘째, 주식·카드·보험 세 카드를 나란히 배치해 ‘공부할 필요 없이’라는 카피를 세 가지 구체적 사례로 뒷받침했다.
셋째, 실시간 투자 대시보드 섹션에서 다크 톤 배경에 그래프와 수치를 강조해, 앞선 밝은 톤 섹션들과 시각적으로 구분되는 지점을 만들었다. 넷째, 이커머스 정산 섹션에서 상품 이미지와 판매 금액을 실제 사례처럼 배치해, ‘토스로 정산한다’는 추상적 문장을 구체적 화면으로 증명했다. 다섯째, 비즈니스 파트너 섹션 이후에 ‘토스가 바꿀 일상’으로 다시 소비자 메시지로 돌아와, 사업자 소개가 소비자 방문자에게 이질감을 주지 않도록 순서를 배치했다.
IA·SEO 전략
title은 ‘토스’, meta description은 ‘금융부터 일상까지 마침내 토스 하나로.’로 히어로 카피와 정확히 일치한다. og:title·og:description·og:image·og:site_name도 모두 채워져 있다. 다만 og:url은 `https://new.toss.im/`로 선언돼 있어, 방문자가 실제로 접속한 `toss.im` 도메인과 오픈그래프가 가리키는 도메인이 다르다. 링크를 공유하면 미리보기 카드의 URL 표시가 실제 주소창과 어긋날 수 있는 지점이다.
canonical 링크와 JSON-LD 구조화 데이터는 이 페이지에서 확인되지 않는다. 소비자 기능과 비즈니스 기능을 한 페이지에서 함께 다루는 만큼, Organization 구조화 데이터로 토스라는 기업 엔티티를 명확히 하고 하위 서비스(송금, 증권, 보험 등)를 연결하면 브랜드 검색과 서비스별 검색 모두에서 신호를 줄 수 있다.
성능·접근성
Next.js 기반으로 body에 스트리밍 마크업(`<template id="B:0">`)이 사용되고 있어 서버 렌더링과 점진적 하이드레이션을 함께 쓰는 구조로 보인다. 다수의 목업 이미지와 대시보드 그래픽, 영상성 배경이 섹션마다 이어지는 만큼, 뷰포트 밖 섹션의 이미지는 지연 로딩을 적용해 스크롤 초반 로딩 부담을 줄이는 편이 좋다.
접근성 측면에서는 밝은 톤과 다크 톤 섹션이 번갈아 나타나는 구조에서, 각 섹션 전환 시 텍스트 대비가 일관되게 유지되는지 점검이 필요하다. 앱 목업 이미지에 담긴 수치나 그래프 정보가 대체 텍스트로도 전달되는지, 지구본 그래픽처럼 장식적 요소와 의미 전달용 이미지가 명확히 구분돼 있는지 확인하는 편이 좋다.
자주 묻는 질문
토스 메인 페이지는 어떤 서비스를 소개하나요?
송금, 자산 관리, 주식·카드·보험, 실시간 투자, 이커머스 정산까지 소비자·사업자 기능을 한 페이지 안에서 순서대로 소개합니다. 후반부에서는 입점을 고민하는 사업자를 향한 비즈니스 파트너 섹션으로 화제가 전환됩니다.
소비자용 서비스와 사업자용 서비스를 한 페이지에 함께 담아도 되나요?
가능합니다. 다만 청자가 바뀌는 지점에서 톤과 메시지를 자연스럽게 전환하는 설계가 필요합니다. 토스처럼 소비자 메시지 사이에 사업자 섹션을 끼워 넣고 다시 소비자 메시지로 돌아오는 구성이 한 예입니다.
og:url과 실제 접속 도메인이 다르면 어떤 문제가 생기나요?
링크 공유 시 미리보기 카드에 표시되는 URL이 실제 주소창과 달라 보일 수 있습니다. 사용자가 혼란을 느끼거나, 검색엔진이 두 도메인을 어떻게 처리할지 판단하기 어려워질 수 있어 canonical과 og:url을 실제 서비스 도메인과 일치시키는 편이 안전합니다.
핀테크 회사 홈페이지 제작 시 가장 먼저 고려해야 할 것은 무엇인가요?
어떤 서비스를 어떤 순서로 보여줄지, 소비자와 사업자 중 누구를 우선할지를 먼저 정해야 합니다. 정보 구조가 정해진 뒤에야 카피와 화면 설계가 뒤따라야 방향이 흔들리지 않습니다.
디지털 파트너 더블루캔버스
여러 서비스를 운영하는 회사의 메인 페이지는 무엇을 먼저 보여줄지 정하는 일부터 어렵다. 모든 서비스를 같은 비중으로 다루면 핵심 메시지가 흐려지고, 하나만 강조하면 나머지 서비스의 존재가 묻힌다. 소비자와 사업자처럼 서로 다른 방문자를 한 페이지에서 상대해야 할 때는 그 어려움이 배가된다.
The Blue Canvas(더블루캔버스)는 다중 서비스를 운영하는 기업의 메인 페이지를 설계할 때 방문자 유형별 우선순위를 먼저 정하고, 그 순서에 따라 섹션과 톤 전환 지점을 배치한다. 소비자 메시지와 사업자 메시지가 같은 페이지 안에서도 서로를 방해하지 않도록 만드는 작업이며, 메타데이터 역시 이 구조에 맞춰 실제 서비스 도메인과 일치시킨다.
마무리와 다음 스텝
토스 메인 페이지는 다수의 서비스를 ‘하나로 줄인다’는 일관된 화법으로 묶고, 실제 앱 화면 목업으로 각 기능을 구체적으로 증명하며, 소비자에서 사업자로 청자를 자연스럽게 전환하는 구조를 갖췄다. 밝은 톤과 다크 톤을 번갈아 배치해 긴 스크롤 안에서도 지루함을 줄인 점도 눈에 띈다.
실행 제안은 셋이다. 첫째, og:url을 실제 접속 도메인과 일치시켜 링크 공유 시 혼란을 없앤다. 둘째, canonical과 Organization 구조화 데이터를 추가해 브랜드 검색과 서비스별 검색을 함께 대응한다. 셋째, 다크 톤 섹션 전환 구간의 텍스트 대비와 목업 이미지의 대체 텍스트를 점검한다. 서비스를 하나로 통합했다는 메시지는 이미 화면에 있으니, 남은 과제는 그 메시지를 검색엔진에도 일관되게 전달하는 일이다.
