토스, 이렇게 편해져도 되는 거야?👀 (1)

안녕하세요, 팔랑크스 크루 여러분! 👋
여름 시즌이 서서히 끝나가고 있는데, 다들 아쉬움 없이 잘 마무리하고 계신가요? 🌞🍉
 
이번에 저는 토스 UI/UX 개선을 주제로 기획을 진행했습니다.
토스는 이미 디자인적으로 완성도가 높은 서비스이지만, 개인적으로 “이 부분이 조금 더 개선되면 좋겠다!” 싶은 요소들을 찾아 개선안을 만들었고, 프로토타입 제작까지 진행해 보았습니다. 🎯
 
 이번 기획은 다루는 범위가 꽤 넓고 디테일도 많아서 1편과 2편으로 나누어 진행하게 되었습니다.
이번 1편에서는 TB01과 TB02를 중심으로 소개하고,
다음 2편에서는 TB03, 블록트리 우선순위 설정, 그리고 전체 기획 요약까지 담아 완성된 결과물을 보여드릴 예정입니다. ✨

---

지난 기획안 : 
https://phalanx-club.tistory.com/2247

토스에 금융 콘텐츠 있다는 거, 우리끼리만 알자🤫🤫

https://phalanx-club.tistory.com/2277

토스에 숨어 있는 금융/법률 콘텐츠, 이제는 내 눈 앞으로👁️👁️

---

STEP00.  내용의 구조화 내용 변경 

1. 구조 개편 배경

• 기존 기획(1번 이미지)은 TB01~TB04까지 총 4개의 대주제로 구성되어 있었고, 웹·앱·학습/아카이빙까지 포함되어 범위가 지나치게 넓었습니다. 💢
• UB 단위에서 기능 중복이 다수 발생 (예: 오리지널 시리즈 구조 개선, 자동 추천 기능이 웹·앱에 중복 존재) 🔁
• 제한된 자원과 현재 자본을 고려했을 때, 효율성과 실행력을 높이기 위해 구조 조정이 필요했습니다. ⚙️

2. 구조 조정 방향

1️⃣ 핵심 효과 중심으로 범위 압축
2️⃣ 중복 기능 통합으로 리소스 효율 극대화
3️⃣ TB01~TB03만 유지, 우선순위 낮은 TB04(학습/아카이빙) 제외

3. 변경 전·후 비교

 

변경 전

 

변경 후

구분	변경 전	변경 후
구성 범위	TB01~TB04(4개 대주제) 포함: 웹·앱 개선, 아카이빙·학습 기능까지 포괄	TB04(학습/복습 및 아카이빙 구조) 제외
중복 기능	1. UB02·UB03 모두 ‘오리지널 시리즈 구조 개선’ 포함 2. ‘콘텐츠 카드 내 자동 추천’ 중복 존재	1. 각 채널 특성에 맞게 기능 분리·배치  2. ‘자동 추천’ 기능은 UI 개선 항목으로 통합
우선순위	웹·앱·아카이빙 기능이 병렬로 나열되어 우선순위 불명확	자본·리소스 대비 단기간 효과 기대되는 ‘콘텐츠 접근·실행 구조’와 ‘UX 개선’ 우선 배치

---

STEP 01 .   내 기획 내용을 디테일하게 설정하자 !

💡 [ TB01. 개인화 기반 콘텐츠 접근 및 실행 구조 기획 ]

TB01. 개인화 기반 콘텐츠 접근 및 실행 구조 기획

UB01-1. 사용자 속성 기반 콘텐츠 큐레이션 설계( 연령/직업/자산/관심사)

자체제작

• 연령·직업·자산·관심사 데이터를 기반으로 주제군 규칙 매핑 테이블을 설계하고, 신규 가입·속성 변경 시 즉시 갱신되도록 이벤트 트리거 기반 매핑 로직을 구축한다. ( ex. 20대 대학생이면 → 장학금·청년지원 정책, 30대 직장인이고 대출이 있으면 → 대출금리·상환 팁을 바로 연결 )
• 주제군을 세부 카테고리·하위 태그까지 계층화하여 연령대·직업군별 특화 콘텐츠 패키지를 자동 조합하는 모듈을 설계한다. ( ex. 큰 덩어리(투자, 저축, 대출…)로만 구분하지 않고, 그 안에서도 세부 항목(예: ‘해외주식’, ‘적금’, ‘청년 전세대출’)까지 나눠서, 사용자 조건에 맞는 맞춤 세트를 만듦 )
• 자산 규모와 금융 행태 데이터를 반영해 투자/저축/대출 등 재무 상태 맞춤형 콘텐츠 우선순위를 동적으로 부여한다.
• 관심사 데이터에 시계열 가중치(최근성·빈도·연속성)를 적용해 변화하는 관심 흐름을 반영하는 주제군 추천 엔진을 구성한다.
• 추천 주제군에 의도적인 다양성·탐색 요소를 포함시켜 필터 버블을 완화한다.

연령, 직업, 자산, 관심사 등 사용자 데이터를 기반으로 콘텐츠 주제군 자동 매핑

UB01-2. AI 기반 해시태그 및 추천 알고리즘 적용

자체제작

• 유사 사용자 행동 데이터(클릭·저장·공유·체류 시간)를 기반으로 협업 필터링+콘텐츠 기반 추천을 결합한 하이브리드 추천 로직을 설계한다.
• 추천 결과를 재랭킹할 때 신선도·다양성·신뢰도·실행 가능성 점수를 피처로 활용하여 편향과 중복을 최소화한다.
• 콘텐츠 본문·제목·메타데이터를 자연어 처리(NER·키워드 추출)와 문장 임베딩 모델로 분석해 주제·인물·기관·상품 태그를 자동 생성한다. ( ex. “청년 전세자금 대출 금리 인하”*라는 글이면 → 태그: #청년 #전세자금대출 #금리인하 #주택도시기금 )
• 생성된 태그를 표준화 사전과 매핑해 동의어·변형어를 통합하고, 카테고리별 상·하위 관계를 부여해 탐색 구조를 최적화한다. ( ex. #주택대출 → 상위 카테고리, #전세자금대출 → 하위 카테고리 ) 

콘텐츠에 자동 태그를 붙이고, 유사 사용자 행동 데이터를 통해 개인화 추천 구조 설계

---

💡 [ TB02. 【WEB】 UX 개선 및 정보 접근 구조화 ]

 

UB02-1. 홈 화면 콘텐츠 재배치

토스피드 홈화면 상위 노출

• 상위 영역에서 ‘이주의 콘텐츠’ 옆에 ‘지금 많이 보는 콘텐츠’와 ‘오늘의 금전운’을 병렬로 배치해 다양한 화제 콘텐츠를 동시에 제공한다.
• 기존에는 무작위로 조합된 아티클이 노출되었으나, 이제는 사용자의 나이대별 현재 관심사와 개인 알고리즘 기반 추천 기사를 2열로 배치해 맞춤성을 강화한다.

토스피드 홈 화면 하단 노출

• 하위 영역의 기존 순서(필진 큐레이션 → 오리지널 시리즈 → 방금 올라온 콘텐츠)를 ‘오리지널 시리즈 → 필진 큐레이션 → 방금 올라온 콘텐츠’로 변경해 상위 개인화 블록과의 연계성을 높인다.
• 오리지널 시리즈는 기존 무작위 4개 노출에서 벗어나 추천된 4개 시리즈만 노출하고, 카테고리별로 구분해 별도의 ‘전체 시리즈 보기’ 클릭 없이 기본 홈 화면에서 바로 확인 가능하게 하여 접근성을 향상한다.

정리

구분	개선 전	개선 후
상위 영역 구성	‘이주의 콘텐츠’ 단일 블록만 노출	‘이주의 콘텐츠’ 옆에 ‘지금 많이 보는 콘텐츠’와 ‘오늘의 금전운’을 병렬로 배치
상위 영역 추천 아티클	무작위로 조합된 아티클 노출	사용자의 나이대별 현재 관심사와 개인 알고리즘 기반 추천 기사를 2열로 배치
하위 영역 순서	필진 큐레이션 → 오리지널 시리즈 → 방금 올라온 콘텐츠	오리지널 시리즈 → 필진 큐레이션 → 방금 올라온 콘텐츠로 변경해 상위 개인화 블록과 연계성 강화
오리지널 시리즈 구성	무작위 4개 시리즈 노출	추천된 4개 시리즈만 노출, 카테고리별 구분 제공
카테고리 접근성	‘전체 시리즈 보기’ 클릭 후에야 카테고리 확인 가능	기본 홈 화면에서 카테고리별 시리즈를 바로 확인 가능, 관심 분야 접근성 향상

---

UB02-2. 토스피드 에디션 박스형 미리보기 UI 도입 및 2열 동적 레이아웃 적용

토스피드에디션 UI/UX개선

• 기존에는 에디션 제목만 세로 리스트로 단순 나열되어 있어 사용자가 각 에디션의 내용을 직관적으로 파악하기 어려웠으나, 이를 시각적으로 한눈에 들어오도록 블록형 박스 레이아웃으로 전환하였다.
• 각 에디션은 2열 배치를 기본으로 하고, 콘텐츠 양에 따라 박스의 세로 길이가 유동적으로 변하도록 설계하여 레이아웃의 유연성과 가독성을 동시에 확보하였다.
• 박스 내부에는 모든 아티클을 담지 않고 핵심 주제와 대표 이미지를 포함한 ‘맛보기’ 형태로 요약하여, 사용자가 클릭 전에 해당 에디션의 성격과 주요 콘텐츠를 쉽게 이해할 수 있게 하였다.
• 블록형 구조로 변경하면서 이미지·텍스트·하이라이트를 조합해 정보 밀도를 높였으며, 클릭 시 해당 에디션의 상세 페이지로 자연스럽게 이동하도록 연결성을 강화하였다.
• 이를 통해 기존 리스트형 UI 대비 사용자 체류 시간과 클릭 유도를 극대화하고, 개별 에디션의 콘텐츠 발견성을 높여 전반적인 이용 경험을 개선하였다.

정리

구분	개선 전	개선 후
레이아웃	에디션 제목만 세로 리스트로 나열	블록형 박스 구조로 2열 배치
내용 파악 용이성	제목만 보고 내용 추측 어려움	박스 내 대표 이미지·주요 아티클 맛보기 제공
가변성	모든 항목 동일한 텍스트 높이	콘텐츠 양에 따라 박스 세로 길이 유동 조절
콘텐츠 노출 방식	모든 내용은 상세 페이지에서만 확인 가능	핵심 요약 정보와 대표 이미지로 미리보기 제공
사용자 행동 유도	클릭 유도 요소 제한적	시각적 정보 강화로 클릭 유도 및 체류 시간 증가

---

UB02-3. '금융의 모든 것' 탭 구조 확장 및 라이브러리 내 오리지널 시리즈 통합

• 기존 상단의 ‘추천 아티클’ 영역을 사용자의 나이대별 많이 본 콘텐츠나 개인 알고리즘 기반 추천 아티클로 교체해 개인화 노출 강도를 높였다.
• 기존 ‘뉴스 / 라이브러리 / 라이프 / 인터뷰 / 영상’ 중심의 단순 카테고리 체계를 유지하되, 라이브러리 내부에 오리지널 시리즈 카테고리(세금, 보험, 부동산 등)를 탭 형태로 추가하여 세부 탐색 경로를 확장했다.
• 새로 추가된 오리지널 시리즈 카테고리는 상단 탭 영역에 전면 배치되어, 사용자가 클릭 시 해당 주제의 콘텐츠를 먼저 노출하고, 그 아래에 관련 에디션 묶음을 자동으로 보여주는 구조로 변경했다.
• 주제 탭과 기존 카테고리 구조를 통합하여 콘텐츠 발견성과 탐색 흐름을 자연스럽게 연결하고, 사용자가 관심 있는 주제로 바로 진입할 수 있도록 했다.
• 이를 통해 기존의 정적인 추천·탐색 구조를 개인화 + 주제 중심의 동적 구조로 개편하여 클릭률과 체류 시간을 동시에 향상시키고자 했다. 

정리

구분	개선 전	개선후
상위 추천 영역	‘추천 아티클’ 고정 노출	나이대별 많이 본 콘텐츠 또는 개인 알고리즘 기반 추천 아티클 노출
카테고리 구조	뉴스 / 라이브러리 / 라이프 / 인터뷰 / 영상	기존 카테고리 유지 + 라이브러리 내 오리지널 시리즈 카테고리(세금, 보험, 부동산 등) 탭 추가
탭 노출 방식	상단 카테고리에 세부 주제 미노출	세부 주제(오리지널 시리즈 카테고리)를 상단 탭 전면 배치
탭 클릭 시 동작	해당 카테고리 내 모든 글 노출	선택한 주제의 글 우선 노출 + 관련 에디션 묶음 자동 노출
탐색 흐름	카테고리 이동 후 콘텐츠 탐색	주제 선택 → 관련 글 & 에디션 즉시 노출로 탐색 동선 단축

---

기획자로서 직접 콘텐츠 이동 경로를 분석하고, 이를 토대로 UI/UX 흐름을 재설계해 사용자 편의성을 높이려고 했습니다. 

토스, 이렇게 편해질 수 있다고요?_끝 👀