스프링으로 웹페이지 만들기 - 6. 카카오오븐 사용하여 UI UX 정의하기

- 부트스트랩 무료 템플릿 사용하기 (이전 포스팅 참고)

https://biesil.tistory.com/9

스프링으로 웹페이지 만들기 - 5. 부트스트랩 무료템플릿 사용하기

 

저번 포스팅에선 부트스트랩 무료 템플릿을 내 프로젝트에 적용하였다.

마냥 템플릿을 그대로 사용하기엔 방향성이 잘 잡히지 않아 UI/UX 에 대한 정의를 카카오오븐을 통해 구성하겠다.

 

 

-카카오오븐이란?

 

카카오에서 제공하는 연구실 프로젝트라고 Oven에서 정의하며,

HTML5 기반 무료 웹/앱 프로토타이핑 툴이라고 한다.

프로토타이핑이라는 목적에만 맞다면 용도에 관계없이 자유롭게 사용할 수 있다고 한다.

 

-프로토타이핑이란?

나무위키 검색결과를 인용하자면

프로토타입(prototype)은 원래 형태, 기초 또는 표준이라고 정의하며,

시제품이 나오기 전 제품의 원형으로 개발검증, 양산검증 등 정보시스템의 미완성 버전 또는 중요한 기능들이 포함되어 있는 시스템 초기모델이다. 

클라이언트의 요구사항이 정확하게 반영될 때까지 계속해서 개선/보완 된다.

 

 

 

즉 이와 같이 프로토타입(기초모델)으로 요구사항을 정의하고, 이를 토대로 시제품을 만든다라고 이해하면 될 것 같다.

나의 프로젝트의 프로토타입을 구체적으로 표현하기위해 카카오 오븐을 사용할 예정이다.

 

 

먼저 아래 URL을 통해 oven 으로 가보자

 

https://ovenapp.io/

OvenApp.io

 

 

 

 

카카오오븐 대쉬보드

 

들어가서 회원가입 및 로그인을 간략히 끝낸 후 대쉬보드를 확인하면 현재 아무 프로젝트가 없는걸 확인할 수 있다.

오른쪽 상단의 새로운 프로젝트 만들기 버튼을 통해 프로젝트를 등록해보자.

 

 

-새로운 프로젝트 만들기

 

앱, 태블릿 해상도가 아닌 PC 전용 웹 프로젝트이므로 맨아래 1200px 로 선택하고

아직 남이 보기엔 내가 구상한 UI/UX 가 쑥스러우니 특정사용자에게만 허용으로 만들어 놓자

(물론 찾아보는사람은 없겠지만...)

이렇게 새로운 프로젝트를 만들면!

 

 

이런식으로 프로젝트가 추가된다.

프로젝트 내 빈화면일때 캡처를 깜빡하여 작업 후에 찍어 현재 어느정도 UI 가 타이틀로 보이고 있다.

 

일단! 프로젝트를 클릭하여 들어가면 흰 여백으로 빈페이지가 나올텐데!

나는 이전 포스팅에서 부트스트랩 템플릿을 받아 적용하였으니 머리를 쓸 필요가 없다~!

 

 

부트스트랩 템플릿

 

내 프로젝트에 적용된 이화면으로 내가 원하는 방향으로 한번 정의해보겠다.

 

그전에 카카오 오븐의 기능들을 살펴보자면!

 

-카카오오븐 기능

 

 

텍스트, 헤더, 링크, 버튼, 페이징등 많은 요소 카테고리가 있고,

 

 

 

웹, 앱의 필수 적으로 사용되는 아이콘들을 적용할 수 있다.

 

 

 

그리고 오븐내에서 찾기 힘든 요소나 아이콘은 이미지를 별도로 다운받아 업로드하면 자체 저장이 되기 때문에

간편하게 이미지를 넣어 사용할 수 도 있다.

 

 

오른쪽 사이드바에서 해당 기능들을 드래그 하여 모두 사용하여 적용할 수 있고 이런식으로 필요한 요소를 집어넣어 적용하다보면 얼추 그럴싸한 UI가 만들어진다.

 

 

-UI만들기

 

각 그래프 및 테이블의 사용 용도를 정하고 왼쪽 사이드바엔 아직 뭘 넣을지 고민이라 대,중,소분류 로만 나누어 보았다.

크게 번호뽑기, 번호분석, 회원정보수정 등.. 기본적인 카테고리가 올 것 같은데 좀 더 고민해봐야겠다.

 

그리고 카카오 오븐에선 템플릿 옵션이라는 것이 있는데

 

빈화면에서 템플릿 붙여넣기를 하면

 

 

내가 만든 틀이 자동으로 설정하지 않아도 이렇게 편하게 그려준다.

하지만 난 맨위쪽 헤더가 또 따로 있으니 나는 이방법 말고 그룹핑을 하여 복붙을 하였다.

 

 

왼쪽사이드바 + 헤더 를 일괄선택하여 우클릭 후 그룹을 눌러주면 

 

 

이렇게 그룹이 만들어진다.

이 영역중 아무곳이나 클릭하여 복사 후 붙여넣기하면!

 

 

깔끔하게 복붙이 되는걸 볼 수 있다!

 

그리고 각 영역, 이미지, 아이콘 등 요소들의 순서를 정할 수 있으니 드래그로 하단으로 내릴 시 덮어지는 이미지를 표현할 수 있어 좀 더 생동감 있게 표현이 가능하다.

 

 

다음포스팅에선 상단의 사진속 4개의 버튼을 누르면 어떻게 반응을 할건지에 대한 UI/UX 기능을 정의해보겠다.

오븐 내에서 정의한 링크를 클릭하여 외부URL 혹은 내가 만든 페이지로 이동할 수 있는 기능이 있다.

그래서 4개의 버튼에 대한 이벤트를 호출하면 특정 화면이 나와 여기선 무얼 할것이다~ 라고 표현이 가능하다.

 

이렇게 카카오오븐 사용법을 간략히 포스팅 해보았다.

다음번엔 좀더.. 구체적이고 심화적인 화면 구성으로 가보겠다.. 

나같은 백엔드 개발자가 어설프게 html, css 로 뭘 해보겠다 하며 여백에서부터 디자인 까지 하려면 정~말 머리도 아프고 이쁘게 나오지 않을거 같은데 (물론 잘하시는분들도 많으시겠지만!) 이런 카카오 오븐 툴 및 부트스트랩 템플릿을 사용하면 고민없이 이쁜 페이지를 만들 수 있으니 참고 하길 바란다!