프로토타입 툴 Axure/기초강좌

    PPT, Sketch, XD, Figma vs Axure RP

    화면설계 툴 PPT와 UI 디자인 툴 3종 Sketch, Adobe XD, Figma와 비교했을때 Axure가 어떤 특장점을 가지고 있는지 영상으로 소개합니다. Axure에서는 실제 서비스와 동일하게 작동하는 ①UI를 빠르게 그릴 수 있고 ②디스크립션도 작성 가능하며 ③코딩을 몰라도 누구나 쉽게 인터랙션을 구현할 수 있습니다. 더불어 ④반응형웹부터 ⑤가상 데이터베이스 연동까지! 프로토타이핑 툴의 끝판왕이라고 볼 수 있는 Axure를 만나보세요! 영상 바로가기

    [Axure] Repeater로 29CM 브랜드 페이지 만들기

    Axure를 오랜시간 사용했고, 잘 사용하고 계신 분들 중에서도 Repeater를 활용할 줄 아시는 분들은 많지 않습니다. 다른 툴들과 달리 Repeater는 가상의 데이터베이스를 생성해서 데이터를 생성, 조회, 업데이트, 삭제 할 수 있고 필터, 정렬 등의 기능도 실제 사이트처럼 구현이 가능한데요. 이번 영상에서는 Repeater의 개념과 구동방식을 소개합니다. 영상 바로가기

    [Axure] Dynamic Panel로 상단/하단 고정 메뉴 만들기

    모바일을 기획할 때 상단 타이틀 영역, 하단 내비게이션이 고정되는 경우가 많습니다. 파워포인트에서는 고정 메뉴를 표시하기 위해 상단/하단 고정이라는 디스크립션을 표시해야 하지만 Axure에서는 아주 쉽게 고정 메뉴를 만들 수 있습니다. 고정 메뉴는 스티키 메뉴라고도 불리는데 이를 만들기 위해서는 의 기능을 사용하면 됩니다. 자세한 내용은 영상에서 확인하세요 ^^

    [Axure 강좌] Sticky 메뉴 만들기

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

    [Axure 강좌] Admin 내비게이션 만들기

    안녕하세요. 조영수입니다. AXURE 강좌를 진행하던 중 Admin 내비게이션 제작 부분이 헷갈린다는 의견이 있어 제작 방법을 공유드립니다. Admin 샘플 :: 위사(WISA) Admin 샘플은 쇼핑몰 전문 제작회사 위사의 관리자 화면으로 선정했습니다. 선정 이유는 타사 솔루션 대비 디자인이 깔끔해서! ^^ 위사(http://www.wisa.co.kr) 접속 후 화면 중앙의, [관리자 모드 체험하기 > PC 버튼]을 클릭하면 WISA의 Admin 화면을 체험하실 수 있습니다. Axure Prototype AXURE로 위사 Admin의 상단 내비게이션 영역을 제작해봤습니다. 상단 GNB의 설정/상품관리/주문배송/고객CRM 버튼을 클릭하면 메뉴 이동을 확인할 수 있습니다.제작시간 : 10분Preview :..

    [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 강좌] 구글 지도 연동하기!

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