Damon Cho
기획자 데이먼
Damon Cho
전체 방문자
1,363,680
오늘
14
어제
792
  • 전체 글 (135)
    • 제품 관리 (80)
      • PO, PM, 기획자 (27)
      • 비즈니스 분석 (14)
      • 서비스 기획 (26)
      • 마케팅 & 운영 & 팁 (7)
      • 여행 & 숙박 플랫폼 (6)
    • 프로토타입 툴 Axure (48)
      • 기초강좌 (14)
      • 프로토타입 샘플 (13)
      • 해외 라이브러리 (11)
      • 기타 (10)
    • 외부 아티클 (7)
      • PM, 제품 관리 (3)
      • 소프트스킬 (1)
      • 트렌드 (1)
      • 케이스 스터디 (2)
      • OTT 관련 (0)

블로그 메뉴

  • 🔗 PM/기획자 가이드 모음
  • 🔗 Axure 온라인 클래스
  • 🔗 웹/모바일 기획자 그룹
  • 문의 & 답변

인기 글

  • [웹/앱 설계의 기본] 화면설계⋯
    2020.09.08
    [웹/앱 설계의 기본] 화면설계⋯
  • 당신은 대체 불가능한 기획자인⋯
    2019.12.01
    당신은 대체 불가능한 기획자인⋯
  • 프로덕트 매니저의 툴, UI 디자⋯
    2020.09.01
    프로덕트 매니저의 툴, UI 디자⋯

최근 댓글

  • 많은 도움이 되었습니다. 감사⋯
    익명
  • 공부하는데 많은 도움이 되었습⋯
    제갈 PM
  • 오랜만이네요. Adobe XD공부하⋯
    김진남

최근 글

  • 네이티브 앱으로 제작할까? 크⋯
    2022.06.10
    네이티브 앱으로 제작할까? 크⋯
  • 리텐션을 고민할 때 생각해봐야⋯
    2022.03.27
  • 토스, 만보기 서비스 분석 글
    2022.03.22
글쓰기 · 관리자
hELLO · Designed By 정상우.
Damon Cho

기획자 데이먼

[Axure 강좌] Sticky 메뉴 만들기
프로토타입 툴 Axure/기초강좌

[Axure 강좌] Sticky 메뉴 만들기

2016. 9. 5. 13:33

Axure로 "스티키 메뉴" 제작하는 방법에 대한 문의가 있어 관련 내용 공유드립니다.

  • 샘플 사이트 : 하나투어 쿠폰존
  • 인터랙션 확인방법 : 사이트 접속 후 아래로 스크롤하면 빨간색 메뉴가 상단에 고정되고, 위로 스크롤하면 고정 메뉴가 해제됩니다.


Axure Prototype

Axure로 스티키 메뉴를 제작하는 기본 원리는 상단 고정 메뉴를 다이너믹 패널로 만들어서 Hidden 처리했다가, 브라우저가 기준 좌표 이상 스크롤 되었을때 Show하는 방식입니다.

  • 제작시간 : 10분
  • Preview : http://qbpyne.axshare.com/home.html


제작방법

#1. UI 그리기

하나투어 쿠폰존 사이트를 참고하여 기본 UI를 그립니다.


#2. Sticky 메뉴 제작

  1. 메뉴 영역을 [복사] [붙여넣기]로 하나 더 만들고, 새로 만든 메뉴를 다이너믹 패널로 변환합니다.
  2. 새로 만든 다이너믹 패널의 이름을 '스티키 메뉴'로 지정하고, 좌표(0,0) 위치로 이동시킵니다.
  3. 다이너믹 패널이 브라우저 상단에 고정될 수 있도록 Pin To Browser 옵션을 체크합니다.
  4. 스크롤이 발생하기 전에는 다이너믹 패널이 보이지 않도록 Hidden 체크합니다.


#3. 윈도우 스크롤 인터랙션 적용

  1. 위에서 Hidden 체크한 '스티키 메뉴'가 Show 되는 Y좌표의 위치 값을 계산합니다.
  2. OnWindowScroll 인터랙션의 조건을 설정합니다.
    - if "[[Window.scrollY]]" is greater than or equals "512" Show 스티키 메뉴
    - Else If True Hide 스티키 메뉴


#4. 페이지와 스티키 메뉴 센터 정렬하기

  1. 페이지의 빈화면 클릭 후 스타일 탭에서 Page Alignment > Align Center 아이콘 클릭
  2. '스티키 메뉴' 클릭 후 Pint To Broswer 옵션에서 Horizontal Pin을 Center로 선택

Axure 공식 강좌 수강생은 페이스북 그룹을 통해 상세설명이 포함 된 동영상과 완료 파일을 다운받으실 수 있습니다.


강좌
2016년 Axure 강좌일정 및 공식 커리큘럼 안내
소개
IT 기획 연구소 운영자 소개
반응형
    '프로토타입 툴 Axure/기초강좌' 카테고리의 다른 글
    • [Axure] Repeater로 29CM 브랜드 페이지 만들기
    • [Axure] Dynamic Panel로 상단/하단 고정 메뉴 만들기
    • [Axure 강좌] Admin 내비게이션 만들기
    • [Axure 강좌] 유튜브 동영상 embed 하기!
    AXURE, axure sticky, axure 강좌, axure 스티키, 액슈어 스티키 메뉴
    Damon Cho
    Damon Cho
    제품 관리자(PO, PM, 기획자)로 일하며 경험한 것들을 정리하고 공유합니다.
    댓글쓰기
    1. 이수민
      2016.09.06 19:38
      axure 공부하는데 많은 도움이 됩니다. 감사합니다!
      수정/삭제댓글쓰기댓글보기
      1. Damon Cho
        2016.09.06 22:46 신고
        댓글 감사합니다. 앞으로도 종종 포스팅하겠습니다. ^^
        수정/삭제
    2. 초보자
      2016.09.12 14:26
      2.OnWindowScroll 인터랙션에 조건을 넣는 방법을 모르겠군요..
      page interactions에서 더블클릭하고 들어가면 직접 입력하는 에디터가 나오지 않는데요 ^^
      수정/삭제댓글쓰기댓글보기
      1. Damon Cho
        2016.09.12 14:30 신고
        모바일이라 간단히 답변 드립니다. 직접 입력하는 조건은 인터랙션 우측 상단에 edit 버튼이 있는데요. 해당 버튼을 클릭하면 직접 조건을 설정하실 수 있습니다. ^^

        -

        다시 확인해보니 edit 버튼이 아니고, Add Condition 버튼입니다.
        수정/삭제
    3. 기획꿈나무
      2016.09.23 09:41
      한글로 된 참고서적이 있을까요?
      수정/삭제댓글쓰기댓글보기
      1. Damon Cho
        2016.09.23 09:46 신고
        꿈나무님 안녕하세요.

        한글로 된 참고서적은 출간되지 않았습니다. 대신, 아래 사이트 접속해서 Axure로 검색해보시면 영어로 된 Ebook을 다운로드 받으실 수 있습니다. ^^

        http://it-ebooks.info/
        수정/삭제
    4. 익명
      2016.09.28 14:56
      비밀댓글입니다
      수정/삭제댓글쓰기댓글보기
      1. 익명
        2016.09.30 10:35
        비밀댓글입니다
        수정/삭제
    5. 제이
      2018.06.22 13:43
      안녕하세요. 툴 구입하여 연습중인데요...도움이 필요합니다.
      "2.OnWindowScroll 인터랙션의 조건을 설정합니다."에서 다른 것은 입력했는데요.
      "Show 스티키 메뉴"를 입력하는 방법을 모르겠습니다.
      도와주세요. ^^
      수정/삭제댓글쓰기댓글보기
      1. 제이
        2018.06.22 13:46
        앗. 찾았습니다.
        감사합니다.
        수정/삭제
    6. 김성식
      2020.03.18 19:14
      19기 이후로 강좌 개설이 미정이신것 같은데 혹시 20년도에 강좌 진행 예정이신가요?
      수정/삭제댓글쓰기댓글보기
      1. Damon Cho
        2020.03.29 09:39 신고
        안녕하세요. 2020년 강의 일정은 아래 링크에서 확인하실 수 있습니다.

        https://bit.ly/2UMymZR
        수정/삭제
    다음 글
    Bureau UI Kit (모바일 커머스 템플릿)
    이전 글
    [Axure 강좌] Admin 내비게이션 만들기
    • 이전
    • 1
    • ···
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • ···
    • 135
    • 다음

    티스토리툴바