prototype
-
[웹 기획] 화면 설계 용어 - 와이어프레임, 스토리보드, 프로토타입의 차이점제품 관리/서비스 기획 2016. 1. 6. 18:03
📌 이 글은 벌써 4년도 넘은 글인데요. 2020년 9월 기준으로 최신 내용을 업데이트 했습니다. 아래 링크를 클릭해주세요! [웹/앱 설계의 기본] 화면설계서 작성방법 프로덕트 매니저의 툴, UI 디자이너의 툴 건축물을 짓기 위해서는 구체적인 설계도면이 필요하듯이 웹사이트 또는 모바일 앱 서비스를 제작하기 위해서도 설계도면이 필요합니다. IT 현장에서는 이를 화면 설계라 지칭하며 와이어프레임, 스토리보드, 프로토타입으로 구분하고 있습니다. 국내에서는 파워포인트로 제작한 스토리보드가 표준 설계 방법으로 사용되고 있지만, 보다 원활한 커뮤니케이션을 위해 점차 다양한 툴로 확장되고 있습니다. 알듯 말듯 조금은 헷갈리는 각 용어들이 어떠한 차이가 있는지 살펴보겠습니다. 와이어프레임(Wireframe) 와이어프레..
-
Axure 프로토타이핑 #5. 반응형 웹프로토타입 툴 Axure/프로토타입 샘플 2015. 9. 5. 11:24
다섯번째 샘플. 반응형 웹 프로토타입을 구현해봤습니다. 최근에 오픈한 SK c&c 웹사이트를 프로토타입 형태로 작업했습니다. 웹 브라우저의 가로 사이즈(Width)를 확대 및 축소하면 브라우저 사이즈에 따라 웹사이트, 태블릿, 모바일 UI가 보여지고 좌측 메뉴의 모바일 화면, 태블릿 화면을 클릭하면 각 디바이스별 구동화면을 미리 볼 수 있습니다. SK c&c 사이트를 먼저 보시고 프로토타입을 보시면 좋을 것 같습니다. Axure 프로토타이핑 #5. 반응형 웹 샘플보기(클릭) 모바일에서 보시는 분은 여기를 클릭해주세요 (아이폰에 최적화되어 있습니다.) 기존에 구현 된 사이트를 본뜨는 작업이라 구현까지 약 반나절 정도 소요되었습니다. 사실, 서비스를 구상하는 기획 과정이 어렵지 화면은 누구나 금방 그려낼 수..
-
Axure 프로토타이핑 #3. 동적 그래프프로토타입 툴 Axure/프로토타입 샘플 2015. 9. 5. 11:22
세번째 샘플. 동적 그래프 프로토타입을 구현해봤습니다. 그래프가 동적으로 로딩되고, 정렬 옵션을 이용해 오름차순/내림차순 정렬이 가능하며, 막대그래프 클릭 시 툴팁을 보여줍니다. Axure 프로토타이핑 #3. 동적 그래프 샘플보기(클릭) 동적 그래프 화면 구성은 쉽고 빠르게 할 수 있지만 동적인 효과를 넣기 위해 기본적인 개발지식이 필요합니다. 엑셀의 매크로와 같은 개념으로 생각하면 되구요. Axure 프로토타이핑에서는 최고 난이도 작업이라고 볼 수 있습니다. 이전에 만들었던 소스를 활용하여 구현까지 약 1시간 소요되었습니다. 샘플 #1 모바일 인터랙션 샘플 #2 백오피스 프레임 및 기본 게시판 샘플 #4 워치 앱과 계산기 샘플 #5 반응형 웹 강좌 2016년 Axure 강좌일정 및 공식 커리큘럼 안내 ..
-
Axure 프로토타이핑 #1. 모바일 인터랙션프로토타입 툴 Axure/프로토타입 샘플 2015. 9. 5. 11:10
안녕하세요. 기획자 조영수입니다. 서비스를 기획할 때 PPT에서 벗어나 프로토타입 툴을 사용해보고 싶은 적 없으셨나요? 사용하고 싶다고 해도 업무협업, 효율성 등의 이유로 현업에 도입하기가 쉽지 않으셨을 겁니다. 또한 시중에 수많은 프로토타입 툴이 나와있어 어떤 툴을 사용할 지 결정하기 어렵죠. 저 또한 Axure, balsamiq mockups, Flinto, Framer, Indigo Studio, Invision, Marvelapp, Mockups, Proto.io, Pencil, Pixate, pop, Oven.io, Origami, UXPin, 프로토나우 등 대부분의 툴을 사용해봤는데 툴 마다 장단점이 명확해서 어떤 툴이 좋다라고 설명하기 어렵더라구요. 저는 위의 툴 중 Axure를 5년간 사용..