홈페이지를 위한 토스트 ( Toast UI )는 웹개발시 자주 사용되고 필요한 것을 제공하는 UI 자바스크립트 라이브러리이다. 개발자와 사용자를 위한 편의성을 제공하고 있기에 업무용 웹화면이나 또는 콘텐츠용 웹화면에 사용하기 적합하다. 네이버 NHN Cloud 에서 관리하고 있기 때문에 믿고 써먹을 수 있으며, API 에 대한 예제는 깃허브 ( github ) 에 자세하게 설명되어 있다.
네이버 토스트 UI 홈페이지 제작
웹개발에 필요한 오픈 소스 프로젝트
홈페이지를 만들 때 필요한 것은 UI 이다.
능력이 된다면 하나하나 만들어 보는 것도 좋지만 그럴 시간이 없는 것도 사실이다.
필요한 UI 는 인터넷에 공개되어 있는 것을 사용하는 것이 좋을 수 있다.
무료로 사용할 수 있는 웹용 UI는 많지만 그 중 토스트 UI ( toast UI ) 가 있다.
우리가 잘 알고 있는네이버의 NHN Cloud 에서 개발하고 배포하고 있는 자바스크립트 기반 UI 라이브러리이다.
무료 오픈 소스 프로젝트
토스트 UI ( Toast UI ) 는 NHN 에서 지속적으로 관리되는 무료 오픈 소스 프로젝트로 자바스크립트 라이브러리 ( Javascript Library ) 이다.
5개의 소형 어플리케이션과 10개의 콤포넌트를 제공한다.
자세하고 상세한 소스 코드는 github 를 통해 제공한다.
이런 자바스크립트 기반의 UI 를 사용하는 것은 여러가지 이유가 있겠지만 이미 만들어진 콤포넌트를 사용하여 개발시간을 단축하는데 있다.
TOAST UI :: Make Your Web Delicious!
TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud.
ui.toast.com
5가지 애플리케이션 / Applications
토스트 UI ( Toast UI ) 에서 제공하는 소형 애플리케이션은 5가지이다.
업무용 웹을 개발할 때 자주 사용하는 것들 위주로 구성되어 있다.
아마도 이러한 UI 는 글쓰기를 위한 에디터와 데이터의 집합적인 관계를 보기 위한 차트와 목록 등이 대표적일 것이다.
굳이 토스트 UI 가 아니더라도 홈페이지를 위한 거의 모든 웹개발 자바스크립트 라이브러리 ( Javascript Library ) 는 이런 5가지가 기본적으로 제공된다.
나머지 기능들은 부수적으로 사용되고 사용이 되거나 그렇지 않은 경우들도 많다.
아래는 토스트 UI 에서 제공하는 5가지 자바스크립트 UI 애플리케이션이다.
- 차트 / Chart
데이터의 관계를 선이나 바 혹은 원 형태인 도표를 꾸며서 보여준다. - 그리드 / Grid
입력한 데이터를 목록으로 보여주고, 추가, 수정, 삭제 등이 가능하도록 한다. - 에디터 / Editor
업무용이던 홈페이지던 글쓰기를 위한 에디터로 기본적인 구성에 충실하게 되어 있다. - 달력 / Calendar
일정표와 스케줄을 작성하기 위한 달력으로 추가, 수정, 삭제가 가능하다. - 이미지 에디터 / image editor
웹에서 직접 이미지를 올리고 수정하고 저장할 수 있도록 한다.
10가지 콤포넌트 / Components
콤포넌트는 웹페이지에서 동작하는 부분적인 기능들이다.
토스트 UI ( Toast UI ) 는 10가지 콤포넌트를 제공하여 개발 편의성도 제공하고 있는데 위의 5가지 애플리케이션 으로 보기에는 기능이 아주 작다.
다만, 아주 작은 기능이지만 자주 사용되기도 하고, 개발시 필요한 귀찮은 것들을 만들어 제공해 주고 있다.
- 앱 로더 / App Loader
모바일 전용, 모바일 장치 또는 기기에서 특정 앱을 로드하거나 설치할 때 사용한다. - 자동 완성 / Auto Complete
입력된 텍스트에 대해 추가되는 문장이나 단어를 추가로 보여준다.
네이버에서 검색시 단어를 칠 때마다 나타나는 문장들을 구성해 준다. - 색상 선택 / Color Picker
색상 팔레트가 나타나 색깔을 지정할 수 있도록 한다. - 컨텍스트 메뉴 / Context Menu
마우스 오른쪽 버튼을 눌렀을 때 나타나는 메뉴를 만든다. - 날짜 선택 / Date Picker
입력란에서 달력을 보여주어 날짜를 선택할 수 있도록 한다. - 페이징 / Pagination
목록이 많을 경우 페이징을 할 수 있도록 번호를 나열한다. - 굴리기 / Rolling
여러개의 동일한 요소를 슬라이딩처럼 표현한다. - 선택 박스 / Select Box
여러가지 항목을 선택할 수 있도록 한다. - 시간 선택 / Time Picker
시간 표현을 구성할 때 사용자가 쉽게 표현할 수 있도록 한다. - 트리 / Tree
메뉴나 데이터 등 계층구조로 표현이 필요할 때 사용한다.
'programming > TroubleShootInG' 카테고리의 다른 글
| TOAST UI Editor / 토스트 ui 에디터 html 가져오기 getHTML 메서드 사용하기 (0) | 2022.11.28 |
|---|---|
| TOAST UI / 토스트 ui 에디터 붙이기 네이버 CDN 사용 (0) | 2022.11.27 |
| 자바스크립트 문자열 복사 하기 javascript clipboard (0) | 2022.11.25 |
| window.load document.ready 차이와 사용 객체 (0) | 2022.11.24 |
| html5 css3 홈페이지 메인 콘텐츠 목록 만들기 (0) | 2022.11.23 |
댓글