Quick Start

사전 준비 사항

• Node.js 버전 20 이상.
• Vue 버전 3.5 이상.

$ npm i 12cm-ui-design-plugin

plugin install

import { createApp } from 'vue'

import uiDesignPlugin from '12cm-ui-design-plugin'
import '12cm-ui-design-plugin/style.css'

const app = createApp(App)

app.use(uiDesignPlugin)

Introduction

1. UI 컴포넌트란?

UI 컴포넌트는 UI를 구성하는 최소 단위로, 버튼, 필드, 체크박스 등과 같이 사용자가 직접적으로 상호작용하는 요소입니다. 이 컴포넌트들은 UI 디자인의 중요한 구성 요소로, 사용자에게 정보를 제공하거나, 행동을 유도하거나, 사용자 입력을 받는 등의 역할을 수행합니다.

2. UI 컴포넌트의 정의 및 특징

• 사용자 인터페이스의 기본 요소

버튼, 입력 필드, 슬라이더, 드롭다운 메뉴 등은 UI의 기본 구성 요소로서 사용자에게 정보를 보여주거나, 사용자의 입력을 받거나, 특정 동작을 수행하는 데 사용됩니다.

• 재사용 가능성

UI 컴포넌트는 재사용이 가능한 형태로 설계되어 여러 화면이나 웹페이지에서 동일한 컴포넌트를 반복적으로 사용할 수 있습니다.

• 시각적 구성

UI 컴포넌트는 디자인적으로 사용자가 쉽게 이해하고 사용할 수 있도록 시각적으로 구성됩니다. 색상, 글꼴, 아이콘 등의 시각적 요소들을 조합하여 컴포넌트의 기능과 목적을 명확히 전달합니다.

• 동작 및 상태

UI 컴포넌트는 사용자에게 특정 행동을 유도하거나, 사용자의 입력을 받거나, 현재 상태를 나타내기 위해 다양한 동작과 상태를 갖습니다. 예를 들어, 버튼을 클릭했을 때, 입력 필드의 상태가 변경될 때, 특정 아이콘이 표시될 때 등 다양한 방식으로 사용자와 상호작용합니다.

• 일관성

서비스 전체에서 UI 컴포넌트를 일관되게 사용함으로써 사용자가 컴포넌트가 어떻게 동작하는지 쉽게 예측할 수 있도록 돕습니다.

3. UI 컴포넌트의 중요성

UI 컴포넌트는 사용자가 제품이나 서비스를 사용할 때 가장 먼저 접하는 요소이며, 사용자의 경험에 직접적인 영향을 미칩니다. 따라서 UI 컴포넌트를 잘 디자인하고 개발하는 것은 사용자 경험을 향상시키고, 서비스의 성공을 위한 중요한 요소입니다.

4. 원투씨엠의 UI 컴포넌트

원투씨엠의 UI 컴포넌트는 버튼, 필드, 체크박스 등의 최소 단위 뿐만 아니라 커머스 영역에서 자주, 반복적으로 사용되는 영역을 하나의 컴포넌트로 구성되어 있습니다. 헤드리스를 기반으로 하여 배너, 카테고리, 상품목록, 검색, 기획전, 게시판 등 여러 화면에 반복적으로 사용되는 영역을 컴포넌트 형태로 구성하여 빠르고 효율적으로 화면 구성이 가능하며 백앤드와의 연결, 각종 옵션 등을 자유롭게 구성할 수 있습니다.