Get started
Design principles
Three shared principles keep DYNGLE's many products feeling like one brand experience.뒹글의 다양한 제품이 같은 브랜드의 경험으로 이어지도록 세 가지 원칙을 공유합니다.
01 / Human, first.
Usable and understandable by anyone. We start from clear language and an easy-to-read structure.누구나 이해하고 사용할 수 있도록. 명확한 언어와 읽기 쉬운 구조에서 시작합니다.
- Write the button label before you design the screen.화면을 그리기 전에 버튼 레이블부터 씁니다.
- One primary action per screen; everything else steps back.화면마다 주요 행동은 하나, 나머지는 한발 물러섭니다.
- Design for one thumb, 200% zoom and a screen reader from day one.처음부터 한 손 엄지, 200% 확대, 스크린 리더를 고려합니다.
'Join the walk': a clear verb and the result people expect.'산책 참여하기': 명확한 동사와 사용자가 기대하는 결과.
'Proceed to engagement': clever or corporate words that make people pause.'참여 절차 진행': 사용자를 멈칫하게 하는 딱딱하거나 꾸민 말.
02 / Made to mingle.
Every element connects naturally. The same meaning always gets the same token and the same behavior.각 요소가 자연스럽게 연결되도록. 같은 의미에는 같은 토큰과 같은 동작을 사용합니다.
- Reach for an existing component before drawing a new one.새로 그리기 전에 기존 컴포넌트부터 찾습니다.
- Use semantic tokens (--dy-color-action) instead of raw hex values.원시 hex 대신 의미 토큰(--dy-color-action)을 씁니다.
- Same meaning, same look, same place, across Bio, Wellness and Life.같은 의미는 같은 모습으로 같은 자리에 둡니다. Bio, Wellness, Life 모두에서.
Every 'Save' is a primary button in the bottom-right of its dialog.모든 '저장'은 대화상자 오른쪽 아래의 주요 버튼입니다.
One team uses a violet pill, another a lime square for the same action.같은 행동에 한 팀은 바이올렛 pill, 다른 팀은 라임 사각형을 씁니다.
03 / Move with purpose.
Every motion has a reason. It signals state changes and helps people understand what to do next.움직임에는 이유가 있도록. 상태 변화를 알리고 다음 행동을 이해하도록 돕습니다.
- Animate only what changes state: appear, move, confirm.상태가 바뀌는 것만 움직입니다: 나타남, 이동, 확인.
- Keep UI motion under 300ms; save the mingle motion for brand moments.UI 모션은 300ms 이하로, mingle 모션은 브랜드 순간에만.
- Everything still works, and still makes sense, with reduced motion.동작 줄이기 설정에서도 모든 것이 작동하고 이해됩니다.
A chip springs into its selected state, confirming the tap.칩이 선택 상태로 튕기듯 바뀌며 탭을 확인해 줍니다.
Cards bounce in one by one on every scroll, delaying the content.스크롤할 때마다 카드가 하나씩 튀어 들어와 콘텐츠를 늦춥니다.
When principles collide원칙이 충돌할 때
Order of decisions판단의 순서
| Question질문 | Design standard디자인 기준 |
|---|---|
| Can people understand it right away?사용자가 바로 이해할 수 있나요? | Present the key action clearly on a single screen.핵심 행동을 한 화면에 명료하게 제시합니다. |
| Does it behave like other screens?다른 화면과 같은 동작인가요? | Use existing components and semantic tokens first.기존 컴포넌트와 의미 토큰을 먼저 사용합니다. |
| Is the color balanced?색의 균형이 맞나요? | Use accent colors within the color balance range for the screen's context.화면 맥락에 맞는 컬러 밸런스 범위 안에서 강조색을 사용합니다. |
| Does the motion aid understanding?움직임이 이해를 돕나요? | Express only the state changes that matter, and keep them short.필요한 상태 변화만 짧게 표현합니다. |
Scope적용 범위
The shared brand principles apply across Bio, Wellness, Life. This version covers web UI; product-specific data and terminology are defined within each service's context.브랜드의 공통 원칙은 Bio, Wellness, Life 전반에 적용합니다. 이 버전은 웹 UI를 위한 기준이며, 제품별 데이터와 전문 용어는 각 서비스의 맥락에 맞게 정의합니다.