Overview

상위 20% 기능을 가장 쉽게 — 그리고 계속 진화하는 앱 The easiest experience for top 20% functions — and an app that keeps evolving

"현대카드는 물리 카드를 3세대까지 업데이트했지만, 디지털 카드는 그 속도로 발전하지 못했습니다."

"Hyundaicard updated the physical card plate to the 3rd version, but the digital experience hadn't developed as fast as it was supposed to."

Project brief

현대카드 앱은 가장 많이 쓰는 상위 20% 기능을 가장 쉽게 사용할 수 있도록 설계되었습니다. 그리고 사용자들이 모바일로 모든 것을 해결하기를 원하는 만큼, 앱은 끊임없이 진화해야 했습니다 — PC보다 모바일을 더 많이 쓰는 시대이므로. The Hyundaicard app aimed for the easiest mobile usage for the top 20% of functions. And because users want to do everything on mobile — using mobile more than PC — the app had to evolve constantly.

팀 리더로서 디자인 방향성을 정의하고, 원칙을 세우고, 팀원들과 함께 실행했습니다. Perpetual β — 베타는 끝나지 않습니다. 더 나은 경험을 향한 반복은 계속됩니다. As team leader, I defined the design direction, established principles, and executed alongside the team. Perpetual β — the beta never ends. Iteration toward a better experience continues.

Role Senior UX Designer / Team Leader
Scope 앱 전체 UX 재설계 — My Account, Finance, Lock & Limit, Messaging Full app UX redesign — My Account, Finance, Lock & Limit, Messaging
Skills
UX Strategy Interaction Design Visual Design UX Writing Team Leadership Sketch InVision
Period Jan 2018 – Nov 2018 (11개월)

From

Simple
Distilled
Logical

To

Simple
Bold
Witty

Simple · Principles

단순함은 줄이는 것이 아니라, 올바른 순서를 찾는 것 Simplicity isn't about removing — it's about finding the right order

Simple · 01

한 번에 하나씩, 순서대로 One step at a time, in order

One step at One time One step at One time

한 화면에 너무 많은 정보와 선택이 있으면 사용자는 멈춥니다. 각 단계에서 사용자에게 요구하는 것을 하나로 줄이고, 이전 단계에서 입력한 정보는 다시 입력하지 않아도 됩니다. 흐름이 명확해지면 사용자는 생각하지 않고 다음 단계로 넘어갑니다. Too much information and too many choices on one screen stops users cold. We reduced each step to a single ask, and reused information entered in previous steps. When the flow is clear, users move to the next step without thinking.

단계별 진행 → 완료율 향상 Step-by-step flow → Higher completion rate
결제 현황 Payment status
단계 진행 Step flow
혜택 조회 Benefit check
버튼 / 선택 Buttons / Choice
버튼 / 선택 Buttons / Choice

Simple · 02

직관적인 색상과 큰 터치 영역 Intuitive color and big touch targets

Intuitive color and big buttons Intuitive color and big buttons

이번 달 결제 예정 금액에만 집중할 수 있도록 다음 달 결제와 분리했습니다. 가장 자주 쓰는 기능은 더 크게 만들어 터치하기 쉽게 했습니다. 중요한 숫자와 정보는 색상으로 구분해 스캔에 최적화했습니다. We separated this month's payment from the next month's to allow focus. The most frequently used elements became bigger for easier touch. Key numbers and information were differentiated by color for scan optimization.

사용 빈도 기반 레이아웃 우선순위 Layout priority based on usage frequency
결제 현황 Payment status
단계 진행 Step flow
혜택 조회 Benefit check
버튼 / 선택 Buttons / Choice

Simple · 03

소비 데이터로 혜택을 즉각 확인 Check benefits instantly from spending data

At a glance benefit check At a glance benefit check

소비 데이터를 기반으로 어떤 혜택이 가능한지 한눈에 확인. 중요한 정보를 하이라이팅해 스캔 속도를 높였습니다. 베타 서비스에서 배운 것: 자연어 문장보다 버튼, 복수 선택 같은 더 쉬운 옵션이 완료율을 높입니다. View available benefits at a glance based on spending data. Highlighting important information speeds scanning. Lesson from beta: easier options like buttons and multiple choice outperform natural language lines for completion rates.

베타 테스트 → 인터랙션 패턴 개선 Beta test → Interaction pattern improvement
결제 현황 Payment status
단계 진행 Step flow
혜택 조회 Benefit check
버튼 / 선택 Buttons / Choice

Bold · Color Scheme

섹션마다 명확한 색상 언어 A clear color language for each section

My Account, Finance, Point — 각 섹션이 고유한 색상 아이덴티티를 갖도록 설계했습니다. 사용자는 색상만 봐도 자신이 어느 영역에 있는지 즉각 인식합니다. My Account, Finance, Point — each section was designed with its own color identity. Users instantly know which area they're in just from the color.

My Account

Before
After

Finance

Before
After

Point color: M·X

Before
After

My Account

결제·이용 내역 중심 Payment & usage history

이번 달 결제 예정, 이용 내역, 포인트 현황. 가장 자주 여는 화면을 가장 빠르게 스캔할 수 있도록 대형 숫자와 직관적인 색상을 사용했습니다. Upcoming payment, usage history, point status. Large numbers and intuitive color enable the most-opened screen to be scanned fastest.

Finance

자산·소비 분석 Asset & spending analysis

소비 패턴 분석, 혜택 확인, 금융 상품 추천. 데이터 기반 인사이트를 간결하게 시각화했습니다. Spending pattern analysis, benefit confirmation, financial product recommendations. Data-driven insights visualized concisely.

Lock & Limit

보안·한도 관리 Security & limit management

카드 잠금, 한도 설정, 해외 사용 설정. 민감한 기능이지만 사용 빈도를 고려해 접근성을 높였습니다. Card lock, limit settings, overseas usage. Sensitive functions, but access was improved given usage frequency.

Bold · Layout

현대카드다운 레이아웃 언어 A layout language that feels like Hyundaicard

M3 카드가 가진 대담한 타이포그래피, 강렬한 여백, 선명한 대비를 디지털 화면으로 옮겼습니다. 물리 카드의 시각 언어가 앱 안에서 살아납니다. The bold typography, deliberate whitespace, and sharp contrast of the M3 card were translated into the digital screen. The physical card's visual language comes alive inside the app.

Witty · Message

브랜드 언어를 하나로 통일하다 Unifying the brand language

각 화면마다 제각기였던 말투와 문체를 하나의 브랜드 언어로 통합했습니다. 긴 안내 문장은 짧고 대화적인 표현으로 바꾸고, 자연어 선택지는 버튼으로 바꿔 완료율을 높였습니다. The disparate tone and writing style across screens was unified into one brand voice. Long instructional sentences became short and conversational, and natural language choices became buttons — improving completion rates.

Before

안내문 스타일의 말투 Instructional tone

자연어로 늘어쓴 긴 문장. 브랜드 페르소나가 없고 채널마다 목소리가 달랐습니다. "안녕하세요 니카드중입니다"처럼 딱딱하고 일관성 없는 메시지. Long sentences written out in natural language. No brand persona, and a different voice on every channel. Stiff, inconsistent messages.

After

Witty한 브랜드 페르소나 Witty brand persona

짧고 개성 있는 브랜드 언어. 자연어 선택지 대신 버튼으로 전환해 완료율을 높였습니다. "헤이, 어디라구?" — 사용자가 예상하지 못한 방식으로 브랜드 개성을 드러냅니다. Short, distinctive brand language. Buttons instead of natural language choices improve completion. "Hey, where?" — revealing brand personality in unexpected ways.

Beta Service Learning

자연어 문장은 설명하지만, 버튼은 행동하게 만든다 Natural language explains. Buttons make people act.

베타 서비스를 운영하면서 배운 것은 명확했습니다. 사용자들은 긴 안내 문장을 읽지 않습니다. 버튼, 복수 선택, 짧은 레이블이 완료율을 높이고 오류를 줄입니다. UX 라이팅은 문학이 아니라 행동 설계입니다. The beta service taught us something clear. Users don't read long instructional text. Buttons, multiple choice, and short labels improve completion rates and reduce errors. UX writing is not literature — it's behavior design.

Reflection

Perpetual β가 남긴 것 What Perpetual β left behind

디지털 제품은 물리 제품과 달리 '완성'이 없습니다. 현대카드 앱을 처음부터 다시 만들면서 가장 크게 배운 것은, 원칙이 있으면 팀이 빠르게 판단할 수 있다는 것이었습니다. Unlike physical products, digital products are never "finished." The biggest lesson from rebuilding the Hyundaicard app from scratch: when principles are clear, the team can make decisions fast.

Simple, Bold, Witty는 단순한 슬로건이 아니었습니다. 팀 리더로서 모든 결정의 기준이 되는 필터였습니다. "이 디자인은 Simple한가? Bold한가? Witty한가?" — 이 세 가지 질문이 수백 가지 세부 결정을 빠르게 만들어주었습니다. Simple, Bold, Witty wasn't just a slogan. As team leader, it was the filter for every decision. "Is this design Simple? Bold? Witty?" — these three questions accelerated hundreds of detail-level decisions.

배운 것 Key learning 원칙이 명확하면 팀이 빠르게 판단한다. 베타 서비스는 가정을 검증하는 가장 빠른 방법이다. Clear principles enable fast team decisions. Beta service is the fastest way to validate assumptions.
도구 변화 Tool shift Sketch + InVision → 이후 Figma 전환의 동기가 됨. 협업 도구의 한계를 직접 경험한 시기. Sketch + InVision → Became the motivation for later Figma migration. A period of directly experiencing collaboration tool limitations.
리더십 Leadership 팀 리더로서 처음 전체 방향성을 정의하고 실행한 프로젝트. 개인 산출물보다 팀의 판단 기준을 설계하는 것이 리더의 역할임을 배움. First project as team leader defining and executing full direction. Learned that a leader's role is to design the team's decision criteria, not individual outputs.