IT 기획 연구소

[Axure 강좌] Sticky 메뉴 만들기

Axure로 "스티키 메뉴" 제작하는 방법에 대한 문의가 있어 관련 내용 공유드립니다.샘플 사이트 : 하나투어 쿠폰존인터랙션 확인방법 : 사이트 접속 후 아래로 스크롤하면 빨간색 메뉴가 상단에 고정되고, 위로 스크롤하면 고정 메뉴가 해제됩니다. Axure Prototype Axure로 스티키 메뉴를 제작하는 기본 원리는 상단 고정 메뉴를 다이너믹 패널로 만들어서 Hidden 처리했다가, 브라우저가 기준 좌표 이상 스크롤 되었을때 Show하는 방식입니다.제작시간 : 10분 Preview : http://qbpyne.axshare.com/home.html 제작방법 #1. UI 그리기 하나투어 쿠폰존 사이트를 참고하여 기본 UI를 그립니다. #2. Sticky 메뉴 제작메뉴 영역을 [복사] [붙여넣기]로 하나..

프로토타입 툴 Axure/기초강좌 2016. 9. 5. 13:33

2016년 1회차 Axure 스터디 후기.

2015년 10월. 동국대 창업지원 강좌를 통해 처음으로 Axure 강좌를 진행하고, 블로그를 통해 문의해주신 분들을 대상으로 2016.02.23(화) ~ 03.15(화)까지 총 4회에 걸쳐 1회차 스터디를 진행했습니다. Axure 스터디에 대해 궁금해하시는 분들을 위해 스터디 후기를 간략히 적어봅니다. 이번에 진행한 1회차 스터디는 현업에서 바로 적용해볼 수 있는 가벼운 사례 중심으로 구성했고, 동종업계 종사자들끼리 새로운 만남을 가지는 친목 중심의 스터디로 운영하는 것을 목표로 했습니다. 스터디에는 총 3분이 참석했고, 2분은 청강자로 방문해주셨습니다. 각 회차별 주제는 다음과 같았습니다.1회차 : Auxre 현업 적용 사례 및 기본 사용법 소개 (모바일 샘플 제작)2회차 : Axure를 이용한 백오..

프로토타입 툴 Axure/기타 2016. 3. 21. 02:38

Axure 프로토타이핑 #9. 스토리보드 샘플 (디스크립션 & 플로우차트)

스토리보드에 빼놓을 수 없는 중요 요소 중 하나가 디스크립션입니다. 기획자는 설계서를 보는 디자이너, 퍼블리셔, 개발자에게 전해야 하는 메세지를 디스크립션에 작성하고 '화면 UI'와 '디스크립션'에 근거하여 소통을 진행하는데요. 프로토타입 툴은 이러한 디스크립션을 작성하기 어렵다는 단점이 있습니다. 그렇다고 방법이 없지는 않겠죠? 보다 나은 소통을 위해 직접 연구하고 개발한 Axure 스토리보드 실무 적용 사례를 공유드립니다. 샘플은 PC 기준으로 제작되었으니, 모바일 접속자는 동영상 링크를 클릭해주세요.PC용 프로토타입 : http://86pzau.axshare.com/모바일용 동영상 링크 : https://www.youtube.com/watch?v=SNvhZNoF3Ms 강좌 2016년 Axure 강좌..

프로토타입 툴 Axure/프로토타입 샘플 2016. 2. 17. 03:55

[Axure 강좌] 유튜브 동영상 embed 하기!

Axure에 동영상 embed 하는 방법을 살펴보겠습니다. 유튜브, 비메오에 등록 된 동영상 모두 embed 가능하며, 국내 서비스는 테스트 해보진 않았지만 동일한 방식으로 구현 가능할 것으로 생각됩니다. 프로토타입 미리보기 : http://8fo2kn.axshare.com/#c=2 Step 1. 인라인 프레임 위젯 드래그 Axure 실행 후 좌측의 위젯 모음에서 인라인 프레임 위젯을 드래그해 적당한 사이즈로 조절합니다. Step 2. 동영상 사이트(유튜브)에서 iframe 링크 가져오기 유튜브(https://www.youtube.com)에서 원하는 동영상 선택 후 다음 순서에 따라 링크를 복사합니다. 공유 버튼을 클릭합니다.소스 코드를 클릭합니다.박스 안의 iframe URL을 모두 복사합니다.Step..

프로토타입 툴 Axure/기초강좌 2016. 1. 26. 18:54

[Axure 강좌] 구글 지도 연동하기!

Axure에 구글 지도 연동하는 방법을 살펴보겠습니다. 구글 지도 연동 시 프로토타입에서도 구글 지도의 확대,축소,이동 등 모든 기능을 동일하게 사용할 수 있습니다.프로토타입 미리보기 : http://cijydn.axshare.com/#c=2 Step 1. 인라인 프레임 위젯 드래그 Axure 실행 후 좌측의 위젯 모음에서 인라인 프레임 위젯을 드래그해 적당한 사이즈로 조절합니다. Step 2. 구글 지도에서 iframe 링크 가져오기 웹 브라우저에서 구글 맵(https://www.google.co.kr/maps) 접속 후 다음 순서에 따라 링크를 복사합니다. 지도의 중심 위치를 검색합니다. (ex. 한라산)공유 버튼을 클릭합니다.지도 퍼가기 탭을 클릭합니다.박스 안의 iframe URL을 모두 복사합니..

프로토타입 툴 Axure/기초강좌 2016. 1. 23. 11:39

동국대 창업지원강좌 (Axure 프로토타이핑)

2015년 10월 16일과 10월 17일. 2일(14시간) 동안 명동 티마크 호텔에서 Axure 강좌를 진행했습니다. 본 강좌는 동국대 창업지원단이 주관하는 실전창업강좌 웹 기획자 과정으로 최준호 강사님이 4주간 웹 기획 이론을 교육하고, 저는 2일간 Axure를 이용해 각자의 아이디어를 설계하는 실습 과정을 담당했습니다. 국내에서 진행하는 Axure 강좌는 최초였지 않았을까 생각되는데요. 20세 대학생부터 50대 어르신까지 큰 어려움 없이 툴을 익혔고 굉장히 만족해하셨습니다. 덕분에 둘째 날은 본인 아이디어를 바탕으로 자신이 생각하는 서비스를 설계해 볼 수 있었고 기대 이상으로 좋은 결과물이 많이 나왔습니다. 이번 강좌를 통해 Axure가 아이디어를 설계하는데 유용한 툴임을 다시 한 번 확인하게 되었고..

프로토타입 툴 Axure/기타 2015. 10. 27. 00:55

Axure 프로토타이핑 #6. 유튜브(youtube) 소스 공유

동국대 창업지원 강좌에서 Axure 개념을 설명하기 위해 유튜브(youtube.com) 메인과 상세 페이지를 제작해봤습니다. 이미 구현 된 사이트를 프로토타이핑 하는 작업이라 작업 난이도는 낮았구요. 아래 이미지처럼 Axure 프로토타이핑 작업을 통해 실제 모습과 흡사하게 화면을 설계 할 수 있습니다. 참고로 유튜브는 2006년 약 1.7조원에 구글에 인수되었습니다. 프로토타입을 미리볼 수 있는 URL과 작업 파일 첨부합니다. 프로토타입 URL : http://daoeyj.axshare.com/#c=2 유튜브 메인화면 유튜브 상세화면 강좌 2016년 Axure 강좌일정 및 공식 커리큘럼 안내 소개 IT 기획 연구소 운영자 소개

프로토타입 툴 Axure/프로토타입 샘플 2015. 10. 22. 01:26

Axure 기초강좌 - Style 판넬

Axure에서는 Style 판넬을 이용해 온라인에서 사용되는 내비게이션, 텍스트, 버튼 등 모든 요소를 동일하게 구현할 수 있습니다. 아래 다운로드 버튼을 예시로 어떤 스타일이 적용되었으며 각각 어떤 기능을 담당하는지 살펴보겠습니다. 1. 위치 및 크기 설정 : 위젯의 위치(X,Y)와 크기(W,H]를 설정할 수 있습니다. W와 H 사이의 [ ]를 클릭하면 위젯이 동일 비율로 커지거나 작아집니다. 2. Hidden : 위젯이 화면에서 안보이도록 숨김처리 합니다.3. 스타일 서식 : 미리 지정해놓은 스타일 서식을 적용합니다.4. 채우기 : 위젯의 채우기 색상을 선택합니다. 전체를 단색으로 채우거나 그라디언트 효과를 적용 할 수 있습니다.5. 그림자 : 위젯의 그림자를 설정합니다. 바깥 그림자, 내부 그림자 ..

프로토타입 툴 Axure/기초강좌 2015. 9. 25. 17:01

Axure 기초강좌 - 마우스 오버, 마우스 이탈, 위젯 선택 시 스타일 적용 방법

Axure 프로토타이핑의 최대 장점은 인터랙션을 시각화해서 보여줄 수 있다는 점입니다. 이번 챕터에서는 특정 위치에 마우스 오버, 마우스 이탈, 위젯이 선택 되었을 때의 스타일 지정 방법을 살펴보겠습니다. 1. 마우스오버, 마우스다운, 셀렉트, 비활성화 인터랙션별 스타일을 지정할 수 있습니다. 2. [위젯 우클릭] - [인터랙션 스타일] 클릭 시 인터랙션 스타일 팝업이 뜹니다. 3, [위젯 선택] - [Inspector/Properties] 판넬에서 원하는 인터랙션 스타일을 클릭하면 팝업이 뜹니다. 강좌 2016년 Axure 강좌일정 및 공식 커리큘럼 안내 소개 IT 기획 연구소 운영자 소개

프로토타입 툴 Axure/기초강좌 2015. 9. 18. 17:54

Axure 기초강좌 - 위젯 모양 변경방법

이번에는 Axure 도형 활용방법을 살펴보겠습니다. 먼저 사용 할 위젯을 드래그해 와이어프레임에 올려놓습니다. 위젯 모양 변경 1. 위젯을 선택하면 우측 상단에 동그란 아이콘이 보여집니다. 아이콘을 클릭하면 다른 도형으로 변경할 수 있습니다. 2. 위젯을 선택하고 우측 Inspector Pane의 Properties를 클릭하면 하단에 Select Shape 옵션이 있습니다. 우측의 셀렉트 박스를 클릭하면 다른 도형으로 변경할 수 있습니다. 코너 라운드 처리 1. 위젯을 선택하면 좌측 상단에 노란색 역삼각형 아이콘이 보여집니다. 아이콘을 좌우로 드래그해서 라운드 크기를 조절할 수 있습니다. 2. 위젯을 선택하고 우측 Inspector Pane의 Style을 선택하면 하단에 Corner Radius 옵션이 ..

프로토타입 툴 Axure/기초강좌 2015. 9. 17. 18:44

Axure 기초강좌 - Widgets Pane 사용방법

Axure 화면설계는 위젯을 와이어프레임에 드래그하는 것부터 시작합니다. 위젯 묶음을 라이브러리라고 부르며 Default 라이브러리로 대부분의 화면을 그릴 수 있습니다. 위젯 사용방법은 간단합니다. 사용할 위젯을 드래그해 와이어프레임 화면에 올려놓고 Style Pane를 이용해 원하는 스타일로 변경합니다. Axure의 Default 라이브러리 외에도 내가 원하는 라이브러리를 직접 만들거나 다른 사용자가 만들어 놓은 라이브러리를 불러와 사용할 수 있습니다. 기능설명 1. 라이브러리 선택. 새 작업인 경우 Default 라이브러리, Flow 라이브러리를 선택할 수 있습니다. 2. 라이브러리 메뉴. 라이브러리를 생성하거나 불러올 수 있습니다 3. 검색. 라이브러리에 포함 된 위젯을 검색할 수 있습니다. 샘플 ..

프로토타입 툴 Axure/기초강좌 2015. 9. 16. 11:49

Axure 기초강좌 - Pages Pane 사이트맵 작성방법

Auxre의 좌측 상단에 위치한 Pages Pane은 사이트 구조를 정의하는 도구입니다. 기능설명 1. 사이트 구조 트리 2. 페이지 추가 3. 폴더 추가 4. 페이지 검색 - 페이지명을 더블클릭하면 네이밍을 수정할 수 있습니다. - 마우스 드래그로 상,하,좌,우 Depth 이동이 가능합니다. - Delete 키로 페이지를 삭제할 수 있습니다.

프로토타입 툴 Axure/기초강좌 2015. 9. 14. 08:03

Axure 화면구성

Axure RP는 Rapid Prototyping의 약자로 빠른 프로토타이핑이라는 의미를 가지고 있습니다. 또한 코딩없이 프로토타입을 제작할 수 있는 툴입니다. IT 현장에서는 서비스가 출시되기까지 많은 시간과 비용이 발생하는데 프로토타입은 단기간에 실제 서비스와 유사한 형태로 구현이 가능하기에 리스크를 최소화 할 수 있고, 실제 작동이 눈에 보이기 때문에 구성원들과의 의사소통이 수월하다는 장점이 있습니다. 현재까지도 대부분의 현장에서 파워포인트를 중심으로 화면을 설계하고 있지만 정적인 화면만으로는 기획 의도를 명확히 전달하기 어렵기 때문에 프로토타이핑에 대한 Needs가 점차 늘고 있는 추세입니다. 시중에 여러 프로토타이핑 툴이 출시되어 있지만 각각의 장/단점이 명확합니다. 저는 Axure를 5년 이상..

프로토타입 툴 Axure/기초강좌 2015. 9. 9. 00:18