aUI 디자인 시스템 | 피드 | Interactive Agency adnstyle

남다른 정성. 프로젝트
남다른 서비스. 서비스
남다른 공간. 회사소개
남다른 약속과 실천. 지속가능경영

adnstyle’s design system aUIsystem

세상을 디자인하기 위한
우리만의 시스템

세상을 디자인하기 위한 우리만의 시스템

Principle
aUI 디자인의 기본이 되는 공통 가치와 원칙은 이 가이드라인에서 진실의 중심이자 우리 서비스를 통합된 디자인 언어에 맞추는 데 도움이 되도록 제공됩니다.
이동하기
CI
우리의 고유 CI는 우리의 철학과 가치를 정의합니다. 우리가 누구인지, 어떤 방향으로 나아가고자 하는지에 대한 기준을 제시합니다.
이동하기
Foundation
우리 기업의 이미지를 일관되게 표현될 수 있도록 사용자 경험을 만드는데 필수적인 시각적 요소입니다.
이동하기
Components
컴포넌트는 디자인시스템에서 반복적으로 사용하는 기능들의 구성요소입니다. 각 구성요소는 상호 작용 또는 UI 요구를 충족합니다.
이동하기

DESIGN PRINCIPLE

aUI System은 일상 업무에서 사용할 수 있는 일련의 단순화된 원칙과 함께 디자인시스템을 지속적으로 사용함으로써 고객이 우리와 상호 작용에 목적과 응집력을 제공합니다.

aUI System은 서비스를 위한 공통 컬러, 서체, 인터렉션 등 각 종 정책 및 규정에 관한 모든 컴포넌트를 미리 정해놓은 통합 패턴과 원칙들로 구성되며 불필요한 커뮤니케이션을 없애고 업무의 효율성을 높이기 위해 체계적으로 정리한 우리만의 컴포넌트 시스템입니다.
기획자도 작업자들도 놓치는 경우, 액션이나 나중 상황이 전혀 고려되지않고 있다가 프로젝트 후반부에 전반적으로 수정해야하는 경우들이 빈번히 발생하는데 이런 경우를 최소화하기위한 방법으로 디자인시스템은 가장 효과적인 방법이라 할 수 있습니다.

효율성 & 일관성

UI 설계시스템의 모든 요소가 문서화되고 명확한 규칙과 가이드라인이 라이브러리로 공유되기때문에 작업시간을 대폭 단축시킬 수 있고 같은 인터렉션의 컴포넌트를 하나로 사용하기때문에 프로젝트 전반적인 일관성을 유지합니다.

스마트하고 빠른 디자인

작업자들간의 원활한 커뮤니케이션으로 오류 수정 작업이 줄어듭니다. 협업의 주체인 디자이너와 개발자 간의 공통 커뮤니케이션 언어를 사용하기때문에 오해와 오류가 적고 모두가 원하는 산출물을 구현해 냅니다.

집중 디자인 가능

디자인시스템을 만들고 완벽히 적응하고 사용하기에는 많은 시간과 노력이 필요했습니다. 그러나 지금은 개선된 프로세스와 시너지 효과를 내어 디자이너들이 고민하고 연구해야 할 크리에이티브에 우리의 소중한 시간을 플러스하고 있습니다.

CI

LOGOS

Logo _ Primary: (주)에이디앤스타일의 중심이 되는 대표 로고.
대내외 커뮤니케이션 시 최우선으로 사용되는 타입.

Symbol Logo _ Secondary: 기업의 철학과 가치의 의미를 함축적으로 담고 있는
심볼 로고를 활용한 타입

COLORS

Color Pallette: 컬러는 기업을 표현하는 중요한 요소입니다.
컬러 사용에는 제한이 필요합니다. 지정된 색상과 사용 규정을 숙지하여 기업 아이덴티티의 일관성을 유지할 수 있도록 합니다. 그래서 사용 규정 안에서 자유롭게 디자인 할 수 있도록 컬러 별로, 밝기 순으로 총 11단계를 지원하도록 합니다.

Order of Priority: 기업 로고가 최적으로 구현될 수 있도록 우선순위에 따라 사용 규정을 준수하여 컬러를 적용합니다.
일관된 브랜드 아이덴티티를 고려하여 가이드라인에 명시된 색상과 보조 색상을 참고하여 적용하도록 합니다.

TYPEFACE

Fonts: (주)에이디앤스타일만의 타입페이스는 기업이미지를 상징하는 중요한 요소이기 때문에 유사한 서체나 변형을 가해서는 안된다. 반드시 표준형태를 준수하여야 한다.

FOUNDATION

COLOR

aUI의 컬러 가이드는 표준화된 컬러 및 사용가이드를 제공하여 디자이너가 일관성있는 브랜드 경험을 만들어 갈 수 있도록 돕습니다.

Main Color: 메인 컬러는 모든 기본 작업 색상으로 사용되는 대표 색상으로 큰 제목등 포인트로 사용합니다.

Sub Color: 메인 컬러와 함께 아이덴티티를 보조하고 카테고리에 따라 주요 컬러를 다양하게 제공합니다.

Neutral Color: 텍스트 및 배경 인터페이스 요소에 사용합니다.

Status Color: 상태 또는 변경 사항에 주의를 기울일 때 사용합니다.

TYPOGRAPHY

aUI의 컬러 가이드는 표준화된 컬러 및 사용가이드를 제공하여 디자이너가 일관성있는 브랜드 경험을 만들어 갈 수 있도록 돕습니다.

Heading + Body

Paragraph Style

ICONOGRAPHY

aUI의 아이콘은 사용자에게 아이디어 및 오브젝트를 전달하는 가장 효율적인 도구입니다.

Grid: Grid는 24X24을 기본으로 하며, 크기 및 목적에 따라 조정될 수 있습니다.

Padding: Grid는 상하좌우 2px의 Padding이 포함됩니다. 아이콘은 Padding을 제외한 영역 안에 그리도록 합니다.

Stroke: 기본 Stroke는 2pt이며, 아이콘의 크기, 목적에 따라 변경될 수 있습니다. (1~2pt) Stroke의 Outline이 픽셀에 물리도록 제작하는 것을 권장합니다.

Build: 아이콘의 제작은 기능과 목적에 따라 메타포가 될 사물 혹은 개념을 정의하고 오브젝트를 넣거나 빼서 전체적인 형태를 제작합니다.

COMPONENTS

BUTTONS

버튼은 사용자의 성공적인 작업수행을 위해 화면의 콘텐츠 영역 또는 하단 영역에 배치하여 화면 내 주요한 액션을 실행합니다.

Button Label: 텍스트 레이블은 한 번에 이해할 수 있게 직관적이고 간결하게 작성합니다.

Button Type: 사이즈는 높이 기준으로 X Large, Large, Medium, Small을 사용합니다. 사이즈에 따라 폰트 크기, 아이콘 사이즈, 레디어스, 패딩은 상이합니다.
일반적으로 페이지 구성의 마지막 전부를 아우르는 경우 Large를 사용합니다.
Input과 같이 사용 할 경우 Medium을 사용합니다.
Input 혹은 테이블안에 사용 할 경우 Small을 사용합니다.

Button State: 텍스트 레이블은 한 번에 이해할 수 있게 직관적이고 간결하게 작성합니다.

TABS

Tabs는 페이지 내 유사한 정보를 그룹핑하여 콘텐츠를 정리할 때 사용합니다.

Text Type

Box Type: 박스타입은 콘텐츠를 필터링 목적으로 구분하고자 할 때 사용합니다.
Fixed 탭은 모든 탭을 한 화면에 표시하며 각 탭은 고정 너비로 표시됩니다.
Scrollable 탭은 고정 너비 없이 표시되므로 더 긴 텍스트 레이블과 더 많은 수의 탭을 사용할 수 있습니다.