페이퍼 프로포타입을 스케치 파일과 프론트엔드 코드로 바꿔준다면?

– 처음 웹사이트 구조 및 와이어프레임을 제작할 때 종이에 잔뜩 그렸던 기억이 나는데요. 종이에 하나씩 그린 화면들을 ‘Marvel’로 옮기고 간략하게 흐름을 설정하는 작업을 했습니다. 요즘에는 상대적으로 페이퍼 프로토타입 보다는 XD, 스케치 등의 툴을 더 자유롭게 활용하고 있지만요 🙂 페이퍼 프로포타입의 경우 예전만큼 꼼꼼하게 하진 않고, 아이데이션 과정에서 주로 활용하게 되는데 오늘 재미있는 서비스를 하나 발견했습니다.

스케치(Sketch)를 즐겨 쓰는 디자이너를 위한 보물창고 ‘Sketch for Desinger’

  포토샵 그리고 스케치 위의 이미지는 차례대로 2015년과 2016년 가장 많이 쓰이는 와이어프레임툴을 보여주는 자료입니다(출처:2016 Design Tools Survey) 어보디의 포토샵이나 XD에 비해 스케치가 더 많은 디자이너들에게 사랑받고 있다는 사실을 알 수 있는 자료이기도 하죠. 어도비(Adobe)는 아주 오랫동안 디자이너나 기획자들에게 중요한 프로토타이핑 툴로 자리잡고 있었는데, 모바일 앱 제작에 최적화된 툴을 제때 제공하지 못해 스케치에게 빠른 속도로

공항, 국가 리스트 등 바로 사용한 데이터 라이브러리를 제공해주는 ‘Lists’

  한 번씩 꼭 필요하지만, 찾아보려면 쉽게 찾을 수 없는 데이터! 올 초, 제가 담당하고 있는 서비스의 일본버전 업데이트를 하며 고생한 적이 한 번 있었습니다. 우리의 ‘도’에 해당하는 주소 정보를 데이터로 입력해야 하는데 생각보다 찾고 정리하는게 쉽지 않았기 때문이었죠. 현지에서 일하는 분들의 도움으로 다행히 해결을 했지만, 이런 경우가 주변에서도 종종 발생하는 것 같습니다. 평소에 관심을

사이트맵을 포함한 초기 구조를 짜는데 많은 도움을 주는 ‘Gloo Maps’

  뼈대만큼 중요한 것도 없어요! IA는 물론 사이트맵을 포함한 서비스의 초기 구조를 짤 때, 먼저 노트에 스케치를 해두고 1차 정리가 되면 일러스트나 XD와 같은 프로토타이핑 툴 기능 일부를 활용했는데요. 파워포인트를 쓰자니 너무 단조로워 위의 툴들을 계속 사용해왔습니다. 다만..초기 구조의 경우 계속해서 수정을 해야하고 발전시켜야 하는 내용이기에 빠르게 적용할 수 없다는 점이 아쉬운 점이었죠. 그래도 익숙하다는

UI 디자인을 위한 애니메이션을 한 곳에서! ‘Microanimations’

  프로토타이핑 툴에서의 애니메이션 애니메이션까지 직접 짜볼 수 있는 프로토타이핑툴이 우리 주변에 많이 등장했지만, 이런 툴들은 보통 일정 수준 이상의 ‘허들’을 갖고 있습니다. 프로토타입을 설계 하는데 있어 동적인 요소는 커뮤니케이션에 많은 도움이 되기에 앞선 툴들을 학습하거나 또 다른 방법을 고민하게 되는 것이 사실이죠. 저도 수없이 많은 프로토타이핑 툴을 활용하다 최근에는 어도비의 XD에 정착(?)해가고 있는데 요!