Iconography
YDS 아이콘 시스템은 명료한 의사소통을 목표로합니다. 핵심 쉐입을 기반으로 곡선과 직선의 사용을 제한하여 텍스트 표현의 한계를 보완하고 사용자에게 아이디어 및 오브젝트를 효율적으로 전달하도록 설계되었습니다. 또한 디자인 시스템의 다른 요소에도 완벽하게 맞습니다.
Iconography
YDS 아이콘 시스템은 명료한 의사소통을 목표로합니다. 핵심 쉐입을 기반으로 곡선과 직선의 사용을 제한하여 텍스트 표현의 한계를 보완하고 사용자에게 아이디어 및 오브젝트를 효율적으로 전달하도록 설계되었습니다. 또한 디자인 시스템의 다른 요소에도 완벽하게 맞습니다.
Iconography
YDS 아이콘 시스템은 명료한 의사소통을 목표로합니다. 핵심 쉐입을 기반으로 곡선과 직선의 사용을 제한하여 텍스트 표현의 한계를 보완하고 사용자에게 아이디어 및 오브젝트를 효율적으로 전달하도록 설계되었습니다. 또한 디자인 시스템의 다른 요소에도 완벽하게 맞습니다.
Icon naming convention
아이콘의 이름은 동사 대신 명사로 사용합니다. 대치되는 아이콘이 있는 경우 _no 를 사용하여 표기합니다. e.g. icn_yds_picture / icn_yds_no_picture
Icon naming convention
아이콘의 이름은 동사 대신 명사로 사용합니다. 대치되는 아이콘이 있는 경우 _no 를 사용하여 표기합니다. e.g. icn_yds_picture / icn_yds_no_picture
Icon naming convention
아이콘의 이름은 동사 대신 명사로 사용합니다. 대치되는 아이콘이 있는 경우 _no 를 사용하여 표기합니다. e.g. icn_yds_picture / icn_yds_no_picture
Style
YDS에서는 Solid(면)아이콘을 기본으로 사용합니다.
Style
YDS에서는 Solid(면)아이콘을 기본으로 사용합니다.
Style
YDS에서는 Solid(면)아이콘을 기본으로 사용합니다.
Icon design
YDS에서는 Solid(면)아이콘을 기본으로 사용합니다.
Icon design
YDS에서는 Solid(면)아이콘을 기본으로 사용합니다.
Icon design
YDS에서는 Solid(면)아이콘을 기본으로 사용합니다.
Grid
Grid는 20x20px을 기본으로 사용하며, 크기 및 목적에 따라 조정될 수 있습니다.
Grid
Grid는 20x20px을 기본으로 사용하며, 크기 및 목적에 따라 조정될 수 있습니다.
Grid
Grid는 20x20px을 기본으로 사용하며, 크기 및 목적에 따라 조정될 수 있습니다.
Padding
Grid에는 상하좌우 2px의 Padding이 포함됩니다. 아이콘은 padding을 제외한 영역 안에 그리도록 합니다.
Padding
Grid에는 상하좌우 2px의 Padding이 포함됩니다. 아이콘은 padding을 제외한 영역 안에 그리도록 합니다.
Padding
Grid에는 상하좌우 2px의 Padding이 포함됩니다. 아이콘은 padding을 제외한 영역 안에 그리도록 합니다.
Key shape
Key Shape은 각 아이콘의 기본 틀을 정의합니다. 비슷한 비율의 아이콘에 일관성을 줄 수 있습니다. 아래의 가이드를 따라 형태를 잡습니다.
Key shape
Key Shape은 각 아이콘의 기본 틀을 정의합니다. 비슷한 비율의 아이콘에 일관성을 줄 수 있습니다. 아래의 가이드를 따라 형태를 잡습니다.
Key shape
Key Shape은 각 아이콘의 기본 틀을 정의합니다. 비슷한 비율의 아이콘에 일관성을 줄 수 있습니다. 아래의 가이드를 따라 형태를 잡습니다.
Storke
부득이하게 Line 형태를 사용해야할 경우, Stroke 기본값은 2px입니다 아이콘의 크기, 위치 및 목적에 따라 변경될 수 있습니다. Stroke의 outline이 픽셀에 물리도록 제작하는 것을 권장합니다.
Storke
부득이하게 Line 형태를 사용해야할 경우, Stroke 기본값은 2px입니다 아이콘의 크기, 위치 및 목적에 따라 변경될 수 있습니다. Stroke의 outline이 픽셀에 물리도록 제작하는 것을 권장합니다.
Storke
부득이하게 Line 형태를 사용해야할 경우, Stroke 기본값은 2px입니다 아이콘의 크기, 위치 및 목적에 따라 변경될 수 있습니다. Stroke의 outline이 픽셀에 물리도록 제작하는 것을 권장합니다.
Radius
기본적으로 형태가 바닥에 닿는 밑 부분의 각은 직선형태( )로, 상단을 바라보고 있는 윗 부분의 각은 곡선형( )으로 표현합니다. 목적에 따라 조정될 수 있습니다.
Radius
기본적으로 형태가 바닥에 닿는 밑 부분의 각은 직선형태( )로, 상단을 바라보고 있는 윗 부분의 각은 곡선형( )으로 표현합니다. 목적에 따라 조정될 수 있습니다.
Radius
기본적으로 형태가 바닥에 닿는 밑 부분의 각은 직선형태( )로, 상단을 바라보고 있는 윗 부분의 각은 곡선형( )으로 표현합니다. 목적에 따라 조정될 수 있습니다.
묘사
해당 개체를 나타내기 위해 아이콘에 대한 묘사가 면 안에서 필요할 경우 1.5px의 라인을 사용하여 묘사합니다.
묘사
해당 개체를 나타내기 위해 아이콘에 대한 묘사가 면 안에서 필요할 경우 1.5px의 라인을 사용하여 묘사합니다.
묘사
해당 개체를 나타내기 위해 아이콘에 대한 묘사가 면 안에서 필요할 경우 1.5px의 라인을 사용하여 묘사합니다.
곡선의 사용
곡선을 사용하여 아이콘을 제작해야할 경우에는, 가로 세로 비율이 동일한 정원을 활용하여 표현합니다. 정원이 아닌 자유곡선을 활용한 표현은 지양합니다.
곡선의 사용
곡선을 사용하여 아이콘을 제작해야할 경우에는, 가로 세로 비율이 동일한 정원을 활용하여 표현합니다. 정원이 아닌 자유곡선을 활용한 표현은 지양합니다.
곡선의 사용
곡선을 사용하여 아이콘을 제작해야할 경우에는, 가로 세로 비율이 동일한 정원을 활용하여 표현합니다. 정원이 아닌 자유곡선을 활용한 표현은 지양합니다.
Font
폰트를 활용한 아이콘을 제작시에는 Pretendard 서체를 사용하여 표현합니다.
Font
폰트를 활용한 아이콘을 제작시에는 Pretendard 서체를 사용하여 표현합니다.
Font
폰트를 활용한 아이콘을 제작시에는 Pretendard 서체를 사용하여 표현합니다.
Arrow
화살표는 2px의 Line 형태로 표현한다. 화살표 코의 각에는 라운드값을 설정합니다.
Arrow
화살표는 2px의 Line 형태로 표현한다. 화살표 코의 각에는 라운드값을 설정합니다.
Arrow
화살표는 2px의 Line 형태로 표현합니다. 화살표 코의 각에는 라운드값을 설정합니다.
Credit
Contributor
리니@Riny
Credit
Contributor
리니@Riny
Credit
Contributor
리니@Riny
Copyright © GC COMPANY Corp. All rights reserved.
Copyright © GC COMPANY Corp. All rights reserved.
Copyright © GC COMPANY Corp.
All rights reserved.
Copyright © GC COMPANY Corp.
All rights reserved.