노동의 별에서 태어난 기획자

나와 동일한 어려움을 겪었던 사람들을 위해, 나도 잊지 않고 기록하기 위해 액슈어 따라하기 시리즈(?)를 적고 있지만 한편 한편 늘어날 수록 설명에 한계를 느낀다..ㅎㅎ 그래도 쓰다보면 글솜씨도 늘기를 바라며. 이번편은 다이나믹패널 인터랙션 심화편! 상세한 로직 세팅하기 (?) Axure 액슈어 따라하기 8. 인터랙션 로직 세팅 이 인터랙션은 다양한 UI 구현에 쓰일 수 있다. 나는 선택에 따른 서로 다른 결과를 보여주는 UI에 가장 많이 쓰는데 오늘은 예시로, 드롭박스 선택항목에 따라 다른 컨텐츠가 보여지는 인터랙션을 그려보자. 1. 라이브러리에서 드롭리스트를 가져온다. 2. 드롭리스트에 n개의 항목을 만든다. 이렇게! 3. 드롭리스트에서 항목 선택 시 보여줄 컨텐츠를 추가한다. 우선 1번에 해당하는 ..

화면 일부 영역에 스크롤 만들기. 예를 들면, 이런 화면들. 화면 전체 스크롤이 아니라, 화면의 일부 영역에만 스크롤이 있다. 아래 구글지도를 보자면 왼쪽은 스크롤 영역이고, 우측은 별도의 지도 영역이다. 기획서에서 이렇게 일부만 스크롤이 적용된 화면을 구현하는 방법을 설명해보겠다. 전체 화면 스크롤의 경우 굳이 스크롤을 구현하지 않아도 되지만 화면 안의 일부 영역에 스크롤이 구현되어야 하는 경우, 그리고 그 영역의 컨텐츠도 보여줘야 할 때 유용하게 사용된다. (물론 해당 영역의 컨텐츠가 크게 중요하지 않거나 별도의 페이지에 설명된 경우, 굳이 스크롤 인터랙션이 필요 없을 수도 있다.) Axure 액슈어 따라하기 7. 영역 내 스크롤 구현하기 1. 좌측 라이브러리에서 Inline Frame을 가져온다. ..

몇 달 째 진행되는 채용. 하지만 아직 단 한명의 기획자도 채용하지 못했다. 사실 일손이 너무 부족한 상황이고 앞으로는 일이 더 많아질 예정이라 정말 급하게 뽑아야 하지만 그럼에도.. 급하게 먹으면 체한다는 말을 되새기며 신중하게 서류검토와 과제검토를 진행 중. 수많은 지원자가 있었지만, 면접까지 진행한 지원자는 단 두 명 뿐. 채용을 진행하며 몇가지 공통적으로 드는 생각을 정리해봤다. 1. 이력서와 자기소개서 정리 오탈자, 포맷 변경으로 인한 레이아웃 뒤틀림, 장황하게 길어져 이해하기 힘든 문장들. 포트폴리오나 경력기술서에 비해 상대적으로 덜 중요하다고 여겨져서 그런지 의외로 이런 기본적인 것들에 신경을 쓰지 않는 지원자들이 굉장히 많다. 특히 조사가 실종된, 또는 틀린 문장을 읽다 보면 내가 회사 입..

기획할 때 어떤 툴을 쓰나요? 첫 회사에서는 무려 일러스트레이터로 기획서를 그렸..다...^^.. 그 회사는 아직도 일러로 기획서를 그리고 있으려나.. 지금 생각해보면 참 돈도, 시간도 아까웠던 작업. 무튼, 일러로 기획을 치던 회사를 거쳐 PPT로 계속 기획을 하다가, 지금 다니는 회사에 입사하고 처음으로 액슈어를 접했다. 액슈어를 처음 사용했을 땐 정말 너-무 어려웠다. 개발알못이 느끼기엔, 약간 개발자 친화적인 인터랙션 설정 방식.. 사실 프로토타이핑 툴이라 조건을 걸어야 하기 때문에 당연한거지만, PPT만 쓰던 나에겐 너무 어려웠던 툴 ㅎㅎ 이제 조금 익숙해지니 세상에 프로토타이핑이 이렇게까지 가능하다고..? 너무 신기해서 자꾸 욕심을 내게 된다. 한창 액슈어에 익숙해졌던 시기엔 인터랙션에 완전히..

액슈어의 필수 기능 다이나믹 패널. 이걸로 라디오버튼도 만들 수 있다. 기본 라이브러리에 라디오버튼과 체크박스가 있긴 하지만 인터랙션까지는 구현이 안되기 때문에 (다중선택이 불가능한 라디오버튼의 인터랙션) 직접 만들어야 정확한 인터랙션 구현이 가능하다. Axure 액슈어 따라하기 6. 라디오버튼 만들기 1. 라디오버튼을 그린다. 라이브러리의 ellipse과 텍스트를 이용해서 원하는 디자인으로 만들어 준다. 2. 만든 라디오버튼을 다이나믹패널화 한다. 3. 다이나믹패널의 state를 on/off 두가지로 생성한다. 위에서 만든 선택된 상태가 on, 미선택된 상태가 off. 아래 화면은 미선택된 상태의 라디오 버튼이다. 때문에 가운데 원을 지워줬다. 4. 다이나믹패널을 close하면 이렇게 라디오버튼이 생긴..

응용하기 좋은 기본 액션 중 하나. 스크롤 이동 액션 주기! 스크롤 이동 즉, 화면 포커스 이동을 쓸 때 유용한 효과. 메인화면에서 버튼을 클릭하면 스크롤이 하단으로 이동되는 웹들을 많이 봤을텐데 그런 액션을 기획서에서도 구현할 수 있다. Axure 액슈어 따라하기 5. 스크롤 이동 액션 1. 메인화면을 그린다. 상단 배너의 'Read more'을 클릭하면, 하단 상세 컨텐츠로 이동하는 액션을 추가할 예정! 2. 'Read more' 텍스트를 선택한 상태로, 우측 인터랙션에서 'Click or Tap'을 선택한다. 3. 액션은 'Scroll to Widget'을 선택. 클릭하면 특정 위젯으로 스크롤한다는 의미겠지? 4. 스크롤 이동할 위젯을 선택한다. 미리 오브젝트명을 설정해놓아야, 인터랙션을 선택할 때..

액슈어는 정말 다양한 인터랙션이 있다. 생각하는것들은 대부분 가능한 정도? (그치만 이게 안된다고..? 싶은것도 분명 있긴 함 ㅎ_ㅎ) 정말 기본적이지만, 모르면 모를 수 있는 기본 텍스트 효과 두가지를 정리해봤다. Axure 액슈어 따라하기 4. 텍스트 인터랙션 1. Hover효과를 줄 텍스트를 입력한다. 2. 텍스트를 선택한 상태로, 우측 인터랙션 창에서 'Style effect' 추가를 선택한다. 리스트에서 원하는 효과 선택! 호버, 선택, disable, 포커스 효과를 줄 수 있는데 호버 효과를 주기 위해서는 'MouseOver Style'을 선택한다. 3. 호버시 어떤 효과를 줄지 선택할 차례. 위젯 스타일 컬러 채우기 폰트컬러 바꾸기 투명도 주기 네가지가 기본으로 나오는데, 다른 스타일을 원한..

액슈어 따라하기 2편. 액슈어 다이나믹패널로 탭 구조 구현하기! https://jxmocha.tistory.com/10 Axure 액슈어 따라하기 2. 탭 구조 만들기 feat.다이나믹패널 1편 마스터 사용하기에 이은 액슈어 따라하기 2편. 액슈어 다이나믹패널로 탭 구조 구현하기! Axure 액슈어 따라하기 2. 다이나믹 패널을 이용해 탭 구조 구현하기 탭 구조를 이해하기 위해 선행되 jxmocha.tistory.com 3편은 탭 구조 만들기 응용편인 하단 컨텐츠 밀어내기(?) 컨텐츠 중간에 탭 구조가 들어갈 경우, 탭 내부 컨텐츠 하단의 공통 컨텐츠(?)들을 모든 다이나믹 패널에 넣어야 하나? 생각이 드는데 그럴 필요 없이, 하단 컨텐츠를 밀어내는 방법이 있다. 내가 써놓고도 무슨말인지 헷갈리지만 하단..

1편 마스터 사용하기에 이은 액슈어 따라하기 2편. 액슈어 다이나믹패널로 탭 구조 구현하기! 내가 가장 유용하게, 많이 사용하는 기능 중 하나이다. Axure 액슈어 따라하기 2. 다이나믹 패널을 이용해 탭 구조 구현하기 탭 구조를 이해하기 위해 선행되어야 하는 건 다이나믹 패널의 개념 이해하기. 개인적으로 액슈어의 꽃이라고 생각하는 기능이다 ㅋㅋ 위에서 말했듯이 가장 많이 이용하는 기능! 다이나믹패널이란? 레이어를 이용하여 동적인 방식의 화면동작을 구현할 수 있는 기능! 이라고 정의해보았다. 사실 이 다이나믹패널이 대체 언제 쓰이는건지, 왜 다이나믹 패널을 만들어야하는건지? 에 대해서 개인적으로 이해하는게 좀 오래걸렸다. 다이나믹 패널을 사용한 레퍼런스를 보고서야 바로 이해 ^^; 아마 아래 탭구조 만..

지금 다니는 회사로 이직하면서 처음 써본 액슈어. 단순히 화면을 그리는건 정말 쉽다. 오히려 ppt보다 소재가 많아서 정말 쉬운데, 문제는 화면만 그리려면 액슈어를..쓸 이유가 없기 때문.. 그치만 생각보다 액슈어 사용법을 찾기 쉽지 않았다. 그래서 정리해보는 액슈어 따라하기. Axure 액슈어 따라하기 1. 마스터 사용법 마스터란? 피그마처럼 마스터 기능이 있는 프로그램들이 많아 대부분 어떤 기능인지는 알 것 같지만, 설명해보자면 여러 화면에서 공통으로 사용되는 포맷을 만들어두고 필요한 화면에 import하여 사용하는 것. 만약 해당 마스터에 수정이 필요하다면 마스터만 수정하면 모든 화면에 수정이 반영된다. 짱 편하다는 말임 ㅎㅎ 방법은 아래에. 마스터는 두가지 방법으로 만들 수 있다. 첫번째는 페이지..