Prototype/Axure Deep Dive
-
Responsive WEB - Axure Deep Dive#14Prototype/Axure Deep Dive 2021. 5. 23. 15:14
모바일, 태블릿 기기가 다양해짐에 따라서, 반응형 웹이 꼭 필요하게 되었습니다. 구글 검색 엔진에 노출이 잘 되기 위해서라도 각 사의 홈페이지들을 반응형으로 제작할 필요성이 있는데, 엑슈어에서도 반응형을 구현해보도록 하겠습니다. 일단 엑슈어에서는 기본적으로 적응형 웹을 제공하고 있습니다. 다만, 적응형 웹으로 작업 시 유저가 윈도우 창을 스스로 줄일 때, 설정한 break point에 도달 시, 해당 레이아웃을 바로 변환해서 보여 주기 때문에 매끄럽지 않는 부분이 있습니다. 적응형 웹에 대한 내용을 더 알고 싶으시면: https://ko.wikipedia.org/wiki/%EC%A0%81%EC%9D%91%ED%98%95_%EC%9B%B9_%EB%94%94%EC%9E%90%EC%9D%B8 적응형 웹 디자인..
-
Toast popup - Axure Deep Dive#13Prototype/Axure Deep Dive 2021. 5. 23. 14:28
Toast popup 앱을 사용하다보면, 즐겨찾기 토글 버튼 클릭 시 휴대폰 화면 하단 영역에 토스트 팝업이 생성되는 걸 볼 수 있습니다. 이번 포스트에서는 해당 토스트 팝업을 엑슈어로 구현하는 과정을 진행하고자 합니다. 매우 간단해서, 바로 적용하실 수 있습니다. 1. 다이내믹 패널을 활용해 즐겨찾기 버튼 생성하기 즐겨 찾기 버튼을 다이내믹 패널을 활용해서 디폴트와 셀렉티드 값을 지정해줍니다. 2. 즐겨찾기 버튼에 클릭 이벤트 설정하기 클릭시, 다음과 같이 인터랙션을 설정해 줍니다. 다이내믹 패널을 다음 패널로 설정하는 방법은 여러가지입니다. 간단한 작업에는 다이내믹 패널 자체를 잡고, 다음 패널 스테이트로 넒겨주는 명령과 함께, wrap from last to first 버튼을 클릭하면, 클릭 마다 ..
-
Repeater-Count - Axure Deep Dive#12Prototype/Axure Deep Dive 2021. 5. 23. 14:27
Repeater-Count 리피터를 활용하다보면 행의 전체 갯수를 세리거나, 선택된 행의 갯수를 세려야 할 때가 있습니다. 이때, 기본 인터랙션을 활용하여, 손쉽게 구현이 가능합니다. 리피터에는 다음과 같이 함수를 걸어줍니다. 리피터의 값이 로드될때마다 선택된 데이터가 0이 되게 하려면 맨 아래와 같이 설정해주시면 됩니다. 두번째로 나라에 해당하는 클릭 시 토글을 적용해주고, 셀렉하거나, 언셀렉할때 해당 값이 +1 또는 -1 되게 설정해줍니다. 이렇게 적용하면 다음과 같은 결과를 얻습니다. 프로토타이핑 주소 : https://tajy5v.axshare.com Untitled Document tajy5v.axshare.com
-
Rolling Banner(Auto & Click) - Axure Deep Dive#11Prototype/Axure Deep Dive 2021. 5. 23. 14:23
Rolling Banner(Auto & Click) fire event와 move의 조건문을 활용하여, 자동으로 롤링이 되면서 동시에 클릭도 되는 롤링배너를 만들었습니다. - 구현된 기능은 마지막 탭에 도착하면 롤링은 멈추었습니다. - 자동 롤링 도중에 좌측 탭 클릭 시 해당 부분부터 롤링이 시작됩니다. - 자동 롤링이 끝나면, 탭 이동시에도 롤링이 이뤄지지 않습니다. Tip) 탭부분은 Seletion Groups 과 Selected Style을 지정하면, 간단하게 구현이 가능합니다. 주요 인터랙션은 페이지 로드될때, 한영역이 일정 px 만큼 move 되면 좌측의 탭 부분이 selected 처리 되어야합니다. 이 부분은 다음과 같이 처리할 수 있습니다. 여기서 LVAR1은 숨겨진 테이블 전체 위젯을 말하..
-
Using Repeater02 - Axure Deep Dive#10Prototype/Axure Deep Dive 2021. 5. 23. 14:22
Using repeater 리피터를 사용한 2번째 작업은 많은 웹사이트에서 이미지에 마우스가 진입하면 나타나는 효과를 리피터를 활용하여 작업을 진행하였습니다. 리피터를 활용하면 코딩의 중복을 막는 것 처럼, 여러 위젯에 똑같은 작업을 할 필요가 없다는 점이 큰 매력이라고 할 수 있습니다. 작업전, 해당 예시를 사용하고 있는 웹사이트를 3개정도 파악하였습니다. 1) 네이버 메인, 2) 클래스101 메인, 3) 구글 아트 & 컬쳐 해당 사이트의 이미지에 마우스를 가져다 보시면, 해당 이미지가 미세하게 확대되는 기능이 있습니다. 상당히 많은 사이트에서 사용하는 기능인 만큼 활용도가 높을것으로 생각합니다. 오늘은 간단한 작업이라, 인터랙션 부분이 간소화 되어있습니다! 1) 첫번째 리피터 자체 인터랙션 부분은 다..
-
Using Repeater - Axure Deep Dive#9Prototype/Axure Deep Dive 2021. 5. 23. 14:21
Using repeater 교육업계에서 많이 활용하고 있는 전체 메뉴 LNB를 엑슈어의 리피터 기능을 활용하여 작업을 진행했습니다. 리피터의 기능과 pagename 이라는 기능을 활용하여, 각 페이지 진입 시 해당 버튼이 활성화 되게 만들었습니다. 리피터의 기능이 없다면, 지금과 같이 페이지가 많아 지는 경우, 각 페이지 로드시마다, 해당 위젯이 셀렉트되고, 나머지 위젯은 셀렉이 풀리게끔 작업을 진행해야 하는데, 엄청난 작업 공수가 진행됩니다. 예로, 보여드리면 1) 리피터를 사용하지 않는 경우 2) 리피터 활용시 이렇듯 엑슈어도, 많이 알면 알수록 더욱더 간결하고 효율적으로 작업을 진행할 수 있습니다. 함수에 대해 설명드리면, 리피터를 클릭한 후 아이템 로드 상태에서, 케이스를 나눠줍니다. 첫번째 케이..
-
Password Validation - Axure Deep Dive#8Prototype/Axure Deep Dive 2021. 5. 23. 14:20
Password Validation 회원가입시마다 패스워드 정책이 달라 평소 유저가 사용하던 패스워드를 사용 못한 경험이 있으실겁니다. 이럴 경우 고객은 기존과 다른 비밀번호를 생각하느라 머리가 아픕니다. 각 회사 정책에 맞게 이런 방식의 유효성을 체크하여 UX/UI를 적용한다면 고객이 조금 더 쉽게 비밀번호를 만들고 기억할 수 있지 않을까 생각해서 제작해봣습니다. 비밀번호 재입력에 기존의 유효성 체크 안내 메시지가 있는데, 영상 작업 시 지우지 못하였습니다. 참고바랍니다. 해당 작업을 하면서 가장 고민했던 점이 문자의 정의와 alpha-numeric 에 해당하는 부분이었습니다. 문자의 정의를 살펴보면 네이버에서는 키보드를 눌러서 화면에 나타낼 수 있는 한글, 알파벳, 한자, 숫자, 구두점 따위를 통틀어..
-
Cupang comment input form - Axure Deep Dive #7Prototype/Axure Deep Dive 2021. 5. 23. 14:19
Cupang comments input form 쿠팡은 댓글에 댓가를 지급하지 않음에도, 활발히 상품평을 남겨주는것으로 유명한 이커머스회사입니다. 해당 기능을 담당하신 PO 김성한님의 책 프로덕트 오너에도 관련 내용이 설명되어 있습니다. 저는 해당 UI 기능들을 엑슈어로 구현해보았습니다. 중간에 사진첨부의 기능에서는, 컴퓨터 내부의 파일 업로드 과정이 없습니다. TEXT FILED를 활용해서, 파일 업로드 형식을 가져올 수 있으나 커스텀이 가능하진 않아 과정을 삭제하였습니다. 프로토타이핑 : https://1jjy8w.axshare.com Untitled Document 1jjy8w.axshare.com rp file: