]UIUX[ Framer로 제작하는 와이어프레임 예

Wireframe Draft UX디자인 수업 개인프로젝트로 디자하고 있는 앱 이다. 직무 활동에서 얻게 되는 인사이트를 기록해두고 이력서 쓸 때 참고하자는,, 모종의 다이어리 앱을 흉내내었다 (거의 표절). 이름에 Port가 들어가니까 블루한 색상과 등대 이미지를 집어 넣었음. 와이어프레임 작업에 교수님이 추천하신 www.framer.com를 썼더니, 순식간에 큰 그림은 완성한 것 같다. GUI에서 컴포넌트 간 선을 연결해주면 알아서 Magic Motion이라는 팬시한 애니메이션을 뚝딱 적용해 준다. 이젠 머티리얼 컴포넌트를 가져다가 코드로 구현해야 할 텐데, 애니메이션 깎는 장인이 되어야 할 것 같다... 12월까지 완료할 수 있을까? 흠,, 활동년도 보여주기 & 검색바 눌러보기 활동 추가하기 활동년도..

]UIUX[ 프로토타이핑 개념과 도구

프로토타이핑(시제품 시연) 개요 소비자가 우리 의도대로 반응해 준다면 바로 대박이다. 하지만 그런 경우는 몹시 한정적이다. 대신 우리쪽에서 실제 소비자들의 생각과 반응을 일찍 파악해야 한다. 시제품 시연은 자신의 아이디어를 일찍 평가 받는 방법이며, 개발 시간을 절약해 사용자 니즈를 충족할 제품으로 발전하게 한다. 시제품 제품 완성 이전 모형으로 특정 부분 혹은 기능을 테스트한다. ex) 비행기 모형 부력 테스트 프로토타입은 제품 초기 릴리즈가 아니다. 아이디어 검토를 위한 실험 백문이 불여일견 실제 사용자가 몰입하여 제품과 아이디어를 테스트 해 줌 프로젝트에 효과적인 도움을 줄 수 있음 프로토타이핑의 마인드 최소 노력과 비용으로 최대의 환상을 만들자 굳이 로직을 코딩할 것 까지도 없다 서비스가 움직이는..

]Android UX[ 머티리얼 디자인(2) - 표준 컴포넌트

머티리얼 디자인 (2) - 표준 컴포넌트 왜 알아야 하나요? 앱의 목적을 달성하기 위하여 굳이 커스텀 뷰를 구현하지 않아도 기본적으로 제공되는 컴포넌트를 끌어다 쓰는 것은 무척 편리하다. 컴포넌트를 활용하는 방식이 모바일 패턴으로 자리잡았으니 머티리얼 사이트를 참조하여 각 컴포넌트를 공부하도록 하자. 시스템 바 두 개 상단 상태 바 아이콘과 알림을 전시하며 배터리와 시간정보 등을 표시하고 있다. 하단 네비게이션 바 뒤로 가기, 홈, 오버뷰 버튼을 제공한다. 풀 스크린 모드 액티비티를 풀 스크린 모드로 사용하면 상단 상태 바가 숨겨진다. 기본적으로 하단 네비게이션 바는 숨겨지지 않으며 3번 방법의 플래그로 옵션을 바꿀 수 있다. 상단 상태 바는 다른 앱의 알림과 시간 등을 보여주므로 굳이 없앨 가능성은 낮..

]Android UX[ 머티리얼 디자인(1) - 종이와 잉크

머티리얼 디자인 (1) 머티리얼 수식어는 공간과 움직임 체계를 통합한 합리적 이론이다. 실제 종이와 잉크에 영감을 받은 생생한 촉각을 기반으로 한다. 안드로이드 5.0부터 선보인 디자인 패턴이며 tactile reality 란 말처럼 실제 종이와 잉크에 영감을 받았으나 물리 세계의 제약을 받지 않는 마법 같은 디자인을 추구한다. 기본 컨셉 Paper 무엇이든 놓일 공간이며, 화면 속 세상에서 재밌는 효과를 일으킬 수 있다. 이 효과들은 자연스러워야 한다. 머티리얼은 시각적 요소의 두께 설정을 무시하고 플랫플랫한 느낌을 선사한다. 현실의 종이와 비슷한 마법의 종이 커지고 작아지고 이동하고 미끄러지고 서로 충돌하고 합쳐지고 쪼개지고 종이의 두께는 오직 1dp 고정 (두께를 고려하지 않는다) 절대로 갑자기 풀..