본문 바로가기

웹기획

(7)
웹 스토리보드 작업 전 프리핸드 스케치의 필요성 슬로워크에서 제가 속한 컨버전스디자인팀의 KPI는 풀스택 디자이너(Full-stack designer)되기입니다. 그래서 디자인을 제외하고 가장 관심있는 웹기획을 스터디했고, 내/외부 프로젝트 스토리보드를 제작하면서 직접적인 경험을 하고 있습니다. 이 경험을 통해 배운 스토리보드 제작 전 프리핸드 스케치의 필요성을 공유합니다. 스토리보드? 프리핸드 스케치? 1. 스토리보드 진행중인 내부 프로젝트의 스토리보드 스토리보드는 실제 작업 담당자(디자이너, 개발자, 퍼블리셔)가 업무를 수행하기 전에 이해해야 할 작업지시서로, 고객의 의뢰에 따른 머리 속의 비즈니스 모델을 표현하는 것입니다. 2. 프리핸드 스케치 진행중인 내부 프로젝트의 프리핸드 스케치 프리핸드 스케치는 말그대로 연필 등의 도구로 스케치하는 작업으..
슬로워크 웹기획자의 GAIQ 정복기 구글애널리틱스, 다들 관심이 많으시죠. 저 또한 1년 전 웹 기획자로서 구글애널리틱스를 잘 알아야 한다는 의무적이고도 패기 넘치는 마음으로 구글 애널리틱스 입문 강의부터 활용강의, 책 등을 섭렵했었습니다. 그때의 목표는 최종적으로 GAIQ* 취득하기였습니다. 하지만 막상 강의를 듣고 실무에 적용시켜나가보니 그 목표는 점점 희미해져갔고, 제 기억에서 잊혀갔습니다. 그러다 1년이 흘러 새해가 밝았고, 올해는 제 개인 KPI로 삼아 구글애널리틱스 자격증인 GAIQ를 꼭 취득해보기로 했습니다. (*GAIQ: Google Analytics Individual Qualification의 약자로, 구글에서 시행하는 온라인 자격인증시험입니다.) GAIQ에 도전했던 1인으로서 그 과정과 GAIQ에 도움이 되는 책, 블로..
기획자와 개발자, 어서 친해지길 바라 지난 포스팅에서 개발자와 대화하고 싶은 비 개발자를 위한 참고서에 대한 글을 작성했습니다. 이번 포스팅에서는 개발자와 기획자 간 원활한 커뮤니케이션을 위해 저희 팀 내에서 초기 사용했던 방법이 현재는 어떻게 바뀌었는지 사례를 통해 보여드리겠습니다.주의! 이 방법은 주로 슬로워크 1팀 기획자인 저와 개발자들이 사용하는 방식으로, 회사별로 팀별로 방법이 다를 수 있습니다. 가장 좋은 방법은 팀 내에서 서로 많은 대화를 해보는 것입니다. 1. 기획자와 개발자의 시간은 다르게 간다. “이거 금방 되죠?” vs “이거 오래 걸려요” 초기에 기획자로서 흔히 했던 실수는, 개발자에게 정확한 기간이나 요건을 설명하지 않고 금방 될 것이라 추측한 것입니다. ‘금방’, ‘오래'와 같은 단어는 주관적입니다. 내가 생각하는 ..
개발자와 대화하고 싶은 비개발자를 위한 참고서 슬로워크 블로그에서는 얼마 전, 비디자이너의 얕은 지식 쌓기: 디자인 용어 20에 대해 포스팅했습니다. 그 글을 보고 저 또한 개발팀 내 유일한 비개발자이기에 많은 영감을 받아 이번 글을 작성하게 되었습니다. 저는 웹기획자로 프론트엔드개발자 두 명, 백엔드개발자 한 명과 함께 팀을 이뤄 작업하고 있습니다. 개발자와 함께 일하기 역시 기본적인 용어를 알지 못하면 혼란스러운 상황(나는 누구? 여긴 어디?..)에 처할 수 있습니다. 고객들도 웹사이트 의뢰를 하면서 익숙지 않은 여러 용어에 낯설어 합니다. 저 역시 아직도 갈 길이 멀지만, 개발자와 소통하기 위한 넓고 얕은 개발용어 몇 가지를 안내해 드립니다. 프론트엔드개발자와 백엔드개발자는 어떻게 다른 건가요? 프론트엔드개발자 - 사용자의 화면에 나타나는 웹 ..
기획자의 스케치(Sketch), 인비전(Invision) 사용기 슬로워크에서는 스티비라는 이메일마케팅 서비스를 만들고 있습니다. 스티비처럼 서비스를 새로 만들어나가는 단계에서 가장 많이 하는 일 중 하나는 서비스를 만들기 위한 화면을 설계하는 것입니다. 스티비를 만드는 과정은 대략 이렇습니다. 화면 설계의 산출물은 디자인과 개발의 밑바탕이 되는 것이기 때문에 화면 설계 단계에서는 디자이너, 개발자와의 소통이 중요합니다. 그 산출물 또한 디자이너, 개발자가 활용하기 쉬운 형태여야 합니다. 화면 설계의 산출물 중 하나는 와이어프레임(Wireframe)입니다. 와이어프레임이란 단순한 선으로 화면의 레이아웃을 표현하는 것을 말합니다. 더 읽기 > UI, UX 기획을 쉽게, 와이어프레임(Wireframe) 슬로워크에서는 원래 Moqups라는 도구를 사용하고 있었고 스티비 팀에..
새로운 아름다운가게를 소개합니다. 아름다운가게(www.beautifulstore.org)는 지난 2016년 4월, 웹사이트를 새로운 웹사이트를 공개했습니다. 이번 웹사이트 리뉴얼(개편)은 슬로워크에서 진행하였는데요. 아름다운가게 웹사이트는 어떤 과정을 거쳐 새롭게 태어났을까요? 그 과정을 소개합니다. 아름다운가게 웹사이트 개편을 위해, 슬로워크와 아름다운가게의 담당자 간 사전 미팅을 여러 차례 진행했습니다. 기존의 웹사이트는 다양하고 많은 콘텐츠를 가지고 있었으나, 사업이 점점 커져감에 따라 메뉴 구조와 디자인 톤에 변화를 주고 사용성을 높여야 하는 상태였습니다. 이를 효과적으로 개선하고자 몇 차례 회의을 진행하였고, 시작 전 리뉴얼의 큰 방향성과 목표를 세웠습니다. 기존의 아름다운가게 홈페이지 아름다운가게 리뉴얼 방향성 및 목표1. 메..
UI, UX기획을 손쉽게, 와이어프레임(Wireframe) UI/UX 기획을 할 때 사용하는 와이어프레임(Wireframe)에 대해 들어보셨나요?웹 또는 앱 프로젝트를 진행할 때 필요한 과정 중 하나로 웹 페이지의 구조를 제안하기 위한 화면 설계도입니다. 즉 디자인이 들어가기 전 단계에서, 선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말합니다. 단순한 선과 회색박스들로 보일 수 있겠지만, 디자인의 컨셉, 고객의 요구사항, 콘텐츠들의 기능 요소를 모두 파악하여 전략적으로 설계되어야 하므로 중요도가 높습니다. 또한, 이 와이어프레임이 잘 갖춰져 있어야 디자이너와 웹 퍼블리셔, 개발자 그리고 클라이언트가 서로 원활히 소통할 수 있게 됩니다. 와이어 프레임이 실제 업무에서 사용되는 예시를 살펴보겠습니다. (*주관적인 흐름으로 개인적, 업체별로 다른 프로세스로..