IT

[OVEN]프로토타이핑 툴 오븐!(beta)

집탱구리 2016. 11. 25. 14:53
반응형

OVEN 프로토타이핑 툴

소개 & 사용 후기






혼자서 사이트를 만들기로 작정한날.
설계부터 막막했다.
회사에서 사용하는 툴은
네이버의 공개소프트웨어인 프로토나우 -> http://dev.naver.com/projects/prtnow
설치 타입이고 여러가지 기능이 많다.

하지만 이것은 설치해야 사용할 수 있고
넘나 복잡한 기능에
디자인이 맘에 안든다.

그래서 찾다찾다 찾은게
카카오에서 제공하는 툴을 찾음!!!!
이름도 쉽다.
오븐  OVEN -> https://ovenapp.io

아직 베타버전이지만 (버그가 좀 있음....)
부트스트랩같은 스타일을 좋아하기 때문에 
부트스트랩을 사용하면 일단 합격
UI도 맘에 든다.

홈페이지 가면 볼 수 있지만

귀찮은 사람들을 위해서

 

                   우리 것이 최고다.                                      N스크린 환경에 최적화 되어있다.     


 

           우리 것은 더 쉽다.                                           우리 것은 더 다양하다.


 

프로젝트에 대한 제한은 없지만 익스는 지원하지 않아.


계정만들기는 쉽다.

이메일로 쉽게 등록하고 쉽게 만들어진다.

가입한 이메일로 인증메일이 온다.

거기서 인증하고 다시 컴백.


로그인 하면 대쉬보드화면이 이렇게 나온다.

뚜둔

스터디 프로젝트를 위해 미리 추가해놓은 것이다.


새프로젝트를 만들어본다.

입력값을 다 넣고

원하는 디스플레이를 선택 할 수 있다.

테스트URL은 실제 웹에서 보여지는 화면을 

그대로 보여주는 팝업URL이다.


추가된 프로젝트를 들어갔을 때 초기 화면이다.

왼쪽부터

썸네일 리스트 - 메인페이지 - 사이드메뉴



첫번째 요소탭

버튼, formcontrol, pagination, table, media, chart등

여러가지 컴포넌트를 제공하고 있다.


두번째 아이콘탭

백터이미지라 크기조절이 쉽다.

소셜, 화살표, 라인타입 등

진짜진짜 많다.


세번째 이미지탭

사진을 업로드해서 바로바로 사용할 수 있다.

저 상태에서 이미지 오른쪽 클릭을 하면

바로 이미지 수정도 가능하다.



마지막 보관함탭

초록색 메인바를 오른쪽 클릭하면

'보내기 - 보관함으로 보내기' 메뉴가 있는데 

그렇게 담긴 요소들은 다른 페이지나 다른 프로젝트에서도 사용가능하다.



텍스트를 추가하면 텍스트도 따로 편집이 가능하다.


상단 메뉴중 재생아이콘이 있는데

'웹테스트' 기능이라고 해서

아래의 팝업창 처럼 실제 웹에서 보이는 그대로를 볼 수 있다.

대신 저장을 꼭 해야 반영된다.

양쪽 화살표로 페이지 이동이 가능하다.




프로젝트 시작한지는 꽤 되었는데

막상 혼자서 UX/UI를 하려니 초큼 버겁기도 하다.

부트스트랩으로 만들 사이트이기도 해서

결과물과 가장 가깝게 프로토타입을 만들어 낼 수 있을것 같다.


깔끔한 UX/UI를 원한다면

한번쯤 사용해봐도 좋을 프로토타이핑 툴이다.

다만 아직 베타버전이라 버그가 종종 있는데

거침없이 문의한다.





반응형

'IT' 카테고리의 다른 글

[유투브]유투브 썸네일 추출하기  (1) 2017.01.16
[구글맵API]구글맵 API사용하기  (0) 2016.12.19
[jQuery]파일용량 계산하기  (0) 2016.12.14
[PHP]배열 키값 재정의  (0) 2016.12.13
[API]차트생성 - Chart.js  (0) 2016.11.25