PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

0.5.52

npm

12cm-ui-design-plugin

This template should help get you started developing with Vue 3 in Vite.

12cm12cm-ui12cm-ui-design-plugin
Published20 Jun 2025
Direct dependencies28
Transitive dependenciesNot calculated

README

Current package documentation

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

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 28

Native requirements
28 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
vue
Environment
{
  "local_name": "vue",
  "alias": false,
  "peer_metadata": null
}
^3.5.13runtime
glob
Environment
{
  "local_name": "glob",
  "alias": false,
  "peer_metadata": null
}
^11.0.3runtime
uuid
Environment
{
  "local_name": "uuid",
  "alias": false,
  "peer_metadata": null
}
^11.1.0runtime
swiper
Environment
{
  "local_name": "swiper",
  "alias": false,
  "peer_metadata": null
}
^11.2.5runtime
lottie-web
Environment
{
  "local_name": "lottie-web",
  "alias": false,
  "peer_metadata": null
}
^5.13.0runtime
lodash-unified
Environment
{
  "local_name": "lodash-unified",
  "alias": false,
  "peer_metadata": null
}
^1.0.3runtime
jiti
Environment
{
  "local_name": "jiti",
  "alias": false,
  "peer_metadata": null
}
^2.4.2development
vite
Environment
{
  "local_name": "vite",
  "alias": false,
  "peer_metadata": null
}
^6.2.6development
eslint
Environment
{
  "local_name": "eslint",
  "alias": false,
  "peer_metadata": null
}
^9.21.0development
oxlint
Environment
{
  "local_name": "oxlint",
  "alias": false,
  "peer_metadata": null
}
^0.15.13development
unocss
Environment
{
  "local_name": "unocss",
  "alias": false,
  "peer_metadata": null
}
^66.2.3development
vue-tsc
Environment
{
  "local_name": "vue-tsc",
  "alias": false,
  "peer_metadata": null
}
^2.2.8development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
~5.8.0development
@types/node
Environment
{
  "local_name": "@types/node",
  "alias": false,
  "peer_metadata": null
}
^22.13.9development
npm-run-all2
Environment
{
  "local_name": "npm-run-all2",
  "alias": false,
  "peer_metadata": null
}
^7.0.2development
@vue/tsconfig
Environment
{
  "local_name": "@vue/tsconfig",
  "alias": false,
  "peer_metadata": null
}
^0.7.0development
sass-embedded
Environment
{
  "local_name": "sass-embedded",
  "alias": false,
  "peer_metadata": null
}
^1.85.1development
vite-plugin-dts
Environment
{
  "local_name": "vite-plugin-dts",
  "alias": false,
  "peer_metadata": null
}
^4.5.3development
@tsconfig/node22
Environment
{
  "local_name": "@tsconfig/node22",
  "alias": false,
  "peer_metadata": null
}
^22.0.0development
eslint-plugin-vue
Environment
{
  "local_name": "eslint-plugin-vue",
  "alias": false,
  "peer_metadata": null
}
~10.0.0development
@vitejs/plugin-vue
Environment
{
  "local_name": "@vitejs/plugin-vue",
  "alias": false,
  "peer_metadata": null
}
^5.2.1development
eslint-plugin-oxlint
Environment
{
  "local_name": "eslint-plugin-oxlint",
  "alias": false,
  "peer_metadata": null
}
^0.15.13development
vite-plugin-static-copy
Environment
{
  "local_name": "vite-plugin-static-copy",
  "alias": false,
  "peer_metadata": null
}
^2.3.1development
vite-plugin-vue-devtools
Environment
{
  "local_name": "vite-plugin-vue-devtools",
  "alias": false,
  "peer_metadata": null
}
^7.7.2development
@typescript-eslint/parser
Environment
{
  "local_name": "@typescript-eslint/parser",
  "alias": false,
  "peer_metadata": null
}
^8.26.0development
@vue/eslint-config-prettier
Environment
{
  "local_name": "@vue/eslint-config-prettier",
  "alias": false,
  "peer_metadata": null
}
^10.2.0development
@vue/eslint-config-typescript
Environment
{
  "local_name": "@vue/eslint-config-typescript",
  "alias": false,
  "peer_metadata": null
}
^14.5.0development
@typescript-eslint/eslint-plugin
Environment
{
  "local_name": "@typescript-eslint/eslint-plugin",
  "alias": false,
  "peer_metadata": null
}
^8.26.0development

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "shasum": "d1ac0ae881bb4c51e03ea763c9c696fb13872389",
  "tarball": "https://registry.npmjs.org/12cm-ui-design-plugin/-/12cm-ui-design-plugin-0.5.52.tgz",
  "fileCount": 41,
  "integrity": "sha512-NrUvdioUb2vs5DJPE2LuFYHpxq4nEgubhEruMRafA42UJbmIKlWs5RduUXL6OLxZc0lZtZjYYYu3q0BABV4q3A==",
  "signatures": [
    {
      "sig": "MEQCIHrJtcZ5jOW9t8KCgSd+3F8ksaCnviaGiEF2sU9mDG3RAiBF8zrPvLVsmbnKKa5LOJoz6mBLCuV75vuT+Qo5Vm5rQA==",
      "keyid": "SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"
    }
  ],
  "unpackedSize": 739456
}

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 18:11 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:60f2a165de4c97faeca00a2be859baacbf12bd44e96a2fb93545838d411fb67d

Other collected versions

0.5.10512 Jan0.5.10412 Jan0.5.10324 Dec0.5.10224 Dec0.5.10119 Dec0.5.10019 DecView all collected versions →