3단계 프로세스를 1단계로: QuickSync로 하드웨어 월렛 연결 UX 혁신하기

하드웨어 월렛 사용자가 가장 답답해하는 순간은 언제일까요? 바로 중요한 거래를 진행하던 중 기기 연결이 필요해 메인 화면으로 돌아가야 하는 순간입니다. D’CENT 월렛은 이 문제를 QuickSync로 해결했습니다.

들어가며

안녕하세요, 아이오트러스트 프로덕트팀 프론트엔드 엔지니어 강보현, 프로덕트 디자이너 신혜선입니다!

최근 저희 팀은 사용자들로부터 매우 긍정적인 피드백을 받은 기능을 출시했습니다. 바로 QuickSync입니다.

단순해 보이는 이 기능 하나가 어떻게 전체 사용자 경험을 크게 개선했는지, 그리고 이를 구현하며 겪은 기술적 도전과 해결 과정을 공유하고자 합니다.

1. 문제 정의: “왜 자꾸 메인으로 돌아가야 하나요?”

1.1 기존 플로우의 치명적인 UX 문제

D’CENT 월렛은 하드웨어 월렛(이하 기기)와 모바일 앱이 연동되어 작동하는 구조입니다. 보안을 위해 중요한 작업(거래 서명, 계정 관리 등)은 반드시 기기 인증이 필요합니다.

문제는 여기서 시작됩니다:

[기존 사용자 시나리오]
1. 사용자가 토큰 스왑을 진행 중 ⚡
2. 최종 거래 서명이 필요한 순간 도달
3. "기기가 연결되어 있지 않습니다" 메시지 표시 ❌
4. 메인 화면으로 강제 이동 ↩️
5. 기기 연결 진행
6. 다시 스왑 화면으로 이동
7. 처음부터 다시 시작... 😤

이런 경험을 몇 번 겪은 사용자들은 좌절감을 느끼고, 심지어 거래를 포기하기도 합니다. 특히 시장 변동성이 큰 암호화폐 거래에서 이런 지연은 실제 금전적 손실로 이어질 수 있죠.

2. 해결 아이디어: “그 자리에서 바로 연결하면 되잖아?”

기기 연결 과정에서 사용자의 흐름이 매번 끊기는 문제를 정리하다 보니, 결국 답은 명확했어요.

“그냥, 사용자가 하던 자리에서 바로 연결하면 되잖아?”

복잡한 동기화 절차나 메인 화면으로의 이동 없이, 사용자가 있던 맥락 그대로 연결이 이뤄지는 구조로 바꾸기로 했습니다. 이게 우리가 도달한 해결의 방향이었어요.

개발팀에 확인해보니, 기기 연결 요청이 언제, 어떤 케이스에서 나오는지 정리된 리스트가 따로 없었어요. 그래서 사용자들이 실제로 앱을 사용하는 전체 흐름을 직접 훑는 것부터 시작했습니다.

먼저 머릿속에 바로 떠오르는 케이스들을 적어 내려가며, 해당 화면을 직접 보면서 어떤 메시지가 나오는지 하나씩 확인했어요.

어떤 경우에는 ‘기기 연결을 확인해주세요’라는 토스트가, 또 어떤 경우에는 인풋 박스 아래 ‘기기가 연결되어 있지 않습니다’라는 에러 메시지가 나오고 있었습니다. 즉, 기기 연결이 필요한 상황을 알리는 방식이 통일되어 있지 않았다는 걸 발견했어요.

같은 맥락의 행동임에도 어떤 곳은 토스트, 어떤 곳은 에러메세지로. 사용자는 ‘연결이 필요하다’는 사실보다, “왜 여기서 막히는지”를 더 헷갈릴 수도 있었던 거죠.

이렇게 파편화된 메세지를 단서로, 개발팀에 관련 로그와 호출 케이스를 요청했고, 그 결과 앱 전반에서 기기 연결이 필요한 모든 시점을 빠짐없이 빠르게 정리할 수 있었어요.

리스트를 완성하고 나니, 문제의 본질이 명확해졌습니다.

“연결이 필요한 시점은 많지만, 연결 안내 방식은 제각각이다.” “즉, 사용자의 경험을 통합할 수 있는 ‘한 가지 연결 흐름’이 필요하다.”

이렇게 정리된 문제 인식을 바탕으로, 우리는 ‘그 자리에서 바로 연결되는 UX’, 즉 Context-Aware Connection 설계를 본격적으로 시작했습니다.

이제 유저는 화면을 벗어나지 않고, 보고 있던 컨텍스트 안에서 바로 연결을 완료할 수 있게 되는 거죠.

3. 흐름을 이어주는 지갑 연결하기

솔루션을 구상할 때는 ‘사용자가 진행하던 Task를 끝내지 못하고 메인 화면으로 돌아가야 한다’는 문제를 해결하기 위해 아래 네 가지를 기준으로 방향을 잡았어요.

• 사용 중이던 기능을 중단하지 않도록 기기를 연결해줘야 한다
• 사용자가 사용 중이던 작업을 인지할 수 있도록 해야 한다
• 모든 케이스에서 공통으로 사용할 수 있어야 한다
• 기기를 연결한 뒤 자연스럽게 이전 작업을 이어갈 수 있어야 한다

3.1 연결은 바텀시트에서

전체 화면 대신 바텀시트를 사용했어요. 사용자는 기존 화면을 그대로 보면서 연결 단계를 진행할 수 있고, 연결이 끝나면 바텀시트가 자연스럽게 닫히며 짧은 토스트로 결과를 알려줍니다.

“지갑을 연결 중입니다.”

단순한 문구 하나로, 현재 진행 상황을 명확하게 표현했어요. 진행 중임을 인식할 수 있도록 애니메이션이 있는 로딩 아이콘을 노출해, 사용자가 ‘지금 연결이 진행 중이구나’ 하는 감각을 잃지 않게 했습니다.

이 구조 덕분에 연결 과정이 화면 전체를 덮지 않고, 사용자가 보던 맥락 안에서 자연스럽게 이어집니다. 그렇게 “지금 내가 하던 작업이 그대로 유지되고 있다”는 안정감을 줄 수 있었어요.

3.2 어떤 지갑을 켜야 할지 명확하게

사용자가 “어떤 기기를 켜야 하지?” 하고 헷갈리지 않도록, 연결 대상에 대한 정보를 명확히 보여줬어요.

• 지갑 이름(라벨) — 사용자가 직접 설정한 이름
• 기기 ID — 하드웨어 지갑 화면과 동일한 식별값
• [최근 연결] 라벨 — “이전에 연결했던 바로 그 지갑이에요”라는 맥락 제공
• 기기 이미지 — 작은 버전으로 표시해 시선을 방해하지 않음

이 정보들을 통해 사용자는 “왜 이 지갑이 뜨는지”, “무엇을 켜야 하는지”를 자연스럽게 이해할 수 있어요. 특히 [최근 연결] 라벨은 “이전에 사용했던 내 지갑이 바로 이거구나” 하는 확신을 주죠.

3.3 자동으로 이어지는 연결

기기의 전원을 켜는 순간, 앱은 자동으로 연결 중 상태로 전환됩니다. 버튼을 추가로 누르거나, 다시 시도할 필요가 없어요.

연결이 완료되면 바텀시트는 자동으로 닫히고, “지갑이 연결되었습니다.”라는 짧은 토스트 메시지가 화면 하단에 뜹니다. 사용자는 아무런 조작 없이 그대로 작업을 이어갈 수 있죠.

복잡한 동기화 절차 대신 필요한 검증만 수행하는 QuickSync 구조로 연결 속도를 높였고, 전체 계정 동기화는 메인 화면에서만 수행하도록 분리했어요.

이 덕분에 “연결 과정이 길어졌다”는 피로감 없이, 사용자는 항상 ‘즉시 반응하는 연결 경험’을 느낄 수 있게 되었습니다.

결과: 사용자의 리듬을 잃지 않는 연결

이제 사용자는 기능을 사용하다가 지갑 연결이 필요해도 메인 화면으로 돌아갈 필요가 없습니다. 보고 있던 화면 안에서 바로 연결하고, 바텀시트가 닫히면 그대로 작업을 이어가면 되죠.

하드웨어–앱 간 연결이라는 복잡한 구조 속에서도 사용자의 흐름에 최소한으로 개입하면서, 끊김 없이 자연스러운 연결 경험을 만들 수 있었습니다.

결국 우리가 만들고 싶었던 건, ‘더 빠른 연결’이 아니라 사용자의 리듬을 지켜주는 연결 방식이었어요.

연결은 필요하지만, 흐름은 멈추지 않는다. 그게 우리가 찾은 QuickSync의 핵심입니다.

QuickSync AS-IS & TO-BE

4. 어떻게 만들었나: UX를 실현하는 기술 설계

4.1 두 가지 연결 방식: QuickSync vs FullSync

사용자 입장에서는 “그냥 연결되면 되는 거 아니야?”라고 생각할 수 있어요. 하지만 우리는 두 가지 상황을 구분해야 했습니다.

1️⃣ QuickSync — 흐름을 지키기 위한 빠른 연결

• 사용 상황: 거래 중, 기능 사용 중 (사용자가 “지금 당장” 필요한 순간)
• 목적: 사용자의 작업 흐름을 끊지 않기
• 검증 범위: 지갑 연결 + 현재 필요한 최소 정보만
• 사용자 체감: “즉시 반응하는” 경험

2️⃣ FullSync — 안전한 기반을 만드는 전체 동기화

• 사용 상황: 메인 화면, 계정 관리
• 목적: 모든 계정 정보의 정확성 보장
• 검증 범위: 전체 계정 동기화 + 잔액 확인 + 거래 내역
• 사용자 체감: “안정적인” 경험

왜 이렇게 나눴을까요?

거래 중인 사용자에게 “잠시만요, 모든 계정을 확인하고 있어요”라고 30초를 기다리게 할 수는 없었어요. 반대로 메인 화면에서는 모든 정보가 정확해야 사용자가 안심하고 지갑을 사용할 수 있죠.

결국 “언제 어떤 연결이 필요한가”에 따라 다른 경험을 제공하는 것이 더 나은 UX라는 결론에 도달했습니다.

4.2 모든 화면에서 동일한 경험 제공하기

QuickSync는 송금 화면, 스왑 화면, WalletConnect 연동 등 여러 곳에서 필요합니다.

🤔 초기 고민: 각 화면마다 개별적으로 연결 로직을 만들면 어떻게 될까요?

• 송금 화면에서는 이렇게, 스왑 화면에서는 조금 다르게…
• 결과: 사용자가 느끼는 연결 경험이 화면마다 달라짐
• 개발자도 매번 새로 만들어야 함

💡 해결책: 연결 로직을 한 곳에 모아서, 어느 화면에서든 QuickSync 바텀시트가 동일하게 작동하도록 만들었어요.

✅ 사용자 입장에서의 이점:

• 어디서 연결하든 익숙한 경험
• “아, 이거 저번에 봤던 거네” → 학습 비용 제로
• 일관성 있는 인터랙션

👩‍💻 개발 입장에서의 이점:

• 새 기능 추가할 때 몇 줄만 추가하면 됨
• 한 곳만 고치면 전체가 개선됨

이를 한 곳에서 관리하기 위해 useQuickSync라는 독립적인 훅으로 분리했습니다:

// QuickSync 핵심 구조
function useQuickSync() {
  return {
    // 1. 바텀시트 상태 (찾는 중 → 연결 중 → 완료)
    syncState,

    // 2. 자동 연결 실행
    executeSync,

    // 3. 기기 감지 (전원만 켜면 자동 인식)
    watchDeviceList
  };
}

// 사용 예시: 어떤 화면에서든 동일하게 사용
const { executeSync } = useQuickSync();
// 사용자가 "연결" 필요 시점 → executeSync() → QuickSync 바텀시트 표시

이렇게 분리한 덕분에 추후 다른 페이지에서 QuickSync가 필요한 경우에 코드 단 몇 줄만으로 바로 해당 기능을 완성할 수 있게 되었죠.

4.3 하나의 바텀시트, 다양한 상황 대응

QuickSync 바텀시트는 단순해 보이지만, 사실 여러 상황을 처리해야 했어요.

바텀시트가 보여줘야 하는 3가지 상태:

1. “지갑의 전원을 켜주세요” — 블루투스로 지갑 찾는 중
2. “지갑을 연결 중입니다 — 지갑과 통신 중
3. “지갑과의 연결이 끊어졌습니다” — 문제 발생 시 명확한 안내

그리고 연결 후 동작은 화면마다 달라야 함:

• 송금 화면에서 연결 → 바로 송금 진행
• 스왑 화면에서 연결 → 바로 스왑 진행
• 메인 화면에서 연결 → FullSync로 전환

설계 원칙: “보이는 건 동일하게, 동작은 유연하게”

사용자는 어디서든 똑같은 바텀시트를 보지만, 뒤에서는 각 상황에 맞게 다르게 처리됩니다. 이게 바로 일관성과 유연성의 균형이에요.

5. 점진적 확장: 작게 시작해서 크게 만들기

처음엔 가장 아픈 곳인 거래 중 연결이 끊긴 사용자들의 불편함에서부터 시작했습니다.

송금과 스왑 같은 핵심 기능에 먼저 적용해 효과를 검증한 후, WalletConnect 등 외부 서비스 연동으로 확장했습니다.

마지막으로 메인 화면 통합을 진행했는데, 이 과정에서 예상치 못한 피드백을 만났습니다:

CSO: “QuickSync 너무 좋던데 메인에서 계정 생성 진입할 때도 되면 좋을 것 같아요~”

보현: “메인에서는 무조건 FullSync를 진행하게끔 하는 게 맞겠다고 생각하여 QuickSync는 유저가 거래를 한참 진행하다가 뜨는 경우에만 진행할 수 있게끔 하였습니다!”

CSO: “사용성으로만 보면 메인에서도 QuickSync 바텀시트가 뜨고, 연결 후에 FullSync로 넘어가는 게 더 자연스러울 것 같은데요?”

이 피드백은 중요한 깨달음을 주었어요.

• 일관성 > 효율성: 때로는 기술적으로 비효율적이더라도 일관된 UX가 더 중요
• 단계적 전환: QuickSync → FullSync의 자연스러운 전환
• 유연한 설계: 다양한 시나리오를 수용할 수 있는 플래그 시스템 도입

6. 성과 측정: 숫자로 보는 개선 효과

6.1 정량적 성과

이번 개선 작업을 통해 사용자 경험이 크게 향상되었습니다. 가장 눈에 띄는 변화는 기기 연결까지 필요한 평균 클릭 수가 기존 7–9회에서 2–3회로 줄어들어 약 70% 감소했다는 점이에요. 이는 사용자가 목적지에 도달하기까지의 여정을 대폭 단축시켰습니다.

작업 완료 시간 역시 평균 45초에서 15초로 단축되어 67%의 시간 절감 효과를 보였어요. 3배 가까이 빨라진 셈이죠. 또한 새로운 진입점을 출시한 이후 1주일 동안 18,678회의 노출을 기록하며, 사용자들이 실제로 해당 기능을 많이 발견하고 사용하고 있음을 확인할 수 있었습니다.

6.2 개발자 경험(DX) 개선

사용자뿐만 아니라 개발자 경험도 크게 개선되었습니다. 새로운 진입점을 추가하는 데 걸리는 시간이 기존 2–3시간에서 10–15분으로 대폭 줄었어요. 이는 훅을 재사용하고 바텀시트를 전역 스토어에서 처리하도록 구조를 개선한 덕분입니다.

디버깅 시간도 평균 30분에서 10분으로 단축되었는데, 명확한 에러 타입을 정의하여 문제 원인을 빠르게 파악할 수 있게 된 것이 주효했어요. 무엇보다 여러 파일에 흩어져 있던 코드 중복이 단일 훅으로 통합되면서 DRY(Don’t Repeat Yourself) 원칙을 준수하게 되어, 유지보수성이 크게 향상되었습니다.

6.3 정성적 피드백

릴리즈 직후 사내에서도 긍정적인 반응이 쏟아졌어요. 이러한 피드백은 이번 개선이 제품을 가장 면밀히 검토하는 관점에서도 성공적이었음을 입증합니다.

7. 인사이트: QuickSync에서 배운 것들

만약 여러분도 사용자의 흐름을 개선하는 기능을 만든다면, 이런 질문을 던져보세요.

1. 사용자의 ‘흐름’이 끊기는 지점이 어딘가요? 우리는 “메인 화면으로 돌아가야 한다”는 지점에서 흐름이 끊긴다는 걸 발견했어요. 여러분의 제품에서도 사용자가 작업 중 “어? 왜 여기로 가야 해?”라고 느끼는 순간이 있다면, 그게 바로 개선 기회입니다.
2. 모든 케이스를 파악하고 계신가요? 우리는 이런 케이스가 정리된 리스트가 없다는 걸 알았어요. 직접 앱 전체를 훑으며 ‘연결이 필요한 시점’을 찾아냈죠. 비슷한 문제가 얼마나 많은 곳에서 발생하는지 정확히 파악하는 것, 그게 해결책 설계의 시작입니다.
3. 일관성과 효율성 중 무엇이 더 중요한가요? 우리는 메인 화면에서 QuickSync를 쓰는 게 기술적으로는 비효율적이지만, 일관된 UX를 위해 도입하기로 했어요. 사용자가 “아, 이거 익숙한데” 하는 순간의 가치를 과소평가하지 마세요.
4. 작게 시작해서 검증하고 계신가요? 우리는 송금/스왑부터 시작해서 점진적으로 확장했어요. 한 번에 모든 곳에 적용하려다가 실패하는 것보다, 핵심 기능에서 검증 후 확장하는 게 훨씬 안전합니다.

나가며

프로덕트를 만들면서 가장 뿌듯한 순간은 사용자가 “사용하기 너무 편해졌어요”라고 말할 때입니다.

QuickSync 프로젝트는 무엇보다 사용자의 시간과 노력을 아껴주는 일의 가치를 다시 한번 깨닫게 해주었습니다.

하드웨어 월렛이라는 제약 조건 속에서도 최상의 UX를 제공하기 위한 우리의 도전은 계속됩니다. 앞으로도 D’CENT 지갑은 사용자의 소중한 시간을 아껴드리고, 더 나은 Web3 경험을 제공하기 위해 끊임없이 고민하고 개선해 나가겠습니다.

이 글이 도움이 되셨다면 **아이오트러스트 미디엄 블로그**를 팔로우해주세요! 더 많은 인사이트와 제품 빌딩 경험을 공유하겠습니다.

저자 소개

**강보현 (프론트엔드 엔지니어)**

아이오트러스트 프로덕트팀에서 프론트엔드 개발을 담당하고 있습니다. 복잡한 블록체인 기술을 누구나 쉽게 사용할 수 있는 인터페이스로 만드는 일에 열정을 가지고 있습니다.

**신혜선 (프로덕트 디자이너)**

아이오트러스트 프로덕트팀에서 UX와 UI를 책임지고 있습니다. 사람과 기술이 맞닿는 순간을 관찰하고, 그 접점을 더 매끄럽게 잇는 UX를 디자인합니다.