272 lines
8.3 KiB
Plaintext
272 lines
8.3 KiB
Plaintext
= UI 라이브러리(uiSDL)
|
|
|
|
== UI 라이브러리(uiSDL)란?
|
|
UI라이브러리(uiSDL)은 웹 UI 개발 리드타임 단축을 위하여 실무에 유용한 컴포넌트들을 담은 UI라이브러리입니다. +
|
|
Vue2 및 Vue3 용 라이브러리가 나뉘어져 있습니다.
|
|
|
|
NOTE: UI라이브러리 시스템 접속 +
|
|
vue2 : http://uisdl.scp.samsung.net/v2/[window=_blnak] +
|
|
vue3 : http://uisdl.scp.samsung.net/v3/[window=_blnak]
|
|
|
|
IMPORTANT: 접속이 안되는 경우 window host 파일에 아래와 같이 추가해 주시기 바랍니다 +
|
|
10.195.53.147 uisdl.scp.samsung.net
|
|
|
|
|
|
== 컴포넌트 주요 특징
|
|
|
|
- 삼성전자 웹 시스템 개발 시 빠르게 웹 화면을 개발할 수 있도록 사용빈도가 높은 UI 환경 구성 요소들을 오픈 소스 Framework인 Vue.js와 Bootstrap 기반으로 제작하여 제공합니다.
|
|
|
|
- 시스템의 특성에 맞게 제작이 가능하도록 화면의 구조인 레이아웃 6종과 단일 UI구성요소인 컴포넌트 37종으로 구성되어 있습니다
|
|
+
|
|
image::uisdl_1.png[]
|
|
|
|
- 각 페이지 화면의 우측 상단에 개발과 디자인 탭으로 구분되어 있습니다.
|
|
+
|
|
개발 탭에서는 개발 가이드와 간단한 기능 테스트를 해볼 수 있는 Code Demo 가 있고, 디자인 탭에서는 전사 UX 표준을 바탕으로 디자인 원칙과 구성요소들을 확인할 수 있습니다.
|
|
+
|
|
image::uisdl_2.png[]
|
|
|
|
== 컴포넌트 개발 환경
|
|
* VueJS 버전 3
|
|
* Used Open-source
|
|
** bootstrap: 5.3.0 or Higher
|
|
** vue-datepicker-next: 1.0.3 or Higher
|
|
|
|
== 컴포넌트 적용 방법
|
|
|
|
. Install from Local file
|
|
+
|
|
로컬 파일로부터 컴포넌트를 설치할 수 있습니다. 아래의 경로에서 파일을 다운로드 받습니다.
|
|
+
|
|
http://uisdl.scp.samsung.net/v3/download/sdl-component-3.0.0.tgz[sdl-component-3.0.0.tgz 다운로드]
|
|
+
|
|
해당 파일을 로컬의 임의의 위치로 복사한 다음, NPM 명령어로 컴포넌트를 설치합니다. 설치하실 프로젝트 루트 폴더로 이동한 다음, 아래 명령어를 커맨드 창에서 입력합니다.
|
|
+
|
|
[source, shell]
|
|
----
|
|
npm install --save ./{your-path}/sdl-component-{version}.tgz
|
|
----
|
|
|
|
. Import bootstrap
|
|
+
|
|
'bootstrap' 관련 스타일과 스크립트를 Entry Point 파일에 Import 합니다.
|
|
+
|
|
[source, javascript]
|
|
----
|
|
// bootstrap css등록 및 popper가 포함된 bootstrap bundle js 임포트
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
import 'bootstrap/dist/js/bootstrap.bundle.min';
|
|
----
|
|
|
|
. Import sdl-component
|
|
+
|
|
'sdl-component' 관련 스타일과 스크립트를 Entry Point 파일에 Import 하고
|
|
+
|
|
[source, javascript]
|
|
----
|
|
import 'sdl-component/src/assets/css/custom.css';
|
|
import SdlComponent from 'sdl-component';
|
|
----
|
|
+
|
|
전역 Vue(app)에서 사용할 수 있도록 Plugin을 등록합니다.
|
|
+
|
|
[source, javascript]
|
|
----
|
|
app.use(SdlComponent);
|
|
----
|
|
|
|
. Complete
|
|
+
|
|
이제 시스템 전역에서 'sdl-component'를 사용하실 수 있습니다
|
|
|
|
== UI 라이브러리 목록
|
|
활용빈도, 사용성을 고려하여 사내시스템 개발에 필요한 Library를 제공합니다.
|
|
|
|
* 레이아웃
|
|
+
|
|
화면의 구조를 정의하는 레이아웃 유형
|
|
+
|
|
[cols="7,33,60",options="header"]
|
|
|===
|
|
|No |Library |설명
|
|
|
|
|1
|
|
|GNB + Contents
|
|
|GNB와 콘텐츠로 구성된 화면 형태
|
|
|
|
|2
|
|
|GNB + LNB + Contents
|
|
|GNB, LNB, 콘텐츠로 구성된 화면 형태
|
|
|
|
|3
|
|
|GNB + LNB + Contents + Footer
|
|
|GNB, LNB, Footer, 콘텐츠로 구성된 화면 형태
|
|
|
|
|4
|
|
|GNB + LNB + Aside + Contents + Footer
|
|
|GNB, LNB, Footer, Aside, 콘텐츠로 구성된 화면 형태
|
|
|
|
|5
|
|
|Popup
|
|
|현재 화면에서 추가적으로 띄우는 레이어 형태의 창으로, 사용 유형에 따라 구별하여 사용
|
|
|
|
|6
|
|
|Center Frame
|
|
|본 화면의 상하좌우 중앙에 콘텐츠 박스가 위치
|
|
|===
|
|
|
|
* 컴포넌트
|
|
+
|
|
화면을 구성하는 요소 단위
|
|
+
|
|
[cols="7,33,60",options="header"]
|
|
|===
|
|
|No |Library |설명
|
|
|1
|
|
|GNB
|
|
|(Global Navigation Bar) 시스템 명과 메뉴를 포함한 네비게이션으로 화면의 최 상단에 구성
|
|
|
|
|2
|
|
|LNB
|
|
|(Left Navigation Bar) 서브메뉴라고 불리며 화면의 좌측에 구성
|
|
|
|
|3
|
|
|Aside
|
|
|자주 사용하는 기능을 빠르게 접근(Quick Access)할 수 있도록 제공하는 영역
|
|
|
|
|4
|
|
|Footer
|
|
|Copyright, 사이트 맵, 이용약관 등의 정보를 포함하며, 화면의 하단에 구성
|
|
|
|
|5
|
|
|Card List
|
|
|한 레이아웃에서 여러 개의 카드를 함께 사용할 때 사용
|
|
|
|
|6
|
|
|Search Grid
|
|
|검색조건을 입력/선택하는 조회 영역과 데이터결과를 호출하는 리스트영역으로 구성할 때 사용
|
|
|
|
|7
|
|
|Form
|
|
|여러 개의 컨트롤(Input Box, Radio Button, Dropdown Box 등)를 활용하여 하나의 입력 폼으로 구성할 때 사용
|
|
|
|
|8
|
|
|Form Detail
|
|
|폼 화면에서 입력한 정보를 화면에 표시할 때 사용
|
|
|
|
|9
|
|
|Board Detail
|
|
|게시판 게시물의 기본적인 상세 화면
|
|
|
|
|10
|
|
|Tree Detail
|
|
|계층 구조를 나타내는 트리 요소와 트리에서 선택한 정보를 페이지 전환 없이 즉각적으로 보여줄 때 사용
|
|
|
|
|11
|
|
|Create Board
|
|
|게시판 게시물의 기본적인 입력 화면
|
|
|
|
|12
|
|
|Approval
|
|
|시스템에서 Knox 결재나 시스템 내부 결재시 사용
|
|
|
|
|13
|
|
|Reply
|
|
|간단하게 사용자 간의 의사소통을 할 수 있는 폼 형태로 구성
|
|
|
|
|14
|
|
|Notice
|
|
|사용자에게 시스템 내 서비스 관련 정보들을 공지 시 사용
|
|
|
|
|15
|
|
|Alert
|
|
|공지나 안내 사항 같은 부가적인 정보, 경고 상태 혹은 사용자의 행동에 대한 즉각적인 피드백이 필요할 때 사용
|
|
|
|
|16
|
|
|Badge
|
|
|알림 목적으로 사용하거나, 데이터를 시각적으로 강조하고 싶을 때 사용
|
|
|
|
|17
|
|
|Button
|
|
|사용자가 클릭하여 기능을 수행할 수 있는 그래픽 요소
|
|
|
|
|18
|
|
|Card
|
|
|다양한 정보들을 그룹화하여 하나의 카드 모양 안에 구성할 때 사용
|
|
|
|
|19
|
|
|Collapse(Toggle)
|
|
|사용자가 두개의 반대되는 상태 중에서 선택할 수 있는 온오프 스위치
|
|
|
|
|20
|
|
|Tooltip
|
|
|페이지 요소 또는 기능에 대한 추가 정보를 제공하는 간단하고 유용한 메시지
|
|
|
|
|21
|
|
|Text Input
|
|
|입력 폼 요소 중 한 줄의 비교적 짧은 데이터를 입력할 경우 사용
|
|
|
|
|22
|
|
|Textarea
|
|
|입력 폼 요소 중 데이터의 내용이 일정하지 않거나, 여러 줄의 데이터를 입력할 경우 사용
|
|
|
|
|23
|
|
|Radio
|
|
|두개 이상의 항목 중 하나를 선택할 때 사용
|
|
|
|
|24
|
|
|Select
|
|
|사용자가 옵션 중 하나 또는 다중으로 선택할 수 있을 때 사용
|
|
|
|
|25
|
|
|Checkbox
|
|
|여러 개의 항목 중 하나 이상을 다중 선택할 때 사용하거나 On/Off의 Toggle 경우에 사용
|
|
|
|
|26
|
|
|Table
|
|
|데이터/정보를 열과 행으로 구분하여 사용자가 쉽게 읽고 이해할 수 있도록 제공
|
|
|
|
|27
|
|
|Progress
|
|
|사용자 액션에 대한 즉각 데이터가 표시가 어려운 경우(데이터의 로딩 처리 시간이 긴 경우) 작업의 진행 상태에 대한 정확한 피드백을 제공하기 위해 사용
|
|
|
|
|28
|
|
|Spinner
|
|
|사용자 액션에 대한 즉각 데이터가 표시가 어려운 경우(데이터의 로딩 처리 시간이 긴 경우) 작업의 진행 상태에 대한 정확한 피드백을 제공하지 못할 경우 사용
|
|
|
|
|29
|
|
|Navbar
|
|
|시스템 명과 메뉴를 포함한 네비게이션 영역으로 주로 상단(GNB)에 제공
|
|
|
|
|30
|
|
|File Attachment
|
|
|사용자가 첨부파일을 다운받거나 업로드할 경우에 사용
|
|
|
|
|31
|
|
|Tree
|
|
|목록의 계층 구조를 표현하기 위해 사용하는 요소
|
|
|
|
|32
|
|
|Datepicker
|
|
|날짜를 선택하고 그에 해당하는 데이터를 얻을 수 있도록 위젯 형태로 제공
|
|
|
|
|33
|
|
|Breadcrumb
|
|
|시스템 내 사용자의 메뉴의 이동경로를 의미하며 현재 사용자의 위치를 보여줄 때 사용
|
|
|
|
|34
|
|
|Pagination
|
|
|많은 양의 데이터를 여러 페이지로 나누고, 이전, 다음 페이지 혹은 특정 페이지로 이동할 수 있는 일련의 링크를 목록 하단에 배치하여 제공
|
|
|
|
|35
|
|
|Tab(Basic, Progress)
|
|
|페이지 이동 및 시점 전환 없이 그룹화된 콘텐츠를 제공할 때 사용
|
|
|
|
|36
|
|
|Jumbotron
|
|
|어떤 특별한 내용이나 정보를 눈에 띄게 보여주기 위한 박스 형태의 공간
|
|
|
|
|37
|
|
|Carousel
|
|
|한 공간에 여러 개의 콘텐츠를 슬라이드 형태로 제공
|
|
|=== |