Layout
그리드 규칙은 다양한 여기어때 서비스에서 일관성을 유지하기 위해 정의됩니다. 이를 위해 열 그리드와 10px, 20px 간격 규칙이 제공됩니다.
Figma UI Kit
DONE
Develop
iOS
DONE
Android
DONE
Layout
그리드 규칙은 다양한 여기어때 서비스에서 일관성을 유지하기 위해 정의됩니다. 이를 위해 열 그리드와 10px, 20px 간격 규칙이 제공됩니다.
Figma UI Kit
DONE
Develop
iOS
DONE
Android
DONE
Layout
그리드 규칙은 다양한 여기어때 서비스에서 일관성을 유지하기 위해 정의됩니다. 이를 위해 열 그리드와 10px, 20px 간격 규칙이 제공됩니다.
Figma UI Kit
DONE
Develop
iOS
DONE
Android
DONE
Overview
YDS 6.0에서는 기본 화면 타입 외 Jobs To Be Done 항목 강조가 필요할 경우, 페이지 최상단에 모듈 타입의 컨테이너를 생성할 수 있습니다.
Overview
YDS 6.0에서는 기본 화면 타입 외 Jobs To Be Done 항목 강조가 필요할 경우, 페이지 최상단에 모듈 타입의 컨테이너를 생성할 수 있습니다.
Overview
YDS 6.0에서는 기본 화면 타입 외 Jobs To Be Done 항목 강조가 필요할 경우, 페이지 최상단에 모듈 타입의 컨테이너를 생성할 수 있습니다.



Margin
YDS 6.0에서는 기본 화면 타입 외 Jobs To Be Done 항목 강조가 필요할 경우, 페이지 최상단에 모듈 타입의 컨테이너를 생성할 수 있습니다.
Margin
YDS 6.0에서는 기본 화면 타입 외 Jobs To Be Done 항목 강조가 필요할 경우, 페이지 최상단에 모듈 타입의 컨테이너를 생성할 수 있습니다.
Margin
YDS 6.0에서는 기본 화면 타입 외 Jobs To Be Done 항목 강조가 필요할 경우, 페이지 최상단에 모듈 타입의 컨테이너를 생성할 수 있습니다.
Default
기본 화면의 공통적인 좌우 여백은 20px 입니다.
Default
기본 화면의 공통적인 좌우 여백은 20px 입니다.
Default
기본 화면의 공통적인 좌우 여백은 20px 입니다.



Module
모듈타입의 공통적인 좌우 여백은 10px 입니다.
Module
모듈타입의 공통적인 좌우 여백은 10px 입니다.
Module
모듈타입의 공통적인 좌우 여백은 10px 입니다.



Module
모듈은 화면 내 Jobs To Be Done을 강조할 수 있으며, 페이지 최상단 영역에 위치합니다.
Module
모듈은 화면 내 Jobs To Be Done을 강조할 수 있으며, 페이지 최상단 영역에 위치합니다.
Module
모듈은 화면 내 Jobs To Be Done을 강조할 수 있으며, 페이지 최상단 영역에 위치합니다.
Style
모듈을 사용할때는 페이지 배경색은Sementic/Background/Secondary 컬러를 지정하고, 모듈 컨테이너의 배경색은 Sementic/Bacground/Primary로 지정합니다.
Style
모듈을 사용할때는 페이지 배경색은 Sementic/Background/Secondary 컬러를 지정하고, 모듈 컨테이너의 배경색은 Sementic/Bacground/Primary로 지정합니다.
Style
모듈을 사용할때는 페이지 배경색은Sementic/Background/Secondary 컬러를 지정하고, 모듈 컨테이너의 배경색은 Sementic/Bacground/Primary로 지정합니다.



1
Module Container
Name
Token, Vaule
Description
Radius
yds-radius-20
Background color
yds-color-alias-background-primary
Shadow
yds-shadow-flat
Width
(Screen width)-20px
Placement & Spacing
YDS 6.0에서는 기본적으로 화면 좌우에 20px의 공통 여백을 적용합니다. 그러나 Jobs To Be Done 항목 강조가 필요할 경우, ATF 영역에 모듈 타입의 컨테이너를 사용할 수 있고, 모듈이 포함된 섹션은 좌우 10px의 여백과 하단 여백 12px을 사용합니다. 모듈과 이어지는 섹션의 상단 radius는 16px을 사용합니다.
Placement & Spacing
YDS 6.0에서는 기본적으로 화면 좌우에 20px의 공통 여백을 적용합니다. 그러나 Jobs To Be Done 항목을 강조할 필요가 있을 경우, ATF 영역에 모듈 타입의 컨테이너를 사용할 수 있고, 모듈이 포함된 섹션은 좌우 10px의 여백과 하단 여백 12px을 사용합니다. 모듈과 이어지는 섹션의 상단 radius는 16px을 사용합니다.
Placement & Spacing
YDS 6.0에서는 기본적으로 화면 좌우에 20px의 공통 여백을 적용합니다. 그러나 Jobs To Be Done 항목을 강조할 필요가 있을 경우, ATF 영역에 모듈 타입의 컨테이너를 사용할 수 있고, 모듈이 포함된 섹션은 좌우 10px의 여백과 하단 여백 12px을 사용합니다. 모듈과 이어지는 섹션의 상단 radius는 16px을 사용합니다.



Credit
Contributor
테나@Terna, 쿼티@Qwerty
Credit
Contributor
테나@Terna, 쿼티@Qwerty
Credit
Contributor
테나@Terna, 쿼티@Qwerty
Copyright © GC COMPANY Corp. All rights reserved.
Copyright © GC COMPANY Corp. All rights reserved.
Copyright © GC COMPANY Corp.
All rights reserved.