Shadow

컴포넌트에 적용되는 Shadow 스타일 정의입니다. 모든 컴포넌트는 아래 Shadow 스타일 값 안에서 적용됩니다.

Develop

iOS

DONE

Android

DONE

Shadow

컴포넌트에 적용되는 Shadow 스타일 정의입니다. 모든 컴포넌트는 아래 Shadow 스타일 값 안에서 적용됩니다.

Shadow

컴포넌트에 적용되는 Shadow 스타일 정의입니다. 모든 컴포넌트는 아래 Shadow 스타일 값 안에서 적용됩니다.

Develop

iOS

DONE

Android

DONE

Preview

Preview
Preview

Style

Shadow는 텍스트, 아이콘, 이미지 등 다른 UI가 배치될 빈 표면과 함께 사용됩니다. 빈 표면과 그림자가 합쳐지면 화면의 깊이감을 줄 수 있습니다. 적절한 Shadow는 사용자의 집중을 이끌어낼 수 있고 해당 UI가 스크롤과 무관하게 화면에 고정되는 또는 클릭할 수 있는 요소임을 강조할 수 있습니다. shadow_header, shadow_dock 를 제외한 네 개의 Shadow는 단계별로 강조 단계가 높아지는 구조로 되어있습니다.

Style

Shadow는 텍스트, 아이콘, 이미지 등 다른 UI가 배치될 빈 표면과 함께 사용됩니다. 빈 표면과 그림자가 합쳐지면 화면의 깊이감을 줄 수 있습니다. 적절한 Shadow는 사용자의 집중을 이끌어낼 수 있고 해당 UI가 스크롤과 무관하게 화면에 고정되는 또는 클릭할 수 있는 요소임을 강조할 수 있습니다. shadow_header, shadow_dock 를 제외한 네 개의 Shadow는 단계별로 강조 단계가 높아지는 구조로 되어있습니다.

Style

Shadow는 텍스트, 아이콘, 이미지 등 다른 UI가 배치될 빈 표면과 함께 사용됩니다. 빈 표면과 그림자가 합쳐지면 화면의 깊이감을 줄 수 있습니다. 적절한 Shadow는 사용자의 집중을 이끌어낼 수 있고 해당 UI가 스크롤과 무관하게 화면에 고정되는 또는 클릭할 수 있는 요소임을 강조할 수 있습니다. shadow_header, shadow_dock 를 제외한 네 개의 Shadow는 단계별로 강조 단계가 높아지는 구조로 되어있습니다.

Spec

Spec
Spec

Token

iOS/Android/Web

yds-shadow-flat

X: 0 / Y : 1 / Blur : 2 / NeutralDark6

yds-shadow-header

X: 0 / Y : 4 / Blur : 6 / NeutralDark4

yds-shadow-dock

X: 0 / Y : -4 / Blur : 8 / NeutralDark6

yds-shadow-raised

X: 0 / Y : 2 / Blur : 16 / NeutralDark8

yds-shadow-float

X: 0 / Y : 2 / Blur : 8 / NeutralDark24

yds-shadow-sheet

X: 0 / Y : 4 / Blur : 20 / NeutralDark32

Usage

Usage
Usage
Shadow / Flat

Shadow / Flat

  • Card 형태로 그룹핑된 UI가 반복적으로 가로 또는 세로로 나열될 경우 사용할 수 있습니다.

  • Container와 배경의 구분을 보조하는 용도로 사용할 수 있습니다.

  • 가장 약한 Level의 Shadow이기 때문에 단독 사용으로 UI를 강조하는 역할을 수행할 수 없습니다.

  • Card 형태로 그룹핑된 UI가 반복적으로 가로 또는 세로로 나열될 경우 사용할 수 있습니다.

  • Container와 배경의 구분을 보조하는 용도로 사용할 수 있습니다.

  • 가장 약한 Level의 Shadow이기 때문에 단독 사용으로 UI를 강조하는 역할을 수행할 수 없습니다.

  • Card 형태로 그룹핑된 UI가 반복적으로 가로 또는 세로로 나열될 경우 사용할 수 있습니다.

  • Container와 배경의 구분을 보조하는 용도로 사용할 수 있습니다.

  • 가장 약한 Level의 Shadow이기 때문에 단독 사용으로 UI를 강조하는 역할을 수행할 수 없습니다.

Shadow / Header

Shadow / Header

  • 스크린 스크롤 시점이 (Header container height)px 이상부터, Header Container 하단에 Shadow/Header가 노출됩니다.
    ex) TopNavigation이 있는 경우 스크린 시점 56px 이상 시, Shadow/Header적용

  • Header Container에는 ❖TopNavigation, ❖Tab 또는 Filter와 같은 해당 페이지 전체에 영향을 주는 요소가 포함될 수 있습니다.

  • 스크린 스크롤 시점이 (Header container height)px 이상부터, Header Container 하단에 Shadow/Header가 노출됩니다.
    ex) TopNavigation이 있는 경우 스크린 시점 56px 이상 시, Shadow/Header적용

  • Header Container에는 ❖TopNavigation, ❖Tab 또는 Filter와 같은 해당 페이지 전체에 영향을 주는 요소가 포함될 수 있습니다.

  • 스크린 스크롤 시점이 (Header container height)px 이상부터, Header Container 하단에 Shadow/Header가 노출됩니다.
    ex) TopNavigation이 있는 경우 스크린 시점 56px 이상 시, Shadow/Header적용

  • Header Container에는 ❖TopNavigation, ❖Tab 또는 Filter와 같은 해당 페이지 전체에 영향을 주는 요소가 포함될 수 있습니다.

Shadow / Dock

Shadow / Dock

❖Buttondock에 사용되는 Shadow입니다.
AndroidNavBar와 자연스럽게 연결되도록 상단에만 섀도우가 적용된 타입입니다.

❖Buttondock에 사용되는 Shadow입니다.
AndroidNavBar와 자연스럽게 연결되도록 상단에만 섀도우가 적용된 타입입니다.

Shadow / Raised

Shadow / Raised

  • 가장 범용적인 Shadow로 특정 UI(ex. ❖Dialog)를 강조하기 위해 사용할 수 있습니다.

  • Card 형태로 그룹핑된 UI가 반복적으로 가로 또는 세로로 나열될 경우 사용할 수 있습니다.

  • Card UI가 Interactive한 요소임(ex.영역 전체가 Touch Area)을 표현하는 데 도움을 줄 수 있습니다.

  • Container와 배경의 구분을 강화하는 용도로 사용할 수 있습니다.

Shadow / Float

Shadow / Float

  • ❖FAB에 적용된 Shadow로 스크롤과 무관하게 특정 UI가 고정되는 경우에 사용합니다.

  • Button이 포함된 CTA 영역을 강조하는 데 도움을 줄 수 있습니다.

  • ❖FAB에 적용된 Shadow로 스크롤과 무관하게 특정 UI가 고정되는 경우에 사용합니다.

  • Button이 포함된 CTA 영역을 강조하는 데 도움을 줄 수 있습니다.

Shadow / Sheet

Shadow / Sheet

  • ❖BottomSheet와 함께 사용합니다.

  • YDS에 포함된 Shadow 스타일 중 가장 큰 강조 역할을 수행합니다.

  • ❖BottomSheet와 함께 사용합니다.

  • YDS에 포함된 Shadow 스타일 중 가장 큰 강조 역할을 수행합니다.

Credit

Contributor

테나@Terna, 엘라@Ella

Credit

Contributor

테나@Terna, 엘라@Ella

Credit

Contributor

테나@Terna, 엘라@Ella

여기어때

여기어때컴퍼니

Careers

FAQs

Terms of use

Copyright © GC COMPANY Corp. All rights reserved.

여기어때

여기어때컴퍼니

Careers

FAQs

Terms of use

Copyright © GC COMPANY Corp.

All rights reserved.

여기어때

여기어때컴퍼니

Careers

FAQs

Terms of use

Copyright © GC COMPANY Corp. All rights reserved.

Design Library

About

Brand

Foundations

Components

Expressions

Resources

Articles

Design Library

Foundation

Graphic

Content

Color

Typography

Iconography

Layout

Radius

Shadow

Spacing