Click terminal for web and mobile
From 0 → 1 — design one system
for different ways to trade.
Overview
Click은 웹과 모바일을 아우르는 올인원 트레이딩 플랫폼입니다. 저는 디자인 리드와 함께 디자인 시스템 구축에 기여하고
Spot, Perps, Discovery, 예측 시장, 포트폴리오 등의 경험을 설계하는 데 참여했습니다.
제품 설계 단계에서의 주요한 챌린지는 트레이딩의 밀도있는 정보와 데이터를 화면에서 숨겨 정리하는 것이 아니라, 복잡한 거래 경험과 정보들을 유저가 쉽게 이해할 수 있도록 고민하고 화면 속에 알맞은 구조를 만들어 디자인하는 것이었습니다. 기존 트레이딩 타입별 도메인의 사용 문법을 유지하면서도, 서로 다른 거래 방식과 흐름을 하나의 일관된 경험으로 연결했습니다.
Please watch it on your PC.
Role
Product designer
Team
2 Designers
6 Devs
1 Product manager
Scope
Built a system
from 0 to 1
Timeline
2026
Background
하나의 제품, 모든 트레이딩.
Spot, Perps, Prediction Market, 자산 포트폴리오 관리 등 서로 다른 거래 경험을 하나의 제품으로 연결했습니다.
각각의 트레이딩 타입은 정보의 종류, 우선순위와 인터랙션, 유저의 의사결정 과정 등에 차이가 있었습니다. 때문에 트레이딩별 특성을 유지하면서도 제품 전체에서 일관된 경험을 제공할 수 있는 설계 체계가 필요했습니다.
swap
spot-trading
perps
predicts
one product
Challenge and Approach
각 트레이딩 특성와 깊이를 유지하면서
더 쉽게 이해할 수 있는 설계가 필요합니다.
Challenge
01
서로 다른 거래 경험을
하나로 연결하기
Click은 여러 거래 방식을 하나의 제품에서 제공합니다. 때문에 서로 다른 거래 경험을 일관되게 연결해야 했습니다.
Challenge
02
수많은 정보와 기능은
트레이딩의 핵심
트레이딩에는 다양한 시장 데이터와 거래 기능이 필요합니다. 중요한 것은 복잡한 정보를 숨겨 깔끔하게만 만드는 것이 아니라, 쉽게 이해하고 활용할 수 있도록 만드는 것이었습니다.
Challenge
03
밀도 높은 웹 거래 경험을
모바일로 옮기
제한된 모바일 화면에서도 필요한 거래 기능을 유지해야 했습니다. 이를 위해 정보의 우선순위와 탐색 구조, 인터랙션을 다시 설계해야 했습니다.
Approach
01
일관성을 유지하되,
획일화하지 않기
제품 전반에 공통된 디자인 체계를 적용하면서도, 각 거래 방식에 필요한 정보의 밀도와 사용 흐름은 유지했습니다.
Approach
02
정보의 깊이는 유지하고,
구조는 명확하게 만들기
트레이더에게 필요한 정보들의 노출은 유지하되, 우선순위와 그룹을 정리해 빠르게 파악하고 거래할 수 있도록 했습니다.
Approach
03
단순히 화면을 줄이지 않고,
우선순위를 정하기
웹 화면을 모바일 스크린에 맞춰 단순히 축소하는 대신, 모바일에서 중요한 정보와 기능을 중심으로 경험을 재구성했습니다.
Information Architecture
제품의 기능 구조를 설계했습니다.
개별 화면을 디자인하기에 앞서, Click의 핵심 경험을 디스커버리, 거래, 자산 포트폴리오 관리, 툴, 사용자 자산 등으로 분류하고 각각에 필요한 세부 기능과 경험들을 정리한 구조도를 함께 설계했습니다.
Process
서로 다른 트레이드를 하나로 연결하는
레이어드 디자인 시스템.
Foundation 디자인 시스템을 기반으로, 하위에 각 트레이드별 컴포넌트를 설계해 시스템화했습니다.
각 거래 방식에 필요한 정보와 기능은 유지하면서도, 제품 전체에서 일관된 경험을 제공할 수 있도록 설계했습니다.
모든 트레이드에 동일한 디자인 컴포넌트를 적용하지 않고, Foundation 디자인 시스템의 엘리먼트들을 기반으로 각 거래 방식에 특화된 컴포넌트로 확장시켰니다. 이를 통해 거래마다 고유한 사용 흐름과 기능을 지원하면서도 한 제품의 일관성을 유지했습니다.
Core experience
Spot:
흐름의 분석부터 거래 실행까지 하나의 흐름으로 연결.
다양한 시장 데이터와 거래 기능을 우선순위에 따라 구성해, 유저가 필요한 정보를 놓치지 않고
분석에서 거래까지 자연스럽게 이어갈 수 있도록 했습니다.
Core experience
Prediction market:
하나의 인터랙션 모델, 카테고리별 정보의 위계.
예측 시장 안에서의 거래 방식과 상호작용은 일관되게 유지하면서도,
각 예측 유형마다 필요한 정보의 종류와 위계를 다르게 설계해 쉽게 파악할 수 있도록 했습니다.
Pulse
Trending
Perps
Predict
Portfolio
More
Core experience
Perps:
유저의 기호에 따른 세부적인 세팅.
레버리지, 증거금, 리스크 설정 등 고급 거래 기능을 쉽게 찾을 수 있도록 구성했습니다.
기본 주문 흐름은 간결하게 유지하면서도, 필요할 때 세부 설정을 활용할 수 있도록 했습니다.
Search assets
Esc
All
New
Crypto
Equities
Commodities
FX
FOMO 2
Custom
Asset
Last price
24h change
8h funding
24h volume
Open interest
USDC 40x
$92,258
+51.12 (+21,05%)
0.00018%
$3.2B
$2.1B
ETH 25x
$14,258
+2.34 (+0.01%)
0.00021%
$1.2B
$4.3B
SOL 20x
$25,258
+12.12 (+3.05%)
0.00032%
$2.2B
$3.1B
HYPE 10x
$36,258
+34.12 (+4.05%)
0.00043%
$5.2B
$6.1B
ZEC 10x
$47,258
+45.12 (+5.05%)
0.00054%
$7.2B
$8.1B
BTC-USD Margin mode
Cross
All cross positions share the same cross margin as collateral. In the event of liquidation, your cross margin balance and any remaining open positions under assets in this mode may be forfeited.
Isolated
Manage your risk on individual positions by restricting the amount of margin allocated to each. If the margin ratio of an isolated position reaches 100%, the position will be liquidated. Margin can be added or removed to individual positions in this mode.
Confirm
Position
1.57 HYPE
Entry price
71.260
Mark price
71.269
Stop loss
Price above 80.00
Expected profit: 50.49 USDC
Take profit price
0.00
Gain
%
Configure amount
100 %
Cancel
Confirm
Adjust leverage
Control the leverage used for BTC positions. The maximum leverage is 40x.
Max position size decreases the higher your leverage.
20x
Confirm
Note that setting a higher leverage increases the risk of liquidation.
Extended experience
Web to mobile:
기능을 유지하며 정보 우선순위 재구성.
웹에서는 여러 정보를 한눈에 확인할 수 있지만, 제한된 스크린의 모바일에서는 무엇을 먼저 보여줄지 결정하는 것이 중요했습니다. 웹 화면을 단순히 축소하지 않고, 유저의 거래 흐름에 맞춰 각 단계에서 필요한 정보와 기능을 재구성했습니다.
Web trading
넓은 화면에서 다양한 정보를 동시에 확인하고
활용할 수 있습니다.
Multi-column
Side panel
Dense data
Parallel actions
Mobile trading
제한된 화면에서 중요한 정보와 기능을
사용 흐름에 따라 단계적으로 확인할 수 있습니다.
Progressive disclosure
Bottom sheet/Modal
Prioritized information
Contextual actions
1.21
319.46
115.97
Buy/Sell
Trades
Tables
Token data
Pulse
Trending
Perps
Predict
Portfolio
More
Pulse
Trending
Perps
Predict
Portfolio
More
Extended experience
마이크로 인터랙션.
핵심 거래 과정에서 발생하는 상태 변화와 화면 전환, 컴포넌트 등을 세밀하게 설계했습니다.
유저가 복잡한 거래 과정에서도 현재 상황을 이해하고, 다음 행동을 쉽게 예측할 수 있도록 했습니다.
Trades
You
Dev
Amount
MCap
Trader
Age
$12.45
$66.8K
D6H...
0s
$15.67
$66.7K
D6H...
1s
$22.89
$66.6K
D6H...
2s
$30.12
$66.5K
D6H...
3s
$18.75
$66.4K
D6H...
4s
$24.99
$66.3K
D6H...
5s
$33.40
$66.2K
D6H...
6s
$27.88
$66.1K
D6H...
7s
$11.11
$66.0K
D6H...
8s
$14.56
$65.9K
D6H...
9s
$19.99
$65.8K
D6H...
10s
$29.99
$65.7K
D6H...
11s
$35.00
$65.6K
D6H...
12s
Trades
12
Holders
9.42K
Top traders
Positions
Orders
History
TMBR
WojakWelfare
34m
MC
1.3M
Volume
$10.1K
Bonding
75%
Price
$0.0342112
Tax
2.5%
Supply
1B
Bought
0.1
Sold
0.05
Holding
0.05
P&L
+0.04(+2%)
Buy
Sell
Market
Limit
DCA
5
25.11
Amount
0.01
0.1
0.5
1
MCap
$16M
-50 %
Buy TMBR
0.01
@ 16.1 MC
20%
0.001
0.001
Off
5M
-0%
1H
-2.98%
6H
+5.17%
24H
+50.01%
5m Vol
$25.9K
Buys
45/$10.7K
Sells
71/$15.2K
Net Vol.
+$4.45K
Token Data & Security
Top 10
12.47%
DEV
0%
Bundler
4.4%
Holders
8,186
Snipers
71.37%
Insiders
0%
FOMO
12.4%
Dex Paid
Yes
NoMint
Yes
Burnt
100%
Rug
0%
Blacklist
No
CA:
Dz9mQ9NzkBcCsugqKMHBPiVunM...bonk
DA:
Dz9mQ9NzkBcCsugqKMHBPniW8M...eTeH
4KJV...A7Tp
65.00
5h
Similar tokens
STCY
Last TX: 1mo
11mo
$19.1K
FROG
Last TX: 1mo
11mo
$19.1K
APE
Last TX: 1mo
11mo
$19.1K
SPCE
Last TX: 1mo
11mo
$19.1K
1m
1h
D
Indicators
Display options
15450.00
15430.00
15410.00
15390.00
15370.00
15350.00
15330.00
15310.00
15290.00
8
06:00
12:00
18:00
9
06:00
12:00
18:00
10
06:00
12:00
18:00
USD
15416.12
5y
1y
6m
3m
1m
5d
1d
09:27:02 (UTC)
%
log
auto
Rank
Wallet
% Owned
Current value
Avg. entry
Realized
Total P&L
Remaining
Funding
1
5hz...BQ8
2.75%
$412.1K
$0.0284567
-$45.2K
+$366.9K
97%
2.52M
Binance
2mo
0.18
2
5hz...BQ8
2.75%
$412.1K
$0.0284567
-$45.2K
+$366.9K
97%
2.52M
Binance
2mo
0.18
3
6hz...CR9
4.12%
$674.5K
$0.0412345
-$89.4K
+$585.1K
98%
2.52M
6hz...CR9
1mo
0.25
4
7hz...DA0
3.50%
$590.0K
$0.0335678
-$40.0K
+$550.0K
95%
2.52M
Binance
3mo
0.20
5
8hz...EB1
5.25%
$850.2K
$0.0426789
-$100.5K
+$749.7K
96%
2.52M
8hz...EB1
2mo
0.30
6
9hz...FC2
2.85%
$450.4K
$0.0271234
-$30.8K
+$419.6K
99%
2.52M
Bitget
1mo
0.22
7
10hz...GD3
4.75%
$780.9K
$0.0467890
-$70.3K
+$710.6K
97%
2.52M
10hz...GD3
3mo
0.28
8
11hz...HE4
6.10%
$930.8K
$0.0485623
-$110.4K
+$820.4K
96%
2.52M
Binance
2mo
0.32
9
12hz...JF5
5.95%
$1.2M
$0.0567890
-$120.1K
+$1.08M
98%
2.52M
12hz...JF5
1mo
0.35
10
13hz...KG6
7.40%
$1.05M
$0.0634567
-$130.7K
+$920.3K
94%
2.52M
13hz...KG6
3mo
0.34
11
14hz...LM7
4.10%
$792.4K
$0.0456789
-$95.6K
+$696.8K
99%
2.52M
14hz...LM7
1mo
0.29
Watchlist
Wallet tracker
X tracker
Pulse
Wallet manager
Market lighthouse
$183.51
$115.3K
$3,945.12
$677.12
$5,013.93
Stable
Docs
Chat
Discovery
Trending
Perps
Predict
Monitor
Rewards
Portfolio
TMBR
Token / Contract / Wallet
1.21
319.46
115.97
Breakdown
Total holdings
$3,811.07
FQPL
1.5%
GRPT
1.5%
Pulse
Trending
Perps
Predict
Portfolio
More
PnL
+$5,211.07
St, Sep 27, 2025, 4:46PM
USD
SOL
English Premier League
Chelsea
48%/54¢
Tue, May 19
10:15 PM
Draw
12%/17¢
Arsenal
40%/17¢
Chelsea
Draw
Arsenal
Football
Vol
25.1M
17h 56m left
Balance
Total value
31.07
$12,512.07
Available balance
9.56
$4,511.93
Performance
Stats
Graph
U. PnL
8.54
/
+$3,101.19
R. PnL
11.16
/
+$5,896.01
T/B/S
46 / 12 / 34
Moonshot (>5x)
12
Pump (2-5x)
8
Win (1-2x)
6
Loss (-0% to -50%)
8
Rekt (>50%)
4
Portfolio breakdown
Total holdings
$3,811.07
SOL
11.5%
QWRT
8.5%
PLQT
6.5%
XJRM
4.1%
WZKT
3.7%
FQPL
1.5%
GRPT
1.5%
Include SOL
Balance
Claimable now
$151.90
Claim
Account value
$82,427.52
Unrealized P&L
+$42,427.52
Realized P&L
+$5,211.07
PnL
+$5,211.07
St, Sep 27, 2025, 4:46PM
X tracker
Manage
Satya Nadella
@satyanadella
30m
Replying to
@billgates
Well said
Bill Gates
@billgates
innovation is key to solving global issues
Tim Cook
@tim_apple
30m
Replying to
@billgates
Well said
Bill Gates
@billgates
innovation is key to solving global issues
Jeff Bezos
@jeffbezos
30m
Go buy yourself a book off of Amazon!
Sheryl Sandberg
@sherylsandberg
30m
100% agree
John Ternus
@johnternus
1hr ago
Incredible night! So proud of all the amazing storytellers
Jensen Huang
@Jensenhuang
1hr ago
NVIDIA compute is fungible, durable and highly rentable. It is a productive, revenue-generating asset.
Jensen Huang
@Jensenhuang
30m
Gavin, spot on.
AI is bringing manufacturing back to America and reindustrializing the nation after decades of offshoring.
AI is creating demand that drives investment in our aging power grid and sustainable energy, powered by market forces, not subsidies.
Please watch it on your PC.