프로토타입 툴 Axure/기초강좌
-
PPT, Sketch, XD, Figma vs Axure RP프로토타입 툴 Axure/기초강좌 2020. 9. 10. 09:23
화면설계 툴 PPT와 UI 디자인 툴 3종 Sketch, Adobe XD, Figma와 비교했을때 Axure가 어떤 특장점을 가지고 있는지 영상으로 소개합니다. Axure에서는 실제 서비스와 동일하게 작동하는 ①UI를 빠르게 그릴 수 있고 ②디스크립션도 작성 가능하며 ③코딩을 몰라도 누구나 쉽게 인터랙션을 구현할 수 있습니다. 더불어 ④반응형웹부터 ⑤가상 데이터베이스 연동까지! 프로토타이핑 툴의 끝판왕이라고 볼 수 있는 Axure를 만나보세요! 영상 바로가기
-
[Axure 강좌] Sticky 메뉴 만들기프로토타입 툴 Axure/기초강좌 2016. 9. 5. 13:33
Axure로 "스티키 메뉴" 제작하는 방법에 대한 문의가 있어 관련 내용 공유드립니다.샘플 사이트 : 하나투어 쿠폰존인터랙션 확인방법 : 사이트 접속 후 아래로 스크롤하면 빨간색 메뉴가 상단에 고정되고, 위로 스크롤하면 고정 메뉴가 해제됩니다. Axure Prototype Axure로 스티키 메뉴를 제작하는 기본 원리는 상단 고정 메뉴를 다이너믹 패널로 만들어서 Hidden 처리했다가, 브라우저가 기준 좌표 이상 스크롤 되었을때 Show하는 방식입니다.제작시간 : 10분 Preview : http://qbpyne.axshare.com/home.html 제작방법 #1. UI 그리기 하나투어 쿠폰존 사이트를 참고하여 기본 UI를 그립니다. #2. Sticky 메뉴 제작메뉴 영역을 [복사] [붙여넣기]로 하나..
-
[Axure 강좌] Admin 내비게이션 만들기프로토타입 툴 Axure/기초강좌 2016. 8. 30. 11:12
안녕하세요. 조영수입니다. AXURE 강좌를 진행하던 중 Admin 내비게이션 제작 부분이 헷갈린다는 의견이 있어 제작 방법을 공유드립니다. Admin 샘플 :: 위사(WISA) Admin 샘플은 쇼핑몰 전문 제작회사 위사의 관리자 화면으로 선정했습니다. 선정 이유는 타사 솔루션 대비 디자인이 깔끔해서! ^^ 위사(http://www.wisa.co.kr) 접속 후 화면 중앙의, [관리자 모드 체험하기 > PC 버튼]을 클릭하면 WISA의 Admin 화면을 체험하실 수 있습니다. Axure Prototype AXURE로 위사 Admin의 상단 내비게이션 영역을 제작해봤습니다. 상단 GNB의 설정/상품관리/주문배송/고객CRM 버튼을 클릭하면 메뉴 이동을 확인할 수 있습니다.제작시간 : 10분Preview :..
-
[Axure 강좌] 유튜브 동영상 embed 하기!프로토타입 툴 Axure/기초강좌 2016. 1. 26. 18:54
Axure에 동영상 embed 하는 방법을 살펴보겠습니다. 유튜브, 비메오에 등록 된 동영상 모두 embed 가능하며, 국내 서비스는 테스트 해보진 않았지만 동일한 방식으로 구현 가능할 것으로 생각됩니다. 프로토타입 미리보기 : http://8fo2kn.axshare.com/#c=2 Step 1. 인라인 프레임 위젯 드래그 Axure 실행 후 좌측의 위젯 모음에서 인라인 프레임 위젯을 드래그해 적당한 사이즈로 조절합니다. Step 2. 동영상 사이트(유튜브)에서 iframe 링크 가져오기 유튜브(https://www.youtube.com)에서 원하는 동영상 선택 후 다음 순서에 따라 링크를 복사합니다. 공유 버튼을 클릭합니다.소스 코드를 클릭합니다.박스 안의 iframe URL을 모두 복사합니다.Step..
-
[Axure 강좌] 구글 지도 연동하기!프로토타입 툴 Axure/기초강좌 2016. 1. 23. 11:39
Axure에 구글 지도 연동하는 방법을 살펴보겠습니다. 구글 지도 연동 시 프로토타입에서도 구글 지도의 확대,축소,이동 등 모든 기능을 동일하게 사용할 수 있습니다.프로토타입 미리보기 : http://cijydn.axshare.com/#c=2 Step 1. 인라인 프레임 위젯 드래그 Axure 실행 후 좌측의 위젯 모음에서 인라인 프레임 위젯을 드래그해 적당한 사이즈로 조절합니다. Step 2. 구글 지도에서 iframe 링크 가져오기 웹 브라우저에서 구글 맵(https://www.google.co.kr/maps) 접속 후 다음 순서에 따라 링크를 복사합니다. 지도의 중심 위치를 검색합니다. (ex. 한라산)공유 버튼을 클릭합니다.지도 퍼가기 탭을 클릭합니다.박스 안의 iframe URL을 모두 복사합니..
-
Axure 기초강좌 - Style 판넬프로토타입 툴 Axure/기초강좌 2015. 9. 25. 17:01
Axure에서는 Style 판넬을 이용해 온라인에서 사용되는 내비게이션, 텍스트, 버튼 등 모든 요소를 동일하게 구현할 수 있습니다. 아래 다운로드 버튼을 예시로 어떤 스타일이 적용되었으며 각각 어떤 기능을 담당하는지 살펴보겠습니다. 1. 위치 및 크기 설정 : 위젯의 위치(X,Y)와 크기(W,H]를 설정할 수 있습니다. W와 H 사이의 [ ]를 클릭하면 위젯이 동일 비율로 커지거나 작아집니다. 2. Hidden : 위젯이 화면에서 안보이도록 숨김처리 합니다.3. 스타일 서식 : 미리 지정해놓은 스타일 서식을 적용합니다.4. 채우기 : 위젯의 채우기 색상을 선택합니다. 전체를 단색으로 채우거나 그라디언트 효과를 적용 할 수 있습니다.5. 그림자 : 위젯의 그림자를 설정합니다. 바깥 그림자, 내부 그림자 ..
-
Axure 기초강좌 - 마우스 오버, 마우스 이탈, 위젯 선택 시 스타일 적용 방법프로토타입 툴 Axure/기초강좌 2015. 9. 18. 17:54
Axure 프로토타이핑의 최대 장점은 인터랙션을 시각화해서 보여줄 수 있다는 점입니다. 이번 챕터에서는 특정 위치에 마우스 오버, 마우스 이탈, 위젯이 선택 되었을 때의 스타일 지정 방법을 살펴보겠습니다. 1. 마우스오버, 마우스다운, 셀렉트, 비활성화 인터랙션별 스타일을 지정할 수 있습니다. 2. [위젯 우클릭] - [인터랙션 스타일] 클릭 시 인터랙션 스타일 팝업이 뜹니다. 3, [위젯 선택] - [Inspector/Properties] 판넬에서 원하는 인터랙션 스타일을 클릭하면 팝업이 뜹니다. 강좌 2016년 Axure 강좌일정 및 공식 커리큘럼 안내 소개 IT 기획 연구소 운영자 소개
-
Axure 기초강좌 - 위젯 모양 변경방법프로토타입 툴 Axure/기초강좌 2015. 9. 17. 18:44
이번에는 Axure 도형 활용방법을 살펴보겠습니다. 먼저 사용 할 위젯을 드래그해 와이어프레임에 올려놓습니다. 위젯 모양 변경 1. 위젯을 선택하면 우측 상단에 동그란 아이콘이 보여집니다. 아이콘을 클릭하면 다른 도형으로 변경할 수 있습니다. 2. 위젯을 선택하고 우측 Inspector Pane의 Properties를 클릭하면 하단에 Select Shape 옵션이 있습니다. 우측의 셀렉트 박스를 클릭하면 다른 도형으로 변경할 수 있습니다. 코너 라운드 처리 1. 위젯을 선택하면 좌측 상단에 노란색 역삼각형 아이콘이 보여집니다. 아이콘을 좌우로 드래그해서 라운드 크기를 조절할 수 있습니다. 2. 위젯을 선택하고 우측 Inspector Pane의 Style을 선택하면 하단에 Corner Radius 옵션이 ..