First morning run with the group. 5km done!모임 사람들과 첫 아침 달리기, 5km 완주했어요!
Foundations / New
Iconography
Simple line icons drawn on a 24px grid with a 2px round stroke. They support words and rarely replace them.24px 그리드 위에 2px 둥근 선으로 그린 단순한 라인 아이콘입니다. 아이콘은 글을 돕는 역할이며, 글을 대신하는 일은 드뭅니다.
Icon library아이콘 라이브러리
The DYNGLE core set: drawn in-house on our grid, with Korean names. Reach for these first. They include Bio, Wellness and Life icons made for DYNGLE products.DYNGLE 코어 세트입니다. 우리 그리드 위에 직접 그렸고 한국어 이름이 있어요. DYNGLE 제품을 위한 바이오, 웰니스, 라이프 아이콘을 포함해, 가장 먼저 이 세트에서 찾습니다.
Click to copy SVG눌러서 SVG 복사DYNGLE UI
Click any icon to copy its SVG at the selected size.아이콘을 누르면 선택한 크기의 SVG가 복사됩니다.
Extended library확장 라이브러리
When the core set doesn't have it, use the extended library: 1,856 icons from Lucide, normalized to DYNGLE line rules (24px grid, 2px round stroke, paths only). Icons that need fills were left out.코어 세트에 없는 아이콘은 확장 라이브러리에서 찾습니다. Lucide의 아이콘 1,856개를 DYNGLE 선 규칙(24px 그리드, 2px 둥근 선, path만 사용)에 맞춰 정리했습니다. 채움이 필요한 아이콘은 뺐어요.
Click to copy SVG눌러서 SVG 복사DYNGLE UI
Loading icons...아이콘을 불러오는 중...
Click any icon to copy its SVG at the selected size.아이콘을 누르면 선택한 크기의 SVG가 복사됩니다.
Grid & keylines그리드와 키라인
Sizes크기
| Icon size아이콘 크기 | Pairs with text함께 쓰는 글자 | Gap to label레이블과 간격 |
|---|---|---|
| 16px | 13-14px | 6px |
| 20px | 15-16px | 8px |
| 24px | 17px+ | 10px |
Usage사용 가이드
Pair icons with words아이콘에는 글을 함께
Put a visible label next to icons for anything less obvious than search, close or back.검색, 닫기, 뒤로처럼 명백한 것이 아니라면 아이콘 옆에 보이는 레이블을 둡니다.
Don't rely on a row of unlabeled icons. People guess, and guesses differ between cultures.레이블 없는 아이콘 줄에 기대지 않습니다. 사용자는 추측하고, 추측은 문화마다 다릅니다.
One style per screen한 화면에는 한 가지 스타일
Keep every icon on a screen at the same stroke weight and corner style.한 화면의 모든 아이콘은 같은 선 굵기와 모서리 스타일을 유지합니다.
Don't mix filled, outlined and emoji icons in the same toolbar.같은 도구 막대에 채운 아이콘, 선 아이콘, 이모지를 섞지 않습니다.
Color색
Emoji이모지
Icons are the product's voice; emoji are the people's. Use emoji where people express feelings to each other (reactions, messages, celebrations), not as interface icons.아이콘이 제품의 목소리라면 이모지는 사람들의 목소리입니다. 반응, 메시지, 축하처럼 사람들이 서로 마음을 전하는 곳에 쓰고, 인터페이스 아이콘으로는 쓰지 않습니다.
Reactions반응DYNGLE UI
Tap a reaction to add or remove yours. Counts sit next to the emoji, never inside it.반응을 눌러 추가하거나 취소해 보세요. 숫자는 이모지 안이 아니라 옆에 둡니다.
Reaction set반응 세트
Six reactions cover most feelings. Keep the set small and in this order so people learn where each one lives.여섯 가지 반응이면 대부분의 마음을 전할 수 있어요. 세트는 작게, 순서는 그대로 두어야 사람들이 위치를 기억합니다.
Click to copy눌러서 복사DYNGLE UI
DYNGLE Emoji libraryDYNGLE 이모지 라이브러리
1,595 emoji based on Microsoft Fluent Emoji (Flat), with colors tuned to the DYNGLE palette: darks lean to DYNGLE Black, whites to Living White, purples to Bio Violet and greens to Life Lime. They look the same on every device.Microsoft Fluent Emoji(Flat)를 바탕으로 색을 DYNGLE 팔레트에 맞춘 1,595개의 이모지입니다. 짙은 색은 DYNGLE Black, 흰색은 Living White, 보라는 Bio Violet, 초록은 Life Lime 쪽으로 옮겼습니다. 어느 기기에서나 같은 모양으로 보입니다.
Click to copy눌러서 복사DYNGLE UI
Loading emoji...이모지를 불러오는 중...
Search in English or Korean. Click to copy the SVG or the emoji character. Files live at /emoji/svg/{name}.svg.영어나 한국어로 찾을 수 있어요. 누르면 SVG나 이모지 문자가 복사됩니다. 파일 경로는 /emoji/svg/{이름}.svg입니다.
<img src="/emoji/svg/party-popper.svg" width="24" height="24" alt="" aria-hidden="true">
<img src="/emoji/svg/red-heart.svg" width="24" height="24" alt="Love"><img src="/emoji/svg/party-popper.svg" width="24" height="24" alt="" aria-hidden="true">
<img src="/emoji/svg/red-heart.svg" width="24" height="24" alt="마음">Where emoji belong이모지를 쓰는 곳
| Place위치 | Emoji이모지 | Why이유 |
|---|---|---|
| Reactions, chat, posts반응, 채팅, 게시글 | Yes사용 | People's own expression사람들의 자기 표현 |
| Celebration moments축하 순간 | One, at the end문장 끝에 하나 | A match, a goal reached연결 성사, 목표 달성 |
| Buttons, navigation, tabs버튼, 내비게이션, 탭 | No, use icons미사용, 아이콘 사용 | Rendering differs by device기기마다 모양이 다름 |
| Errors, payments, health, legal오류, 결제, 건강, 약관 | No미사용 | Can read as careless가볍게 보일 수 있음 |
Writing with emoji이모지와 함께 쓰는 글
Add at most one emoji, at the end of a sentence that already makes sense without it.이모지는 최대 하나만, 이모지 없이도 뜻이 통하는 문장 끝에 둡니다.
Don't replace words with emoji or stack several in a row.단어를 이모지로 대신하거나 여러 개를 연달아 쓰지 않습니다.
Emoji and screen readers이모지와 스크린 리더
<!-- Decorative: the sentence already says it -->
<p>You and Jun are connected <span aria-hidden="true">🎉</span></p>
<!-- Meaningful: the emoji is the content -->
<button class="emoji-react" aria-pressed="true" aria-label="Love, 12">
<span aria-hidden="true">❤️</span> 12
</button><!-- 꾸밈용: 문장이 이미 뜻을 전함 -->
<p>준 님과 연결됐어요 <span aria-hidden="true">🎉</span></p>
<!-- 의미 있음: 이모지 자체가 콘텐츠 -->
<button class="emoji-react" aria-pressed="true" aria-label="마음 12명">
<span aria-hidden="true">❤️</span> 12
</button>Accessibility접근성
| Situation상황 | Markup마크업 |
|---|---|
| Icon next to a visible label보이는 레이블 옆 아이콘 | aria-hidden="true" |
| Icon-only button아이콘만 있는 버튼 | aria-label on the button + a Tooltip버튼에 aria-label + 툴팁 |
| Icon that carries status상태를 전하는 아이콘 | Pair with text; never color alone글과 함께, 색만으로 전하지 않기 |
<button class="dy-button secondary icon-only" aria-label="Share this moment">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">...</svg>
</button><button class="dy-button secondary icon-only" aria-label="이 순간 공유하기">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">...</svg>
</button>