바이벌러리
메뉴
외관 및 언어
주제별 용어 · 50 안내서

디자인

화면을 명확하고, 일관되며, 사용하기 쉽고, 누구에게나 열려 있도록 만드는 방법을 배우세요.

01 / Atlas

모든 디자인 용어

간단한 의미, 예시, 사용 시점, 공식성, 코드명을 포함한 용어 열기

  1. 01 · 핵심

    간격 척도 Spacing Scale

    Spacing Scale은 틈 크기를 모아둔 작은 세트야. 묶음을 보여주고 시각적인 규칙성을 유지해 줘.

  2. 02 · 핵심

    구성 요소 Component

    컴포넌트는 명확한 구조, 행동, 상태, 그리고 한계를 가진, 다시 쓸 수 있는 인터페이스 부분이에요.

  3. 03 · 핵심

    그라디언트 Gradient

    그러데이션은 색이나 투명도가 부드럽게 변하는 거예요. 선, 원, 각도, 또는 망사 모양을 따라가기도 해요.

  5. 05 · 더 많은 세부 정보

    글래스모피즘 Glassmorphism

    글래스모피즘은 투명한 레이어 표면을 가진 시각적 스타일입니다. 블러, 밝은 테두리 및 작은 깊이감을 사용합니다.

  6. 06 · 더 많은 세부 정보

    네오브루탈리즘 Neobrutalism

    네오브루탈리즘은 대담하고 높은 대비의 디지털 스타일입니다. 단순한 형태, 두꺼운 테두리, 직접적인 색상, 명확한 기계적 레이아웃을 사용합니다.

  8. 08 · 더 많은 세부 정보

    뉴모피즘 Neumorphism

    뉴모피즘은 부드럽고 낮은 대비의 스타일입니다. 밝고 어두운 그림자가 컨트롤을 하나의 색상 표면에서 솟아오른 것처럼 또는 눌린 것처럼 보이게 합니다.

  9. 09 · 핵심

    다크 모드 Dark Mode

    다크 모드는 어두운 환경에 맞게 표면, 텍스트, 테두리, 미디어, 상태를 변경합니다.

  10. 10 · 핵심

    디자인 시스템 Design System

    디자인 시스템은 다 함께 쓰고 관리하는 규칙, 디자인 토큰, 컴포넌트, 패턴, 가이드라인의 묶음이에요.

  11. 11 · 핵심

    디자인 토큰 Design Token

    디자인 토큰은 단 하나의 디자인 선택에 이름을 붙여요. 예를 들어 색상, 여백, 글꼴, 또는 움직임의 속도가 있어요.

  12. 12 · 더 많은 세부 정보

    리퀴드 글래스 Liquid Glass

    리퀴드 글래스는 움직이는 투명한 재료 스타일입니다. 렌즈 같은 굴절, 하이라이트 및 결합되거나 구부러진 것처럼 보이는 형태를 사용합니다.

  13. 13 · 핵심

    머티리얼 디자인 Material Design

    머티리얼 디자인은 구성 요소와 상호작용을 위한 시스템입니다. 계층화된 표면, 목적 있는 모션, 유연한 레이아웃 및 공유 디자인 토큰을 사용합니다.

  14. 14 · 더 많은 세부 정보

    멤피스 스타일 Memphis Style

    멤피스 스타일은 대담한 포스트모던 룩입니다. 강한 형태, 상충하는 색상, 패턴, 불균형, 장난기 있는 에너지를 사용합니다.

  15. 15 · 핵심

    미니멀리즘 Minimalism

    미니멀리즘은 디자인에 필요 없는 것을 제거합니다. 그래도 제품을 명확하고, 유용하며, 독특하게 유지합니다.

  17. 17 · 핵심

    변형 Variant

    Variant는 다른 크기, 강도, 설정에 맞춘 공식적인 버전의 컴포넌트야.

  18. 18 · 핵심

    상호작용 상태 Interaction State

    상호작용 상태는 컨트롤의 지금 상태를 보여줘요. 기본, 마우스 올림, 포커스, 누름, 비활성화, 로딩, 오류, 성공 등이 있어요.

  19. 19 · 핵심

    색상 대비 Color Contrast

    색상 대비는 콘텐츠와 주변 배경 사이의 측정된 밝기 차이를 나타냅니다. 주요 텍스트와 가장자리를 쉽게 볼 수 있는지 보여줍니다.

  20. 20 · 핵심

    색상 팔레트 Color Palette

    색상 팔레트는 계획된 색상 묶음이에요. 각 색상은 명확한 역할, 상태, 또는 표면을 가져요.

  21. 21 · 더 많은 세부 정보

    스위스 스타일 Swiss Style

    스위스 스타일은 명확한 그리드와 불균형이지만 균형 잡힌 레이아웃을 사용합니다. 또한 산세리프 글꼴, 사진 및 엄격한 시각적 순서를 사용합니다.

  23. 23 · 더 많은 세부 정보

    스큐어모피즘 Skeuomorphism

    스큐어모피즘은 디지털 제어를 설명하기 위해 친숙한 실제 물체를 복제합니다. 또한 재료까지 복제할 수 있습니다.

  25. 25 · 더 많은 세부 정보

    아이콘 그래피 Iconography

    아이콘 그래피는 일치하는 모양과 명확한 의미를 가진 행동과 아이디어의 공유된 심볼 집합입니다.

  26. 26 · 더 많은 세부 정보

    와비-사비 Wabi-sabi

    와비사비는 일본의 미에 대한 관점입니다. 완벽한 광택보다 제한, 변화, 불균형한 형태, 나이, 그리고 정직한 재료를 중시합니다.

  27. 27 · 더 많은 세부 정보

    웹 브루탈리즘 Web Brutalism

    웹 브루탈리즘은 거친 웹 스타일입니다. 일반적인 정제된 모습 대신 구조, 브라우저 기본값, 일반 글꼴, 계획된 거칠음을 보여줍니다.

  28. 28 · 핵심

    유기적 디자인 Organic Design

    유기적 디자인은 자연에서 발견되는 형태를 따릅니다. 불균형한 곡선, 촉감 있는 질감, 자연스러운 색상, 기계적이지 않은 배치를 사용합니다.

  31. 31 · 핵심

    접근성 Accessibility

    접근성은 다른 능력을 가진 사람들이 제품을 이해하고 사용하도록 도와줘.

  34. 34 · 더 많은 세부 정보

    클레이모피즘 Claymorphism

    클레이모피즘은 부풀어 오른 모양과 둥근 모서리를 가진 장난기 있는 스타일입니다. 부드러운 그림자와 파스텔 표면은 점토처럼 보이게 합니다.

  35. 35 · 핵심

    타이포그래피 Typography

    타이포그래피는 텍스트 스타일을 선택하고 배열하여 단어를 읽기 쉽고, 정렬되고, 브랜드에 맞게 만드는 방법입니다.

  36. 36 · 핵심

    터미널 미학 Terminal Aesthetic

    터미널 미학은 명령줄 화면에서 차용합니다. 고정폭 텍스트, 촘촘한 계층 구조, 프롬프트 표시, 몇 가지 색상, 그리고 명확한 상태를 사용합니다.

  38. 38 · 더 많은 세부 정보

    토착 웹 Vernacular Web

    토착 웹은 커뮤니티가 만드는 일상적인 사이트를 복제합니다. 이는 대규모 그룹이 만든 정교한 시스템과 다릅니다.

  39. 39 · 핵심

    편집 디자인 Editorial Design

    편집 디자인은 읽기 속도, 글꼴, 이미지, 캡션 및 반복되는 페이지 패턴을 통해 이야기를 구성합니다.

  40. 40 · 핵심

    포커스 링 Focus Ring

    지금 키보드를 입력받는 컨트롤 주변에 보이는 선이나 강조 표시.

  41. 41 · 더 많은 세부 정보

    프루티거 에어로 Frutiger Aero

    Frutiger Aero는 희망적인 2000년대 중반 스타일입니다. 반짝이는 인터페이스를 파란 하늘, 물, 푸른 식물, 거품, 친근해 보이는 기술과 혼합합니다.

  42. 42 · 핵심

    플랫 디자인 Flat Design

    플랫 디자인은 단순한 모양, 단색, 명확한 평면 영역을 사용하며, 깊이를 흉내낸 것은 거의 없음

  44. 44 · 더 많은 세부 정보

    Aqua Aqua

    Aqua는 초기 macOS의 반짝이는 인터페이스 스타일이에요. 빛나는 컨트롤, 젤 같은 입체감, 얇은 줄무늬, 밝은 파란색 포인트를 써요.

  45. 45 · 핵심

    B2B 기업 사이트 B2B Corporate Site

    B2B 기업 사이트는 회사의 실력, 규칙, 신뢰도, 그리고 적합성을 살펴보게 도와줘요. 구매나 파트너십도 지원하죠.

  46. 46 · 더 많은 세부 정보

    CSS 스퀴클 코너 CSS Squircle Corner

    CSS Borders Level 4 초안에서, 스퀴클(squircle)은 둥근 형태와 정사각형 사이의 볼록 슈퍼엘립스 모서리 모양 값입니다. superellipse(2)와 같으며, 0이 아닌 테두리 반경이 필요하고 여전히 브라우저 지원 확인이 필요합니다.

  47. 47 · 핵심

    CSS 테두리 반경 CSS Border Radius

    CSS border-radius는 수평 및 수직 반경을 사용하여 상자의 모서리를 사분원 형태로 만듭니다. 이는 그리기와 클리핑에는 영향을 주지만 상자의 레이아웃 크기를 변경하지 않으며, 수학적 스퀴클을 만들지는 않습니다.

  48. 48 · 핵심

    SaaS 마케팅 사이트 SaaS Marketing Site

    SaaS 마케팅 사이트는 한 가지 문제와 소프트웨어 서비스를 사람들에게 설명해요. 방문자가 자신에게 맞는지 판단하고 다음 단계를 고를 수 있게 도와줘요.

  49. 49 · 더 많은 세부 정보

    Windows Aero Windows Aero

    Windows Aero는 2000년대 후반의 데스크톱 스타일입니다. 투명한 창틀, 흐릿한 유리, 부드러운 빛, 겹쳐진 테두리를 사용합니다.

  50. 50 · 더 많은 세부 정보

    Y2K 디지털 미학 Y2K Digital Aesthetic

    이 디지털 미학은 1990년대 후반과 2000년대 초반 디지털 문화에서 유래한 레트로-퓨처 스타일입니다. 주로 크롬, 픽셀, 밝은 그라디언트, 장난기 있는 컴퓨터 세부 요소를 사용합니다.