Black#000000
--color-common-blackYeoBee UI Library
Design Resources
기본 시각 언어와 제품 UI 컴포넌트를 한곳에서 확인합니다.
Part 01
Foundation
Color, typography, shape, asset 등 제품의 기본 시각 언어입니다.01
Color
다양한 상황에 대응하는 팔레트 컬러를 안내합니다.Primitive
Common
Gray
Primary · Yeo Bee Green
Red
Yellow
Blue
Category
카테고리 아이콘용 컬러입니다.
Opacity
시스템 내에서 사용하는 투명도 컬러입니다.
Gray
White
Partner
Gradient
시스템 내에서 사용하는 그라디언트 컬러입니다.
Semantic
Background
Border
Button
Icon
Surface
Text
02
Typography
Pretendard의 28가지 제품 타이포그래피 스타일입니다.Display
| Preview | Name | Font Weight | Size | Line Height | Letter Spacing |
|---|---|---|---|---|---|
| 여행의 시작, 여비 | 32_BD | Bold | 32 | 40 | -0.28px |
| 여행의 시작, 여비 | 32_SB | Semibold | 32 | 40 | -0.28px |
| 여행의 시작, 여비 | 32_MD | Medium | 32 | 40 | -0.28px |
| 여행의 시작, 여비 | 24_BD | Bold | 24 | 32 | -0.28px |
| 여행의 시작, 여비 | 24_SB | Semibold | 24 | 32 | -0.28px |
| 여행의 시작, 여비 | 24_MD | Medium | 24 | 32 | -0.28px |
Title
| Preview | Name | Font Weight | Size | Line Height | Letter Spacing |
|---|---|---|---|---|---|
| 여행의 시작, 여비 | 20_BD | Bold | 20 | 28 | -0.28px |
| 여행의 시작, 여비 | 20_SB | Semibold | 20 | 28 | -0.28px |
| 여행의 시작, 여비 | 20_MD | Medium | 20 | 28 | -0.28px |
| 여행의 시작, 여비 | 17_BD | Bold | 17 | 24 | -0.28px |
| 여행의 시작, 여비 | 17_MD | Medium | 17 | 24 | -0.28px |
| 여행의 시작, 여비 | 17_RG | Regular | 17 | 24 | -0.28px |
Body
| Preview | Name | Font Weight | Size | Line Height | Letter Spacing |
|---|---|---|---|---|---|
| 여행의 시작, 여비 | 16_BD | Bold | 16 | 24 | -0.28px |
| 여행의 시작, 여비 | 16_MD | Medium | 16 | 24 | -0.28px |
| 여행의 시작, 여비 | 16_RG | Regular | 16 | 24 | -0.28px |
| 여행의 시작, 여비 | 14_BD | Bold | 14 | 24 | -0.28px |
| 여행의 시작, 여비 | 14_SB | Semibold | 14 | 24 | -0.28px |
| 여행의 시작, 여비 | 14_MD | Medium | 14 | 24 | -0.28px |
| 여행의 시작, 여비 | 14_RG | Regular | 14 | 24 | -0.28px |
| 여행의 시작, 여비 | 13_BD | Bold | 13 | 20 | -0.28px |
| 여행의 시작, 여비 | 13_MD | Medium | 13 | 20 | -0.28px |
| 여행의 시작, 여비 | 13_RG | Regular | 13 | 20 | -0.28px |
| 여행의 시작, 여비 | 12_MD | Medium | 12 | 20 | -0.28px |
| 여행의 시작, 여비 | 12_RG | Regular | 12 | 20 | -0.28px |
Caption
| Preview | Name | Font Weight | Size | Line Height | Letter Spacing |
|---|---|---|---|---|---|
| 여행의 시작, 여비 | 10_SB | Semibold | 10 | 16 | -0.28px |
| 여행의 시작, 여비 | 10_MD | Medium | 10 | 16 | -0.28px |
| 여행의 시작, 여비 | 9_SB | Semibold | 9 | 12 | -0.28px |
| 여행의 시작, 여비 | 9_MD | Medium | 9 | 12 | -0.28px |
03
Radius
요소의 둥근 모서리를 나타냅니다.| Example | Variable | Value | Description |
|---|---|---|---|
Radius-none | 0px | 모서리 값이 적용되지 않은 상태입니다. | |
Radius-XS | 4px | 가장 작은 요소의 모서리 값을 나타냅니다. | |
Radius-S | 6px | 버튼, 인풋, 셀렉트 등 컴포넌트의 모서리 값을 나타냅니다. | |
Radius-M | 8px | 버튼 등 컴포넌트의 모서리 값을 나타냅니다. | |
Radius-L* | 10px | 보통 요소의 모서리 값을 나타냅니다. | |
Radius-XL | 16px | 보통 요소의 모서리 값을 나타냅니다. | |
Radius-XXL | 20px | 카드, 모달 등 큰 요소의 모서리 값을 나타냅니다. | |
Radius-Full | 999px | 원형 및 pill 형태의 요소에 사용합니다. |
04
Shadow
그림자에 사용되는 컬러와 속성입니다.Opacity 5 (Gray 700)
#131920 · 4%Center
Card- X
- 0
- Y
- 0
- Blur
- 10
- Color
- Opacity 5
Down
Bottom Sheet- X
- 0
- Y
- -12
- Blur
- 10
- Color
- Opacity 5
05
Grid
iOS와 Android 환경의 2-column grid입니다.iOS
- Columns
- 2
- Container
- 327px
- Margin
- 24px
- Gutter
- 16px
Android
- Columns
- 2
- Container
- 360px
- Margin
- 24px
- Gutter
- 16px
Figma 표기는 Container 360px이며, 실제 preview content guide는 312px입니다.
06
Icon
System Icon · 323 itemsArrows
arrow-curve-left-downarrow-curve-left-rightarrow-curve-left-uparrow-down-leftarrow-curve-up-leftarrow-curve-right-uparrow-left-square-containedarrow-right-square-containedarrow-up-square-containedarrow-down-square-containedarrow-down-left-square-containedarrow-up-right-square-containedarrow-down-right-square-containedarrow-up-left-square-containedarrow-left-contained-02arrow-up-left-containedarrow-down-left-containedarrow-down-right-containedarrow-up-right-containedarrow-right-contained-02arrow-up-contained-02arrow-down-contained-02arrow-left-contained-01arrow-up-contained-01arrow-right-contained-01arrow-down-contained-01arrow-expand-01arrow-expand-02arrow-expand-03arrow-expand-04arrow-updown-arrowarrow-rightarrow-leftarrow-up-leftarrow-down-rightarrow-down-leftarrow-up-rightarrow-down-rightarrow-curve-up-rightarrow-switch-horizontalarrow-switch-verticalarrow-refresh-01arrow-refresh-02arrow-refresh-03arrow-refresh-04arrow-refresh-05arrow-refresh-06arrow-rotate-left-01arrow-rotate-left-02arrow-rotate-right-01arrow-rotate-right-02chevron-double-downchevron-double-leftchevron-double-rightchevron-double-upchevron-downchevron-leftchevron-rightchevron-upflip-leftflip-rightarrow-up-smdown-arrow-smarrow-right-smarrow-left-smarrow-up-left-smarrow-down-right-smarrow-down-left-smarrow-up-right-smGeneral
activityadd-square-01add-square-02add-square-03add-square-04calendar-01calendar-02calendar-03cancel-leftcancel-rightcheckcheck-brokencheck-containedcheck-square-brokencheck-square-containedcopy-leftcopy-rightcomponentdashdeliverydownloaddownload-01download-02dot-horizontaldot-verticaledit-01edit-02edit-03edit-04edit-containedemailembedeye-openeye-closedequalsequals-notexpand-01expand-02favouritefilefiltergearglobehash-01hash-02helphelp-circle-containedhelp-square-containedhome-01home-02home-03home-04home-05imageinformation-circle-containedinformation-square-containedlightning-circle-containedlightning-filledlightning-square-containedlinklink-angledlink-brokenlink-externalloader-01loader-02logout-01logout-02logout-03logout-04menu-01menu-02menu-03menu-04menu-05minus-circle-containedminus-square-containedpercent-01percent-02percent-03plus-01plus-02plus-03paperclipprogressquotesave-01save-02search-01search-02settingssharearrow-rotate-left-01slash-backwardslash-forwardsort-horizontalsort-vertical-01sort-vertical-02target-01target-02target-03target-04toggle-righttoogle-lefttrash-01trash-02trash-03trash-04upload-01upload-02upload-03upload-04variantx-01x-02x-03x-circle-containedx-square-containedFinance
coins-rotatebag-01bag-02bag-03bag-04bag-05bankbank-note-01bank-note-02bank-note-03bank-note-04bank-note-05bank-note-06card-01card-02card-addcard-checkcard-downcard-editcard-lockcard-minuscard-numbercard-shieldcard-upcard-xcartcoinscoin-brokencoin-handcoin-numbercoin-unbrokencurrency-bathcurrency-bitcoincurrency-centcurrency-coin-bathcurrency-coin-bitcoincurrency-coin-centcurrency-coin-dollarcurrency-coin-eurocurrency-coin-poundcurrency-coin-rubelcurrency-coin-rupeecurrency-coin-yencurrency-dollarcurrency-eurocurrency-poundcurrency-rubelcurrency-rupeecurrency-yendiamonddiscount-circlediscount-squarediscount-star-01discount-star-02discount-star-03gift-01gift-02receiptreceipt-linestagwallet-01wallet-02wallet-03wallet-04Alerts
alert-circlealert-squarealert-trianglebell-01bell-02bell-03bell-04bell-off-01bell-off-02bell-ringing-01bell-ringing-02bell-ringing-03bell-ringing-04notification-boxnotification-bubblenotification-square-01notification-square-02Images
camera-01camera-02camera-lenscamera-offcolors-01colors-02flash-offflash-onimage-01image-02image-03image-04image-addimage-avatarimage-checkimage-downimage-focusimage-minusimage-no-bordersimage-questionimage-upimage-xTravel & Location
box-filledglobe-01globe-02globe-03globe-04globe-05luggage-01luggage-02luggage-03luggage-04code-03map-01map-01map-03map-04marker-01marker-02marker-03marker-04marker-05marker-06passportplanepointer-01pointer-02target-01target-02ticket-01terminalticket-02traintruckumbrellaIllustration Assets
34 variantsIllust Icon
4일러스트로 그려진 UI 아이콘입니다.
2811:6972
2811:6973
3466:96629
1903:23678Profile
14UI 및 마케팅에 사용되는 프로필 일러스트입니다.
2838:95339
2838:95336
2838:95331
2838:95334
2838:95332
2838:95330
2838:95335
2838:95333
2838:95329
2838:95338
2838:95337
2954:39053
2797:584
4312:75355Image
15
2733:23556
2733:23154
2797:85741
2797:86156
2802:5515
2802:6571
2802:4734
2802:5107
2811:41922
2827:53730
2832:27480
2816:45911
2838:95996
2817:14189
2816:54951Background
1
2797:8641507
Logo
Logotype
'%3e%3cpath%20d='M119.024%202.65573C119.024%201.1929%20117.816%200%20116.346%200H111.032C109.561%200%20108.353%201.1929%20108.353%202.65573V3.79638H108.327V15.6296C105.263%2014.6979%20102.401%2014.367%20100.913%2014.3583C96.8948%2014.2887%2092.7718%2015.4206%2089.1652%2017.5017C86.8193%2018.8165%2084.7096%2020.5318%2082.9676%2022.5606C78.687%2027.5412%2077.444%2034.8031%2079.8075%2041.0462C82.5912%2048.4126%2089.4541%2051.7388%2096.5797%2051.6691C104.931%2051.6082%20112.678%2046.9672%20116.162%2039.357C118.385%2034.4983%20119.042%2028.8995%20119.042%2023.6055C119.042%2023.5881%20119.042%203.78768%20119.024%203.78768V2.64702V2.65573ZM107.303%2032.931C105.727%2038.2425%20100.974%2041.8038%2095.2666%2041.1072C92.5354%2040.785%2090.277%2039.2177%2089.5767%2036.501C88.7976%2033.4622%2089.9356%2030.3537%2092.2641%2028.29C94.5138%2026.2961%2097.5776%2024.9551%20100.615%2024.9551C100.668%2024.9551%20100.711%2024.9551%20100.764%2024.9725C105.605%2025.0944%20108.765%2028.0288%20107.294%2032.931H107.303Z'%20fill='%231A2A38'/%3e%3cpath%20d='M134.974%202.69056V2.66443C134.974%201.20161%20133.784%200%20132.296%200H127C125.512%200%20124.321%201.20161%20124.321%202.66443V2.69056H124.295V49.3181H124.321V49.3443C124.321%2050.8071%20125.512%2052.0087%20127%2052.0087H132.296C133.784%2052.0087%20134.974%2050.8071%20134.974%2049.3443V49.3181H135.001V2.69056H134.974Z'%20fill='%231A2A38'/%3e%3cpath%20d='M20.9652%204.30127C9.384%204.30127%200%2013.9403%200%2025.8257C0%2037.7112%209.384%2047.3502%2020.9652%2047.3502C32.5464%2047.3502%2041.9304%2037.7112%2041.9304%2025.8257C41.9304%2013.9403%2032.5376%204.30127%2020.9652%204.30127ZM20.9652%2036.7011C15.1702%2036.7011%2010.452%2031.825%2010.452%2025.8257C10.452%2019.8264%2015.1702%2014.9503%2020.9652%2014.9503C26.7601%2014.9503%2031.4784%2019.8264%2031.4784%2025.8257C31.4784%2031.825%2026.7601%2036.7011%2020.9652%2036.7011Z'%20fill='%231A2A38'/%3e%3cpath%20d='M79.1252%2018.5727C79.309%2018.5727%2079.4754%2018.503%2079.5979%2018.3898C82.0577%2015.7167%2085.0865%2013.5311%2088.4042%2011.9464C88.8594%2011.72%2089.1657%2011.2585%2089.1657%2010.7448V2.69056H89.1482V2.66443C89.1482%201.20161%2087.9402%200%2086.4696%200H81.1561C79.6854%200%2078.4774%201.20161%2078.4774%202.66443V2.69056H78.4512V17.9196C78.4512%2018.2766%2078.7488%2018.5727%2079.1165%2018.5727H79.1252Z'%20fill='%231A2A38'/%3e%3cpath%20d='M67.2286%201.74146C67.2286%200.783657%2066.4407%200%2065.4778%200H57.7745C56.8116%200%2056.0238%200.783657%2056.0238%201.74146V2.82987H55.9975V10.7971H47.5852V10.8232H46.491C45.5281%2010.8232%2044.7402%2011.6068%2044.7402%2012.5646V20.2271C44.7402%2021.1849%2045.5281%2021.9685%2046.491%2021.9685H47.5852V21.9946H55.9975V30.0054H47.5852V30.0315H46.491C45.5281%2030.0315%2044.7402%2030.8151%2044.7402%2031.7729V39.4354C44.7402%2040.3932%2045.5281%2041.1768%2046.491%2041.1768H47.5852V41.2029H55.9975V47.3677H56.0238V50.0757C56.0238%2051.0335%2056.8116%2051.8171%2057.7745%2051.8171H65.4778C66.4407%2051.8171%2067.2286%2051.0335%2067.2286%2050.0757V47.3677H67.2548V2.82987H67.2286V1.74146Z'%20fill='%231A2A38'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2733_23087'%3e%3crect%20width='135'%20height='52'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
'%3e%3cpath%20d='M119.024%202.65573C119.024%201.1929%20117.816%200%20116.346%200H111.032C109.561%200%20108.353%201.1929%20108.353%202.65573V3.79638H108.327V15.6296C105.263%2014.6979%20102.401%2014.367%20100.913%2014.3583C96.8948%2014.2887%2092.7718%2015.4206%2089.1652%2017.5017C86.8193%2018.8165%2084.7096%2020.5318%2082.9676%2022.5606C78.687%2027.5412%2077.444%2034.8031%2079.8075%2041.0462C82.5912%2048.4126%2089.4541%2051.7388%2096.5797%2051.6691C104.931%2051.6082%20112.678%2046.9672%20116.162%2039.357C118.385%2034.4983%20119.042%2028.8995%20119.042%2023.6055C119.042%2023.5881%20119.042%203.78768%20119.024%203.78768V2.64702V2.65573ZM107.303%2032.931C105.727%2038.2425%20100.974%2041.8038%2095.2666%2041.1072C92.5354%2040.785%2090.277%2039.2177%2089.5767%2036.501C88.7976%2033.4622%2089.9356%2030.3537%2092.2641%2028.29C94.5138%2026.2961%2097.5776%2024.9551%20100.615%2024.9551C100.668%2024.9551%20100.711%2024.9551%20100.764%2024.9725C105.605%2025.0944%20108.765%2028.0288%20107.294%2032.931H107.303Z'%20fill='white'/%3e%3cpath%20d='M134.974%202.69056V2.66443C134.974%201.20161%20133.784%200%20132.296%200H127C125.512%200%20124.321%201.20161%20124.321%202.66443V2.69056H124.295V49.3181H124.321V49.3443C124.321%2050.8071%20125.512%2052.0087%20127%2052.0087H132.296C133.784%2052.0087%20134.974%2050.8071%20134.974%2049.3443V49.3181H135.001V2.69056H134.974Z'%20fill='white'/%3e%3cpath%20d='M20.9652%204.30127C9.384%204.30127%200%2013.9403%200%2025.8257C0%2037.7112%209.384%2047.3502%2020.9652%2047.3502C32.5464%2047.3502%2041.9304%2037.7112%2041.9304%2025.8257C41.9304%2013.9403%2032.5376%204.30127%2020.9652%204.30127ZM20.9652%2036.7011C15.1702%2036.7011%2010.452%2031.825%2010.452%2025.8257C10.452%2019.8264%2015.1702%2014.9503%2020.9652%2014.9503C26.7601%2014.9503%2031.4784%2019.8264%2031.4784%2025.8257C31.4784%2031.825%2026.7601%2036.7011%2020.9652%2036.7011Z'%20fill='white'/%3e%3cpath%20d='M79.1252%2018.5727C79.309%2018.5727%2079.4754%2018.503%2079.5979%2018.3898C82.0577%2015.7167%2085.0865%2013.5311%2088.4042%2011.9464C88.8594%2011.72%2089.1657%2011.2585%2089.1657%2010.7448V2.69056H89.1482V2.66443C89.1482%201.20161%2087.9402%200%2086.4696%200H81.1561C79.6854%200%2078.4774%201.20161%2078.4774%202.66443V2.69056H78.4512V17.9196C78.4512%2018.2766%2078.7488%2018.5727%2079.1165%2018.5727H79.1252Z'%20fill='white'/%3e%3cpath%20d='M67.2286%201.74146C67.2286%200.783657%2066.4407%200%2065.4778%200H57.7745C56.8116%200%2056.0238%200.783657%2056.0238%201.74146V2.82987H55.9975V10.7971H47.5852V10.8232H46.491C45.5281%2010.8232%2044.7402%2011.6068%2044.7402%2012.5646V20.2271C44.7402%2021.1849%2045.5281%2021.9685%2046.491%2021.9685H47.5852V21.9946H55.9975V30.0054H47.5852V30.0315H46.491C45.5281%2030.0315%2044.7402%2030.8151%2044.7402%2031.7729V39.4354C44.7402%2040.3932%2045.5281%2041.1768%2046.491%2041.1768H47.5852V41.2029H55.9975V47.3677H56.0238V50.0757C56.0238%2051.0335%2056.8116%2051.8171%2057.7745%2051.8171H65.4778C66.4407%2051.8171%2067.2286%2051.0335%2067.2286%2050.0757V47.3677H67.2548V2.82987H67.2286V1.74146Z'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2838_95895'%3e%3crect%20width='135'%20height='52'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
App Icon · iOS
App Icon · Android
08
Flag
기본 42×30, 카드용 small 22×15. small은 동일한 Figma 원본을 축소해 사용합니다.
America
Africa
Europe
Asia
Oceania
제외
Cover Image
71 variantsrandom
3
I2838:98828;2785:5899
I2838:98829;2785:5899
I2838:98830;2785:5899America
8
I2838:99040;2785:5899
I2838:99041;2785:5899
I2838:99042;2785:5899
I2838:99043;2785:5899
I2838:99044;2785:5899
I2838:99045;2785:5899
I2838:99046;2785:5899
I2838:99047;2785:5899Africa
6
I2838:100003;2785:5899
I2838:100004;2785:5899
I2838:100005;2785:5899
I2838:100006;2785:5899
I2838:100007;2785:5899
I2838:100008;2785:5899Europe
30I2838:100456;2785:5899
I2838:100584;2785:5899
I2838:100585;2785:5899
I2838:100586;2785:5899
I2838:100587;2785:5899
I2838:100588;2785:5899
I2838:100589;2785:5899
I2838:100590;2785:5899
I2838:100591;2785:5899
I2838:100592;2785:5899
I2838:100593;2785:5899
I2838:100594;2785:5899
I2838:100595;2785:5899
I2838:100596;2785:5899
I2838:100597;2785:5899
I2838:100598;2785:5899
I2838:100599;2785:5899
I2838:100600;2785:5899
I2838:100601;2785:5899
I2838:100602;2785:5899
I2838:100603;2785:5899
I2838:100604;2785:5899
I2838:100605;2785:5899
I2838:100606;2785:5899
I2838:100607;2785:5899
I2838:100608;2785:5899
I2838:100609;2785:5899
I2838:100610;2785:5899
I2838:100611;2785:5899
I2838:100612;2785:5899Asia
19
I2838:102107;2785:5899
I2838:102108;2785:5899
I2838:102109;2785:5899
I2838:102110;2785:5899
I2838:102111;2785:5899
I2838:102112;2785:5899
I2838:102113;2785:5899
I2838:102114;2785:5899
I2838:102115;2785:5899
I2838:102116;2785:5899
I2838:102117;2785:5899
I2838:102118;2785:5899
I2838:102119;2785:5899
I2838:102120;2785:5899
I2838:102121;2785:5899
I2838:102122;2785:5899
I2838:102123;2785:5899
I2838:102124;2785:5899
I2838:102125;2785:5899Oceania
5
I2838:103487;2785:5899
I2838:103488;2785:5899
I2838:103489;2785:5899
I2838:103490;2785:5899
I2838:103491;2785:5899Part 02
Design System
Foundation을 조합한 재사용 가능한 제품 UI 컴포넌트입니다.Figma 7 frames · 34 subsections · 154 visual variants
Action
SquareButton
21 variants · 1903:23092RoundButton
16 variants · 1903:23120TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
FloatingButton
2 variants · 3271:49238UtilityButton
1 variants · 2838:106760BottomActions
4 variants · 2816:43646ButtonGroup
1 variants · 2827:31659Title
Auth
Icon
6 variants · 2746:23970
SocialLoginButton
3 variants · 3292:17774AccountProvider
3 variants · 1903:23667카카오애플구글AccountProvider list
1 variants · 3301:14599- 연결된 계정
- 카카오
Login
3 variants · 3241:30454최근에 로그인했어요!
최근에 로그인했어요!
최근에 로그인했어요!
Input
InputField
8 variants · 1903:23140한글, 영어 포함 5자 이내로 입력해주세요.
한글, 영어 포함 5자 이내로 입력해주세요.
원
JPY
SearchBar
2 variants · 1903:23392InputField application
3 variants · 2827:31670TitleDescription
TitleDescription
TitleDescription
InputField Card
3 variants · 1903:23337엔화
0￥= 0원
엔화
1,200.99￥= 12,000원
총 합계99,991,200.99￥
Select
Check
10 variants · 1903:23228Radio
2 variants · 1952:34532Control Underline
4 variants · 2783:16745Control Text
1 variants · 1903:23462Control Pill
4 variants · 1903:23468ChoiceChip
1 variants · 2816:52466Token
1 variants · 2797:81097프랑스CategorySelector
19 variants · 3397:66609Category
1 variants · 2785:3645OptionRow
8 variants · 1903:23610OptionGroup
1 variants · 2836:21073Filter
Filter
4 variants · 1903:23846Calendar
DateItem
12 variants · 1903:23866DateItemSet
3 variants · 1903:23597일
일
준비
Week
1 variants · 2797:756준비
일
월
화
수
목
금
Month
1 variants · 1903:23489일월화수목금토
Pagination
Fraction
1 variants · 2811:348091/5
Dot
2 variants · 2802:4462Multiple Dot
1 variants · 2802:4469Modal
Component set 1 · 5 variants · Android invite 1Figma 3403:3755Confirmation
1903:23890내역을 삭제하시겠습니까?
삭제하시면 다시 복구시킬 수 없습니다.
Confirmation-check
3470:50017정말 여행을 나가시겠어요?
여행에서 나가도 내가 입력한 지출은 그대로 남아요.
Selection-check
2785:4100Title
Selection
2821:75258Title
Agreement
2797:86545약관에 동의해주세요
Android invite
6208:15846이제 안드로이드 친구도 함께해요!
여비가 안드로이드에도 출시됐어요. 친구를 초대하고, 함께 가계부를 작성해보세요.
Overlay behavior
Dialog
shared-overlayBottom sheet
shared-bottom-sheetBanner
Component sets 3 · 9 variantsFigma 3403:4429Image · Airport · 100
2811:34804공항이 붐비는 시간?미리 알고 피해 가세요!
1/5Image · Android · 100
6208:8072출시친구에게 여비를 공유해보세요!
Image · YeoBee · 100
2827:63841여행 경비, 아직도 엑셀에 적으세요?여비가 자동으로 정리해줘요!
Image · Airport · 48
2838:42989실시간 입국장 현황 보기
Image · Android · 48
6208:15931이제 안드로이드 친구와 같이 써요
Error
1958:36366지출금액보다 200 많아요!
Default
2827:93482Warning
2827:53831Savings
3481:9066650.11원의 짤짤이는 여비가 모아두었어요.Toast
Component set 1 · 2 variantsFigma 3403:4449Error message
1903:23836한글, 영어 포함 5자 이내로 입력해주세요.
Success
2785:4187한글, 영어 포함 5자 이내로 입력해주세요.
Tooltip
Component set 1 · 3 variantsFigma 3403:4469Bottom · Green
2733:23216지금 바로 친구를 초대해서
함께 가계부를 작성해보세요!
함께 가계부를 작성해보세요!
Bottom · Gray
3241:29956최근에 로그인했어요!
Top · Gray
2838:32617잔액을 다른 화폐로 변경해 보세요!
Divider
Component set 1 · 4 variantsFigma 3403:4489Solid
1903:23241Dashed
1903:23245Strong
1903:23251Subtle
1903:23249Empty
Standalone components 2Figma 3403:12010Search result
2816:55063검색 결과가 없어요.
Upcoming trip
3468:8570다가오는 여행
등록된 여행이 없어요.여행을 등록해보세요!
Navigation
Component sets 4 · variants 17 · Bottom navigation 1Figma 3397:73901Navigation bar · 4
2 icon
1903:234312 text
1903:234521 text / search
1903:23440Country
6505:25153Navigation icon · 6
settlement · selectedsettlement · unselectedwallet · selectedwallet · unselectedreport · selectedreport · unselected
Navigation item · 2
Header · 4
Search
2816:53369Date picker
2816:67774여행일정을 등록해주세요.12.01 금 - 12.02 토
MY
2821:70859양송이당신은 여비의 1등 총무
여행 8개국
Input fields
2827:31014Title
Bottom navigation · 1
Navigation
1903:24045Home header · 1
Profile home header
shared-home-headerList
3403:4509
List/Item/Simple
하나의 항목과 값을 한 줄로 나열해 빠르게 정보를 확인할 때 사용합니다.
ParentChild
결제한 금액0원
영민에게 보낼 금액12,000원
List/Group/Expandable
하나의 기준 항목 아래에 여러 정보를 묶어, 필요할 때 펼쳐서 확인할 수 있습니다.
FoldExpand
List/Item/Default
기본 형태의 리스트 아이템입니다.
NavigationSummary
Text지출 형태
66.6%143,221,954,567원
List/Item/Category
아이콘과 함께 항목의 성격을 명확히 보여주는 리스트 아이템입니다.
Default
하루꼬박제주여행...99,999,9... ENR
143,221,954,567원
143,221,954,567원
List/Item/Amount
프로필과 함께 금액 정보를 표시하는 리스트 아이템입니다.
Default
양송이List/Group/Amount
금액 리스트를 묶은 그룹입니다.
Default
양송이최여비박여비List/Group/Profile
프로필 타입 리스트 아이템을 상태별로 묶은 그룹입니다.
Default
초대 완료양송이
초대 예정한한한한한한한짱구울보
양송이초대 예정
한한한한한한한짱구울보List/Item/Action
정보를 표시하며 탭 시 상세 또는 설정 화면으로 이동하는 리스트 아이템입니다.
Default
Card
3403:4529
Card/Shortcut
특정 기능이나 플로우로 빠르게 진입할 수 있도록 제공하는 카드입니다.
StaticButtonLink
여행 초대받기
여행 초대받기Card/Invitation
초대, 요청 등 사용자의 응답이 필요한 정보를 전달하는 카드입니다.
Default
일본 여행
짱구짱구짱 님이 가계부에 초대했습니다.
초대를 수락하고 여행경비를 함께 기록해보세요.
Card/Summary
금액이나 수치처럼 핵심 정보를 요약해 보여주는 카드입니다.
TextGraph
공동경비 잔액 90,000원
- 모인돈
- 600,000원
- 총쓴돈
- 510,000원
공동 지출개인 지출
90,000원Card/Create
새로운 항목을 추가하거나 생성을 시작할 때 사용하는 카드입니다.
Default
Card/Feedback
서비스에 대한 의견 수집이나 참여를 유도하기 위한 카드입니다.
Default
여러분의 목소리에
귀를 기울이고 있어요!
귀를 기울이고 있어요!
Card/Preview
진행 예정이거나 대표 콘텐츠를 미리 보여주는 카드입니다.
StaticButton
유럽 여행기2023년 12월 08일 - 2023월 12월 12일Card/Onboarding
온보딩 카드입니다.
Default
동행자 등록하기
여행 경비를 손쉽게 추적하세요
최대 10명까지, 각자의 지출을 한눈에!
Graph
3403:4549
Graph
수치나 비율을 시각적으로 표현해 한눈에 비교할 수 있도록 도와주는 요소입니다.
BarBar (Stacked)Track (Background)
Profile
3403:12030
Profile/Avatar
사용자를 시각적으로 구분하기 위한 프로필 이미지 요소입니다.
SingleMulti
+2Profile/AvatarGroup
여러 사용자를 하나의 그룹으로 요약해 표시하는 컴포넌트입니다.
Default
+2Profile/List
사용자 목록을 이름과 함께 나열해 표시하는 컴포넌트입니다.
LargeMediumSmall
양송이양송이양송이Profile/List/Action
사용자 정보와 함께 추가 동작을 제공하는 리스트 컴포넌트입니다.
DefaultDisabledError
양송이양송이양송이한글, 영어 포함 5자 이내로 입력해주세요.
Profile/Summary
사용자의 핵심 정보를 요약해 표시하는 컴포넌트입니다.
StaticButtonLink
양송이 당신은 여비의 1등 총무여행 8개국양송이 당신은 여비의 1등 총무여행 8개국Image
3403:15707
Image/Select
이미지를 선택하거나 추가하는 상태를 표시하는 컴포넌트입니다.
CameraCheckUncheck
Image/Crop
이미지를 지정한 영역에 맞게 잘라내기 위한 컴포넌트입니다.
Default
Icon Components
3403:15730
Icon/Status
상태나 결과를 즉각적으로 전달하기 위한 아이콘입니다.
WarningWarning TriangleSuccess
Icon/Action
특정 행동을 실행하기 위한 아이콘입니다.
EditInviteDeletePlus
Icon/UIcontrol
화면의 상태를 제어하거나 보조적인 인터랙션을 나타내는 요소입니다.
CancelChevronSame 24Same 18PlusMinusInfo 18Info 14Indent
Icon/Symbol
기능이나 의미를 상징적으로 표현하는 아이콘입니다.
PigLockClockFailWarningTrashInvite
