프로토타이핑 툴 소개(Figma & 카카오 오븐)

※  프로토타입이란?

- 설계한 서비스의 화면의 순서 또는 플로우대로 연결을 시켜 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 스타일(클릭, 드래그, 스크롤 등)로 이동을 할 것인지 목업으로 보여주는 것(즉, 실제 앱/웹을 사용하는 것 처럼 '작동'하는 것을 뜻함)

• UI 디자인 : 사용자가 실제로 사용하게 될 높은 퀄리티의 디자인 산출물
• 프로토타이핑 : 실제 개발된 것은 아니지만, 사용자 테스트 단계에서 사용자의 피드백을 얻거나 내부 커뮤니케이션을 위해 제작하는 것(피그마와 카카오 오븐을 통해 제작할 수 있다.)

● 피그마란?

- 클라우드 기반의 디자인 툴로 누구나, 시간과 장소에 관계없이, 인터넷과 컴퓨터만 있으면 곧바로 자유롭게 사용할 수 있고 모든 웹 브라우저에서 실핼 가능한 디자인 툴

- 실시간으로 공동작업할 수 있는 협업 기능을 제공한다.

 

( 피그마의 특징 )

• workflow(화살표)를 활용해 기능적인 부분을 명시할 수 있다(전체적인 플로우)
• 누구나 시간과 장소에 관계없이, 인터넷과 컴퓨터만 있으면 곧바로 자유롭게 사용할 수 있는 디자인 툴이다.
• 무료 도구
• 웹 링크로 공유가 가능하다.
• 벡터+비트맵+웹 구조의 툴이다.(고품질 UI 컴포넌트를 원툴로 만들 수 있다./다양한 플러그인을 쉽게 바로 사용할 수 있다.)

- 비트맵 : 픽셀(점)이 모여 이루어진 그림(JPG, PNG)

- 벡터 : 선분과 면으로 이루어진, 수학전 연산에 의해 이루어진 그림(AI, SVG) - 확대해도 깨지지 않는다.

※ 피그마의 '와이어 프레임'

• 정의 : 와이어프레임은 웹사이트의 골격이나 애플리케이션의 사용자 인터페이스(UI) 및 핵심 기능을 나타내는 단순한 선과 도형으로 구성된 다이어그램 또는 다이어그램의 집합, 만들고자 하는 기능이나 작동 방식을 보여주는 청사진/텍스트, 버튼 등 화면에 대한 구성에 대해 정의하고, 화면 간의 플로우를 표현하는 것을 말한다.
• 목적 : 내부 팀원들과의 커뮤니케이션(앱의 기능적인 부분에 대해 커뮤니케이션이 잘 되어있으면 UI단계로 부드럽게 넘어갈 수 있다.)

(실제 피그마 사용 예시)

프로젝트 플로우차트

지뢰찾기 플로우 차트

 

Gantt차트

● 카카오 오븐이란?

- 피그마와 비슷한 온라인 프로토타이핑 툴이며 쉽게 말해 '모형을 제작' 할 수 있다.

('오븐'은 PC나 모바일 콘텐츠의 개발 전인 기획 단계에서 '모형'을 제작하는 데에 도움을 주는 툴이다.)

 

( 카카오 오븐의 특징 )

• 디바이스 기반 : 총 6개의 화면 사이즈 제공 - 실제 디바이스와 기획물 간의 사이즈 문제를 예방할 수 있다.
• 손쉬운 사용법 : 별도의 프로그램 설치가 필요 없는 OVEN은 컴퓨터와 인터넷만 있으면 언제든지 기획물을 제작하고 수정, 공유할 수 있다.
• 기본 제공 컴포넌트 : 간단한 버튼부터 드롭 다운 메뉴, 체크박스, 라디오 버튼, 스위치(좌우), 테이블, 알림팝업, 타이틀, 메시지 등 100여 개의 UI 컴포넌트를 제공
• 방대한 벡터 아이콘 : 무료 아이콘을 찾거나 아이콘을 직접 제작해야 하는 수고를 덜어줄 수 있는 1,200여 개의 오픈 라이선스 벡터 아이콘 팩을 제공한다.
• 간편한 이미지 업로드 및 편집 : 드래그 & 드롭 방식으로 이미지를 쉽게 업로드 할 수 있다.
• 테스트 및 공유 기능 : 웹에서 링크 등의 기능을 실행할 수 있다.(페이지를 제작하는 데에서 그치지 않고 실제 제작이 되어있는 것 처럼 스마트폰 디바이스에서 곧바로 작동시킬 수 있다.)
• 버전 관리 : 프로젝트의 다양한 버전을 관리하고 이전 버전으로 돌아갈 수 있도록 지원한다.
• 플러그인 : 다양한 플러그인을 통해 추가 기능을 확장할 수 있다.
• 공유 및 협업 : 프로젝트를 공동으로 작업할 수 있고, 디자인 및 프로토타입을 다른 팀원과 쉽게 공유할 수 있도록 기능을 제공한다.

※ Hero img란?

- 웹 또는 앱의 첫 화면에 배치되는 큰 중요한 이미지, 웹 페이지의 상단에 위치하는 주요 이미지를 가리키는 용어이며 '주제나 내용을 강조' 하거나 '사용자의 주의를 끌기 위해' 사용된다.