슬로워크에서 제가 속한 컨버전스디자인팀의 KPI는 풀스택 디자이너(Full-stack designer)되기입니다. 그래서 디자인을 제외하고 가장 관심있는 웹기획을 스터디했고, 내/외부 프로젝트 스토리보드를 제작하면서 직접적인 경험을 하고 있습니다. 이 경험을 통해 배운 스토리보드 제작 전 프리핸드 스케치의 필요성을 공유합니다.



스토리보드? 프리핸드 스케치?


1. 스토리보드


진행중인 내부 프로젝트의 스토리보드


스토리보드는 실제 작업 담당자(디자이너, 개발자, 퍼블리셔)가 업무를 수행하기 전에 이해해야 할 작업지시서로, 고객의 의뢰에 따른 머리 속의 비즈니스 모델을 표현하는 것입니다.


2. 프리핸드 스케치


진행중인 내부 프로젝트의 프리핸드 스케치


프리핸드 스케치는 말그대로 연필 등의 도구로 스케치하는 작업으로, 스토리보드 제작을 위한 사전 작업입니다. 고객의 니즈와 자신의 경험 또는 벤치마킹한 내용을 구체화해서 제작에 필요한 규칙, 범위 등을 미리 설정하여 스토리보드 작성의 완성도를 높이고 작업자(디자이너, 개발자, 퍼블리셔) 간의 원활한 의사소통을 위해 실시하는 작업입니다.



프리핸드 스케치가 효율적인 이유


1. 시간 절약

대화로 이해되지 않는 부분을 스케치를 통해 좀 더 정확하게 전달할 수 있습니다.

실제로 말로 표현할 때는 형태, 색상, 크기, 기능 등의 요소가 빠지기 때문에 같은 단어라도 작업자가 이해하는 것과 고객이 이해하는 것은 다를 수 있습니다. 그렇기 때문에 스케치 과정에서 빠르게 오점을 찾아내어 정리할 수 있고, 스토리보드 제작 시간을 단축할 수 있습니다.


2. 큰 구조 파악
제작될 산출물의 개념부터 전략과 전술 등의 핵심 주제 논의를 통해 제작되는 산출물이 왜 만들어지고 그것을 통해 고객이 어떤 핵심 서비스를 받게 되는지 등의 전체적인 서비스의 큰 그림을 스케치를 통해 전개해 나갈 수 있습니다. 이러한 생각 공유를 통해 하나의 목표 지점에 도달할 수 있습니다. 쇼핑몰 구축을 예로 들면, 기능 결정이 화면 UI/UX 구조에 많은 영향을 끼칠 수 있습니다.


검색 중심의 고객 니즈에 부합하지 않은 카테고리 중심의 홈페이지(29cm)


검색 중심의 고객 니즈에 부합하는 홈페이지(쿠팡)


29cm는 커머스와 다르게 브랜드와 스토리 중심으로 집중하고 고민하는 온라인 쇼핑몰이고, 쿠팡은 검색 중심의 쇼핑몰로 제품 판매에 포커스를 맞추고 있습니다. 만일 고객 니즈가 검색 중심의 화면(쿠팡)인데 작업 전 사전에 충분히 토론이 되지 않으면 산출물이 고객 니즈와 부합하지 않은 엉뚱한 방향(29cm)으로 흐를 수 있습니다. 개념 파악에서 결정된 사항은 서비스의 중심 뼈대이므로 중간에 변경되어서는 안 된다는 점을 협업하는 작업자 및 고객과 공유해야 합니다. 또한, 변경 사항 및 생각이 다른 부분을 최대한 빠르게 찾아내어 결정하고 진행해야 합니다.


3. 스토리텔링

스토리보드와 다르게 프리핸드 스케치는 빠르게 하나하나의 화면 구조를 정리하고 그곳에서 이뤄지는 이동 경로를 전개해 제작물의 큰 흐름을 파악하는 최적의 도구라 할 수 있습니다.


프리핸드 스케치에서 화면의 구조뿐만 아니라 네이밍, 문구, 기능, 링크, 예상치 못한 고객의 돌발 행동 등을 정의하여 다룰 수 있습니다. 프리핸드 스케치 작업을 거치지 않은 채 바로 스토리보드 작업을 진행하는 경우가 많은데, 머리 속에 있는 혼돈의 경험을 바로 스토리보드로 제작하면 원활한 의사소통뿐만 아니라 정교한 화면설계를 할 수 없습니다.


그렇다면 프리핸드 스케치는 어떻게 하는 걸까요? 몇 가지 팁을 공유합니다.



프리핸드 스케치 제작 팁


1. 그리는 데에 너무 많은 시간을 소요하지 마세요.

예쁘게 그릴 필요가 없습니다. 상대방이 충분히 알아볼 수 있는 정도의 화면으로 주요 구조, 핵심 기능, 내용을 기재하면 됩니다.


2. 스토리를 그리세요.

화면 이동 흐름을 화살표로 그리고 다음 화면을 간단하게 연결해 나가세요. 그러면 전체적인 화면의 로직을 확인할 수 있습니다.


3. 치환, 생략을 이용하세요.

알고 있는 기능이나 개념은 생략해도 됩니다. 어차피 스토리보드를 제작할 때 정교하게 다뤄지므로 영역 표시 및 간략한 기술로 마무리하세요.


프리핸드 스케치란 머리 속에 상상하고 있는 이미지를 그림으로 제작하는 것이 아니라, 그림을 통해 점차 완성도가 높은 이미지를 만드는 것을 의미합니다. 스케치는 미래도시, 웃음짓는 사람들, 파괴된 도시 등과 같이 컴퓨터로도 표현할 수 없는 이미지를 형상화할 수 있습니다.


프리핸드 스케치가 스토리보드로 제작된 화면

이제 스토리보드 작업을 하기 전에 간단한 스케치 과정을 거쳐 보세요. 좀 더 쉽고 효과적으로 화면 기획을 할 수 있을 것입니다.


제가 속한 슬로워크 컨버전스디자인팀에서 UI디자이너를 채용하고 있습니다. 저와 함께 풀스택 디자이너로 발전할 분을 찾습니다.





Posted by slowalk


구글애널리틱스, 다들 관심이 많으시죠.

저 또한 1년 전 웹 기획자로서 구글애널리틱스를 잘 알아야 한다는 의무적이고도 패기 넘치는 마음으로 구글 애널리틱스 입문 강의부터 활용강의, 책 등을 섭렵했었습니다.

그때의 목표는 최종적으로 GAIQ* 취득하기였습니다. 하지만 막상 강의를 듣고 실무에 적용시켜나가보니 그 목표는 점점 희미해져갔고, 제 기억에서 잊혀갔습니다. 그러다 1년이 흘러 새해가 밝았고, 올해는 제 개인 KPI로 삼아 구글애널리틱스 자격증인 GAIQ를 꼭 취득해보기로 했습니다. (*GAIQ: Google Analytics Individual Qualification의 약자로, 구글에서 시행하는 온라인 자격인증시험입니다.) GAIQ에 도전했던 1인으로서 그 과정과 GAIQ에 도움이 되는 책, 블로그, 강의 등을 소개해드릴까 합니다.

[구글애널리틱스 자격증(GAIQ) 알아보기]

1. GAIQ란?

구글애널리틱스 시험에 합격한 모든 개인에게 실력을 입증하는 것입니다. 왜 공인 전문가 자격을 취득해야 하는지 궁금하실 수 있는데요. 구글애널리틱스는 초보자도 쉽게 이용할 수 있지만, 전문가가 관리할 때 최대의 효과를 발휘하기 때문에 그렇습니다.

2. 시험 응시자격? 조직에서 구글애널리틱스를 활용할 수 있는 사람, 동일한 기능을 수행하는 모든 사람이 응시할 수 있습니다. 응시 자체는 누구나 가능합니다.

3. 시험비용이 따로 있나? 구글 파트너에 가입하면 무료로 구글애널리틱스 시험에 응시할 수 있습니다. 구글 사용자가 아니라면 응시가 어렵습니다.

4. GAIQ, 한국어도 있나? GAIQ는 한국어, 네덜란드어, 독일어, 러시아어, 스페인어, 영어, 이탈리아어, 일본어, 중국어(간체), 체코어, 터키어, 포르투갈어, 폴란드어, 프랑스어로 제공됩니다.

5. GAIQ의 유효기간? 공인 전문가 자격을 최신 상태로 유지하려면 18개월마다 시험에 합격해야 합니다.

6. 시험 응시 방법은? 파트너 계정에서 시험에 액세스하려면 다음 단계를 따르세요.

a. Google 파트너에 로그인합니다.

b. 인증을 클릭하고 시험 상태를 확인합니다. 인증 자격을 얻으려면 몇 개의 시험에 통과해야 하는지 등의 정보가 표시됩니다.

c. 시험 보기를 클릭합니다.

d. 응시하려는 시험 영역으로 마우스를 가져갑니다. 시험 세부정보를 클릭합니다.

e. 시험 응시를 클릭하여 시험에 응시합니다. 또는 이 페이지에 링크된 시험 대비 자료를 학습할 수 있습니다.

*시험에 합격하면 합격 여부가 시험 페이지에 표시되기까지 최대 48시간이 걸릴 수 있습니다. (개인적으로는 바로 시험 합격 여부가 표기되었습니다.)


7. 시험 소요시간은?
시험시간은 90분이고, 시험을 시작하면 하단에 시험 타이머가 작동됩니다. 혹 컴퓨터 전원이 종료되더라도 타이머는 계속해서 작동됩니다. 인터넷 연결이 끊겼을 경우에도 중단된 부분부터 시험을 볼 수 있지만, 타이머는 중단되지 않습니다.


8. 시험 합격 점수 커트라인은? 정답률이 80% 이상이 되어야 합니다. 시험을 본 후 페이지 상에서 정답을 맞춰보거나 틀린 문제가 어떤 것인지 알 수는 없습니다. (정답에 확신을 가질 수 있는 끝없는 공부가 필요합니다)


9. 시험에 떨어지면 언제 다시 응시할 수 있나? 시험에 합격하지 못한 경우 7일 이내에 다시 응시할 수 있습니다. 1주일 간 스터디 가이드를 통한 열공은 필수입니다.



[GAIQ 시험 생생후기]

오랜만에 구글 애널리틱스 공부를 하고, 지난 2월 말 GAIQ에 처음 응시했습니다.



지금 시험 시작하기 버튼을 누르면 그때부터 시험페이지가 등장하고 타이머가 작동됩니다. 온라인으로 진행되고 처음 보는 형식의 문제 형태에 초반엔 조금 당황했습니다. 하단에 타이머가 계속해서 흘러가니 마음도 살짝 조급해집니다.



문제는 객관식으로 사지선다 또는 오지선다 입니다. 이번 시험에서는 다중채널유입경로, 애드워즈 관련 문제가 많이 나온 편이었습니다.


제 개인적인 느낌으로는 답이 딱 떨어지는 시험이 아니라는 생각을 많이 하게 되었습니다. 탄탄한 밑바탕이 있어야 자신 있게 답을 선택할 수 있을 것 같았습니다. 나름 열심히 공부했는데 헷갈리는 문제가 꽤 있다는 느낌을 받았습니다.


또한, GAIQ시험은 기출은행식의 시험입니다. 2번 시험에 응시했는데 같은 문제가 많이 등장합니다. 다만, 내가 이전에 본 시험의 답이나 오답을 알 수 없으니, 확신을 갖고 답을 선택하려면 공부가 필수입니다. 인터넷에 있는 정보 또한 풀이는 100% 믿으면 안됩니다. 꼭 자신이 직접 찾아 공부하는 것이 중요합니다. 기출문제 풀이는 웹로그 분석고객센터에서 직접 찾아서 확인하고 자신의 것으로 만들고 넘어가는 것이 중요합니다. 또한, 오픈북 형식입니다. 시험을 보면서 다른 사이트를 찾아볼 수 있고, 참고할 수 있습니다. 다만 시간 내에 문제를 모두 풀려면 기본 지식이 바탕이 되어야 합니다. 




처음 본 시험은 76점으로 떨어졌지만 7일 동안 다시 공부하여 시험에 응시할 수 있습니다. 시험의 느낌을 공유하자면, 초반엔 약간 생소했고 중간 정도부터는 공부를 어떻게 해야 하는지 알 수 있었습니다. 마지막 부분에서는 시간이 약간 모자란다고 느꼈습니다. 하지만 기출은행식의 시험이기에 여러 번 응시하게 된다면 시간문제는 충분히 해결할 수 있을 것 같았습니다. 공부를 시작하기 전 시험에 응시해보고 공부의 방향을 정하는 것도 도움이 충분히 될 것 같습니다.



시험응시를 끝내고 나면, 메일로 해당 내용이 옵니다. 구글에서는 무료 학습 가이드를 제공하고 합격에 필요한 정보를 굉장히 많이 제공하기 때문에 해당 자료들을 활용하는 것이 매우 도움됩니다. 즉, 구글에서 무료로 제공하는 스터디 정보들이 많기 때문에 누구나 독학으로도 충분히 자격증을 취득할 수 있습니다. 그 외의 다양한 참고 사이트를 소개합니다.



[참고하기]


주로 참고한 사이트는 구글 애널리틱스의 공식 사이트입니다. FAQ 메뉴와 학습 가이드에서도 많은 도움을 받을 수 있고 굉장히 자세하게 많은 정보를 제공하기 때문에 구글애널리틱스 사이트의 FAQ와 학습 가이드, 온라인 강의를 듣는 것이 좋습니다.


1. 구글애널리틱스 제공 학습 가이드

a. GAIQ 학습가이드

b. 애널리틱스 아카데미


2. 커뮤니티

a. 웹분석 커뮤니티

구글애널리틱스 관련 커뮤니티 중 제가 주로 이용하는 사이트입니다. 공부를 하면서 의심이 드는 부분을 내가 생각한 정답과 이유 등을 기술하여 묻고 토론할 수 있습니다. 이 방법 또한 매우 도움이 됩니다.

b. 마케팅-로그분석

GA관련 커뮤니티로 다양한 양질의 정보가 많습니다.


3. 개인 블로그

a. 구글애널리틱스 문제풀이 관련 검색을 하다 보면 개인 블로그에 좋은 강의 내용을 포스팅하는 분들이 많습니다. 저는 개인 블로그를 통해서도 헷갈리던 문제들의 힌트를 얻기도 하고, 공부 의지를 불태웠습니다.

b. 구글애널리틱스 시험, GAIQ, CPC 등 시험 문제에 나오는 키워드로 검색하면 좋은 참고 링크가 등장합니다.


4. 서적

a. 구글 웹로그 분석 - 한빛 미디어

b. 구글 애널리틱스 웹로그 분석의 시작과 끝 - 에이콘


5. 강의

a. 마소캠퍼스

b. 블로터아카데미

*실제 위 두 곳에서 작년에 외부 교육을 듣고 구글 애널리틱스에 대한 기초를 다졌습니다.


[마무리]

입사 초기 구글애널리틱스에 대한 블로그 글을 작성한 적이 있습니다.

당시에는 생소한 단어였지만 이제는 구글애널리틱스에 대해 어느 정도 알게 되었습니다. 공부하면 할수록 배울 것이 많고 실무에 활용하기 좋은 기능들이 많습니다. GAIQ를 취득한다고 완전한 전문가가 되는 것은 아니겠지만, 자격증을 꾸준히 유지하고 발전해간다면 GA 분석을 필요로 하는 사람들에게 더욱 양질의 정보를 제공할 수 있을 거로 생각합니다. 글을 마치며 저는 위 내용을 기반으로 시험에 재응시해 GAIQ를 취득하게 되었습니다.



시험에 합격하게 되면 해당 인증서의 유효기간이 나오고 구글 프로필에 인증 뱃지가 등록되게 됩니다. 유효기간은 18개월이므로 계속해서 GAIQ 갱신을 위해 공부도 게을리하지 말아야 합니다. 그럼 모두 GAIQ 시험에 합격하시길 응원합니다!




Posted by slowalk

지난 포스팅에서 개발자와 대화하고 싶은 비 개발자를 위한 참고서에 대한 글을 작성했습니다. 이번 포스팅에서는 개발자와 기획자 간 원활한 커뮤니케이션을 위해 저희 팀 내에서 초기 사용했던 방법이 현재는 어떻게 바뀌었는지 사례를 통해 보여드리겠습니다.

주의! 이 방법은 주로 슬로워크 1팀 기획자인 저와 개발자들이 사용하는 방식으로, 회사별로 팀별로 방법이 다를 수 있습니다. 가장 좋은 방법은 팀 내에서 서로 많은 대화를 해보는 것입니다.




1. 기획자와 개발자의 시간은 다르게 간다.

“이거 금방 되죠?” vs “이거 오래 걸려요”



초기에 기획자로서 흔히 했던 실수는, 개발자에게 정확한 기간이나 요건을 설명하지 않고 금방 될 것이라 추측한 것입니다. ‘금방’, ‘오래'와 같은 단어는 주관적입니다. 내가 생각하는 금방은 하루지만 상대방이 생각하는 금방은 3일일 수 있습니다. “이거 금방 되죠?"와 같은 질문을 받은 개발자는 당연히 금방 되지 않으니 오래 걸린다고 답할 수밖에 없습니다. 그러다 보니 서로 갈등과 오해가 생기게 됩니다. 기획자는 ‘분명 이전 프로젝트에서는 금방 해주었던 것 같은데, 왜 오래 걸린다는 거지’ 혼자 생각하고, 개발자는 ‘지금 요건에서 그 기능은 금방 추가할 수가 없는데 왜 금방 된다는 거지’ 하며 답답해 합니다.


시간에 대해 설명할 때는 구체적인 언급이 필요합니다. 모호하고 주관적 단어 대신 구체적인 단어를 선택해야 합니다.


“이런 기능 요건이 추가되었는데, 3일 안에 가능할까요?”

“이 기능은 지난 프로젝트에서 사용했지만, 이번 프로젝트 개발 구조와 달라 수정이 필요할 것 같아서 3일은 어렵고 5일이 소요될 것 같아요.”


위와 같이 서로 구체적인 기간을 언급하고, 그 이유를 설명해야 불필요한 오해의 소지를 줄일 수 있습니다. 또한, 고객에게 일정을 설명할 때도 정확한 기간을 언급해주는 것이 신뢰의 기본입니다.




2. 개발자와 기획자의 서로 다른 언어

이해관계자와 수많은 커뮤니케이션 vs 프로그래밍 언어로 컴퓨터와 커뮤니케이션




기획자는 여러 이해관계자와 다양한 수준의 커뮤니케이션을 합니다. 이를 통해 일을 정리하고 상대방을 설득하며, 개발자에게도 설명합니다. 즉 기획자가 하는 모든 일은 다른 사람들에게 상대방의 생각을 올바르게 커뮤니케이션해주는 과정에 있습니다. 개발자는 해당 내용을 결과물로 보여주기 위해 일반인이 이해하기 힘든 프로그래밍 코드를 작성하고, 컴퓨터와 대화를 주고 받습니다. 기획안을 오랫동안 설명하였는데 나의 기획과 다른 개발 결과물이 나오는 일도 있고, 반대로 기획자가 가져온 그대로 개발하였는데 번복하는 상황이 생기기도 합니다.


서로가 대화하는 대상이 다름을 인지하는 것이 가장 중요합니다.

기획자는 자신뿐만 아니라 상대방의 생각도, 고객의 요구도 반영해야 합니다. 개발자는 그러한 결과물을 구현해주기 위해 컴퓨터와 끊임없이 대화하고 수정합니다. 그렇기 때문에 서로의 커뮤니케이션 대상자가 다름을 이해할 때 서로 불필요한 오해를 줄일 수 있습니다. 특히 개발언어는 정량적 측정이 어렵기 때문에 정확한 기간을 말하기 힘들 때가 있습니다.


커뮤니케이션 대상자는 다르지만 하나의 결과물을 위해 함께 협업해야 한다는 점을 기억하세요.



3. 개발자와 기획자의 논리적인 대화를 위한 3단계

“이 기능 간단하죠? 전에 한 거랑 같은데.” vs “이거 달라요, 여기엔 안 돼요.”




기획과 개발은 서로 함께 하나의 목표를 위해 달려가는 협업과정입니다. 그 과정에서 서로가 생각하는 바가 다르기도 하고 머릿속에 있는 것을 말로만 설명해서는 이해하기가 어렵습니다. 막바지에 이르러 서로 다른 결과물을 가지고 볼 수도 있습니다. 따라서 대화 전에 아래와 같은 사전 기획서 혹은 간단한 문서를 통해 대화하면 조금 더 논리적이고 오해가 적은  커뮤니케이션을 할 수 있습니다.


1) 자신의 생각을 정리한다

2) 생각을 구체적으로 손으로 그리거나 툴을 이용해 누구나 이해할 수 있게 그린다

3) 1:1로 직접 보고 대화한다


<실제 1팀에서 기획자와 개발자 간에 대화를 위해 작성한 페이퍼프로토타입, ppt 문서>



슬로워크 1팀에서 기획자는 주로 moqups.com과 ppt를 사용합니다. 와이어프레임을 그려 디자이너와 개발자에게 전달하고 내부 세미나를 합니다. 또 역으로 개발자가 기획자에게 관리자 화면이나 기획안 수정 및 요청을 할 때가 있습니다. 주로 직접 그려서 주거나 엑셀 표에 작성해서 전달합니다. 또 가까운 공간에 서로 함께 일하기 때문에 끊임없이 이야기하면서 커뮤니케이션 능력을 서로 업그레이드시키고 있습니다. 특히 제가 개인적으로 선호하는 방식은, 개발자에게 먼저 묻고 일정과 협의를 진행하는 것입니다. 그렇게 되면 일정이나 서로 개발범위에 따른 오해의 소지가 반 이상 줄어들고, 서로 존중하는 프로젝트가 진행됩니다. 개인적으로 짐작하거나 말을 걸기 두려워 지레짐작하다 보면 프로젝트는 산으로 가기 십상입니다. 최근 1팀의 대화는 이렇습니다.


“ A와 B를 통해서 C가 나오도록 해주세요, 10일간의 일정에 가능할까요? “

“네, A와 B를 OO코드로 C가 나오도록 구현할게요. 일정은 10일이면 가능할 것 같아요. ”



4. 마무리

‘우리는 모두 한 배를 타고 있다.’ 서로의 언어에 관심을 가지는 것이 시작입니다.



사실 커뮤니케이션 방법에 정답은 없습니다. 우리 팀에서 잘 맞고, 우리 팀원들과 적합한 커뮤니케이션 방식을 찾아가는 것 또한 업무의 일환이라고 생각합니다. 다만 서로에 대한 배려와 이해하고자 하는 마음 그리고 조금 더 구체적으로 서로의 업무를 설명하는 것이 신뢰를 위한 첫 걸음입니다.



Posted by slowalk


슬로워크 블로그에서는 얼마 전, 비디자이너의 얕은 지식 쌓기: 디자인 용어 20에 대해 포스팅했습니다. 그 글을 보고 저 또한 개발팀 내 유일한 비개발자이기에 많은 영감을 받아 이번 글을 작성하게 되었습니다. 저는 웹기획자로 프론트엔드개발자 두 명, 백엔드개발자 한 명과 함께 팀을 이뤄 작업하고 있습니다. 개발자와 함께 일하기 역시 기본적인 용어를 알지 못하면 혼란스러운 상황(나는 누구? 여긴 어디?..)에 처할 수 있습니다. 고객들도 웹사이트 의뢰를 하면서 익숙지 않은 여러 용어에 낯설어 합니다. 저 역시 아직도 갈 길이 멀지만, 개발자와 소통하기 위한 넓고 얕은 개발용어 몇 가지를 안내해 드립니다.



프론트엔드개발자와 백엔드개발자는 어떻게 다른 건가요?


프론트엔드개발자 - 사용자의 화면에 나타나는 웹 화면을 프론트엔드(Front-end) 영역이라고 합니다. 그리고 이 영역을 설계하는 사람을 프론트엔드개발자라고 합니다. 프론트엔드개발자는 사용자가 보는 화면을 주로 HTML과 CSS를 사용하여 보기 좋게 보이게 만들어주는 사람이라고 할 수 있습니다.


백엔드개발자 - 백엔드(Back-end) 영역은 일반적으로 사용자가 볼 수 없습니다. 예를 들어, 회원가입 정보를 입력하면 그 정보는 서버 데이터베이스에 저장되는데, 이러한 동작들이 처리되는 영역이 백엔드 입니다. 사용자가 보이지 않는 웹서버, 내부로직, 데이터베이스 설계, 데이터 처리를 주로 개발하는 사람입니다.

프론트엔드에서 사용자가 클릭, 드래그의 동작을 하면 이를 백엔드에서 처리한 데이터를 다시 프론트엔드로 돌려주어 사용자가 해당 작업을 수행할 수 있게 됩니다. 예를 들어, 페이스북에 사용자가 사진을 올리면 그 사진을 백엔드에서 데이터베이스에 저장하고 다시 프론트엔드로 돌려주어 내 사진을 다른 사용자가 볼 수 있게 되는 것입니다.

꼭 두 영역을 명확히 나눠서 개발하는 것은 아닙니다. 프론트엔드, 백엔드를 함께 진행하는 개발자도 있는 등 역할의 범위는 다양합니다.



자바, 파이썬, 루비, 펄, C++ .. 이게 다 무슨 이름인가요? 프로그래밍 언어는 다양하여 많은 선택지가 존재합니다. 유행을 타기도 하고 순위가 매겨지기도 합니다. 현재 사용되는 프로그래밍 언어는, 위키피디아에 따르면 698종이라고 합니다. 그 중 가장 많이 사용하는 언어는 C 계열 언어와 JAVA 계열의 언어이고, 최근에는 빅데이터 전문가가 뜨면서 R 프로그래밍이나 하둡에 관심을 두는 사람도 많아지는 추세라고 합니다. 각 언어는 저마다 장단점을 가지고 있고, 그렇기에 개발자들도 다룰 수 있는 언어들이 다양합니다.


출처: TIOBE



사용 가능한 프로그래밍 언어가 계속해서 늘고 점유율 순위가 바뀌고 사라지는 이유는 사용성 때문입니다. 요구사항이 변하고 시스템이 바뀔 때마다 손쉽게 바꿀 수 있어야 좋은 프로그래밍 언어가 됩니다.

비개발자이더라도 위 프로그래밍 언어들의 이름 정도만 알고 있으면 개발자들이 옆에서 이야기할 때 ‘아~ 프로그래밍 언어 얘기하는구나!’ 정도는 이해할 수 있습니다. 개발자와 가까워지는 방법은 그들의 언어를 한 번이라도 더 많이 들어보는 것입니다.



PHP, MySQL, Oracle 들어는 봤는데.. 서버? 백엔드개발자들이 사용하는 언어 맞나요?

PHP는 서버 쪽에서 동작되는 언어입니다. 자바스크립트나 HTML이 웹 브라우저에서 구동되는 것과는 구분됩니다. 사용자가 업로드한 파일을 서버에 저장하거나, 입력 데이터를 받아 데이터베이스나 파일에 저장하고, 저장된 정보를 불러와 HTML을 생성해서 웹브라우저로 전송하는 일을 처리합니다.

MySQL은 데이터를 보관하는 데이터베이스 관리 시스템의 한 종류입니다. 데이터베이스는 파일보다 정보 저장에 관해 더 많은 기능을 제공하기 때문에, 대부분의 데이터들이 데이터베이스에 저장됩니다. 그 중 MySQL은 오픈소스이기 때문에 많이 사용되고 있습니다.  


*서버 - 서버란 파일, 홈페이지, 동영상 등의 자료를 보관하고, 보관된 자료를 인터넷이 연결된 곳에서 언제든지 접근할 수 있도록 구성된 소프트웨어를 말합니다. 서버에는 메일서버, 웹 서버, 데이터베이스를 관리하는 DB서버, FTP프로토콜을 이용하여 파일전송을 가능케하는 FTP서버 등 다양한 서버가 있습니다.



서브라임텍스트3 사용하고 있고요, 깃으로 푸시해주세요~ 서브라임텍스트는 개발도구를 말합니다. 일반적으로 프로그래밍을 하는 데는 윈도우에서 메모장, 맥에서는 텍스트 에디터만 있어도 가능합니다. 그러나 규모가 크고, 오류가 없는 프로그램을 만들기 위해 작업을 도와주는 수 많은 개발도구들이 존재합니다. 좀 더 빠르고 효율적으로 개발하기 위해 도구를 사용하는 것이죠. 개발도구에는 비주얼스튜디오, 노트패트++, 빔, 이클립스 등이 있습니다. 그 중 서브라임텍스트는 개발자가 선호하는 도구 2위를 차지할 만큼 인기를 끌고 있습니다. 현재 슬로워크 1팀에서는 서브라임텍스트3을 사용하고 있습니다. 서브라임텍스트는 유료이지만 무료로도 사용할 수 있습니다. 장점으로는 개발자들이 많이 사용하기에 플러그인이 많아 원하는 대로 기능 확장이 가능합니다. 또한 가벼워서 좋다고 합니다.





기본적으로 이러한 까만 창이 서브라임텍스트3 입니다. 코딩을 위한 폰트도 개발자의 설정에 맞게 변경할 수 있습니다. 자세한 내용은 코딩 폰트 디자인기, Monoid를 참조해주세요.

깃(Git)은 버전관리 시스템으로 소스코드의 중요한 변화를 기록하는 것입니다. 어떠한 문제가 발생했을 때 문제의 전후 상황을 파악할 수 있도록 도와주고, 과거의 상태로 쉽게 돌아갈 수 있게 합니다. 특히 백업, 협업에 쉬워 많이 사용되고 있습니다. 물론 Git이 모든 걸 해결해주진 않지만 도움을 주기 때문에 많이 사용하게 됩니다.


CMS는 주로 워드프레스를 사용해요~


CMS-Collage2.png

출처: wooraky's Minority Report



CMS(Contents Management System)는 콘텐츠 관리 시스템으로 웹사이트를 구성하고 있는 다양한 콘텐츠를 효율적으로 관리할 수 있도록 도와주는 시스템입니다. 콘텐츠를 손쉽게 생성, 배포, 관리할 수 있는 http 기반의 프레임워크*라고 생각하시면 됩니다. 웹 서버상에서 운용이 되고 다양한 방식의 기술적 적용이 가능합니다. 우리나라는 XE(Xpress Engine)가 CMS를 표방하고 있습니다. 또한 요즘은 워드프레스(Wordpress)를 많이 사용하는 추세입니다. CMS는 전 세계적으로 워드프레스, 드루팔(Drupal), 줌라(Joomla) 이 세 가지 툴이 많이 쓰입니다. 특히 워드프레스는 쉬운 사용법과 기능들을 통해  CMS 시장을 거의 장악하고 있습니다. 프로그래밍 언어와 같이 다양한 장단점이 있고 어떤 툴이 가장 좋다고는 할 수 없습니다. 다만 대표적으로 많이 쓰이는 CMS 세 가지 정도를 알고만 있어도 개발자의 이야기를 훨씬 많이 이해할 수 있습니다.


*프레임워크 - 소프트웨어 제작을 편리하게 할 수 있도록 뼈대인 클래스와 인터페이스를 제작한 것들을 미리 모아둔 것입니다. 개발자는 이 뼈대에 살을 붙이는 방식으로 어플리케이션을 완성 시킵니다. 개발 생산성이 증대되고, 유지보수가 비교적 편리하다는 장점이 있습니다.

단점은 익숙해지는 데에 시간이 소요되고 모든 상황을 커버할 수는 없다는 한계가 있다는 점입니다. 그렇기에 개발 프레임워크를 얼마나 쉽게 커스터마이징 할 수 있는지가 프레임워크의 우수성을 평가하는 기준이 되기도 합니다.



HTML / CSS / jQuery / JavaScript 를 사용해서 만들었고요~


HTML - HTML은 웹 브라우저를 통해 사용자에게 보이는 프론트 영역을 작성하기 위한 언어로 웹 문서 내용 작성에 집중 합니다. 웹 사이트의 뼈대가 되는 구조라고 볼 수 있습니다.

CSS - CSS는 HTML로 잡아놓은 뼈대에 다양한 스타일을 추가, 변경하여 웹사이트에 디자인을 부여하고 글자의 크기 모양 줄 간격 등을 제어할 수 있게 만들어주는 언어입니다. HTML로 만들어진 뼈대에 CSS로 디자인을 입힌다는 개념입니다.


14066284_10208305726855618_3819602411510392924_o.jpg

출처: 조성도 페이스북


JavaScript - 자바스크립트는 웹사이트에서 팝업창을 열거나 전화번호 또는 이메일 주소의 유효성을 체크하는 등의 기능적인 요소를 위해 사용되는 언어로 액션에 용이합니다. 즉 HTML로 만들어진 뼈대에 CSS로 디자인을 입히고 JavaScript로 움직임을 넣는 개념입니다.

jQuery - jQuery는 자주 사용되는 기능들을 쉽게 사용할 수 있도록 모아놓은 자바스크립트 라이브러리입니다. 쉽게 말해 자주 사용하는 자바스크립트의 복잡한 코드를 간소화해주는 모듈을 말합니다. 크로스 브라우징(웹브라우저의 종류에 상관없이 웹사이트의 레이아웃 위치나 모양이 동일하게 보여지도록 서비스 접근성을 향상시키는 기술)이 쉽게 해결됩니다.



반응형 웹으로 할까요, 적응형 웹으로 할까요?


반응형 웹과 적응형 웹도 웹 사이트 구축 시 빠질 수 없는 알아두어야 할 개념입니다. 해당 내용은 더 자세히 설명된 슬로워크 포스팅 글로 이동합니다.

반응형 웹, 정말 효과적일까?



구글지도API를 사용해서 찾아오시는 길에 넣을게요! API?


API - Application Programming Interface의 약자입니다.

각 단어를 나눠서 생각해보시면,

어플리케이션 : 응용프로그램, 즉 흔히 알고 계시는 앱(app)입니다.

프로그래밍 인터페이스 : 기계가 이해하기 쉽게 입출력이 데이터로 이루어지는 인터페이스 입니다.

즉, 웹 어플리케이션 개발에서 다른 서비스에 요청을 보내고 응답을 받기 위해 정의된 명세를 말합니다.


startup_img3.jpg

출처: 공공데이터포털



이렇게 프로그램 간 서로의 커뮤니케이션을 담당하는 기능이라고 이해하시면 됩니다.

최근 우체국의 우편번호 API, 구글과 네이버 다음지도 API등 유용한 API가 많아 홈페이지 구축 시 따로 추가 개발 대신 이러한 *오픈 API를 많이 사용하고 있습니다. 특히 하이브리드 앱이나 워드프레스로 웹사이트를 만들 때 더욱 유용하게 쓰이곤 합니다.


*오픈API - 말 그대로 오픈되어 있는 API, 즉 자사의 API를 개방하여 외부에서 쉽게 쓸 수 있도록 만든 것입니다. 오픈API는 포털의 개방성을 높이기 위한 기술적 기반/개방 응용프로그램 인터페이스입니다.


대표 오픈 API사이트 몇 가지를 소개해드립니다. 아래 사이트에 가보시면API가 어떤 용도로 쓰이시는지 조금 감이 오실 겁니다. 한 번쯤 구경해 보기에도 좋습니다.


서울시공공 오픈API

구글 디벨로퍼

페이스북 개발자

카카오 디벨로퍼



구글api.png

출처: 구글 디벨로퍼

기본적이지만 모르면 외계어처럼 들리는 개발 용어들에 대해 간단히 알아보았습니다. 사실 정말 많은 개발 용어가 존재하고 있고, 개발자마다 사용언어나 사용법이 조금씩 다릅니다. 그렇기에 가장 중요한 것은 내가 함께 일할 동료들의 대화에 귀 기울이며 많은 대화를 하는 것입니다. 이 글을 작성하면서 저 또한 같은 팀 개발자 동료들께 많은 검수를 받고, 조언을 얻었습니다. 그 과정에서 어떤 도구를 사용해 어떤 식으로 일을 하고 있는지도 더욱 자세히 알게 되었고, 커뮤니케이션의 중요성을 다시 한 번 깨닫게 되었습니다.


참조

공공데이터포털 테크엠






Posted by slowalk

슬로워크에서는 스티비라는 이메일마케팅 서비스를 만들고 있습니다. 스티비처럼 서비스를 새로 만들어나가는 단계에서 가장 많이 하는 일 중 하나는 서비스를 만들기 위한 화면을 설계하는 것입니다.



스티비를 만드는 과정은 대략 이렇습니다.



화면 설계의 산출물은 디자인과 개발의 밑바탕이 되는 것이기 때문에 화면 설계 단계에서는 디자이너, 개발자와의 소통이 중요합니다. 그 산출물 또한 디자이너, 개발자가 활용하기 쉬운 형태여야 합니다.


화면 설계의 산출물 중 하나는 와이어프레임(Wireframe)입니다. 와이어프레임이란 단순한 선으로 화면의 레이아웃을 표현하는 것을 말합니다.


더 읽기 > UI, UX 기획을 쉽게, 와이어프레임(Wireframe)



슬로워크에서는 원래 Moqups라는 도구를 사용하고 있었고 스티비 팀에서도 마찬가지였습니다. 하지만 몇 가지 아쉬운 점이 있었습니다.


  1. 제공되는 스텐실(Stencil)로는 부족합니다.
    Moqups에서는 스텐실이라는 이름으로 미리 제작된 UI 요소를 바로 끌어다 쓸 수 있도록 제공하는데, 제공되는 것만으로는 충족되지 않는 경우가 있었습니다. 일반적으로 사용되는 UI 요소는 대부분 제공하지만 오히려 필요하지 않는 것까지 포함되어 있다 보니 정작 필요한 걸 찾아 쓰는 데 오히려 불편함을 느끼기도 했습니다.

  2. 인터랙션을 표현하기 어렵습니다.
    화면 간 이동은 표현할 수 있지만 팝업이나 고정된 레이어 등 화면 단위가 아닌 인터랙션은 표현하기가 어려웠습니다. 물론 화면설계 단계에서 모든 인터랙션을 정확히 표현할 필요는 없지만 자주 사용되는 단순한 인터랙션을 매번 따로 설명해야하는 불편함이 있었습니다.


이런 아쉬운 점에도 불구하고 Moqups는 매우 훌륭한 도구임에는 틀림없습니다. 하지만 와이어프레임을 만드는 기획자가 디자인 툴을 사용하는 데 비교적 익숙한 편이었기 때문에 이런 아쉬움을 충족시켜줄 만한 새로운 도구를 찾아보기로 했습니다.


그래서 사용해보기로 한 것이 스케치(Sketch)와 인비전(Invision)입니다.





스케치는 UI 디자인에 최적화된 도구입니다. 빠르고 간편한 기능으로 포토샵을 대체하고 있습니다. 한국에서도 포토샵 대신 스케치를 사용하는 디자이너들이 점점 늘어나고 있는 추세입니다. 스티비 팀도 디자인 업무에 스케치를 사용하고 있습니다.



스케치 소개 영상



인비전은 화면 간 인터랙션을 표현하는 프로토타이핑 도구입니다. 디자인 된 화면을 불러와 어떤 사용자 행동에 대해 화면이 어떻게 전환되는지 정의할 수 있습니다. 그리고 이렇게 만든 결과물을 다른 사람과 공유하고 피드백을 받기에 용이합니다.



인비전 소개 영상



정확히 말하자면, 스케치와 인비전은 디자인 산출물을 만드는 과정에서 빠르고 효율적으로 프로토타이핑하고 그 결과물을 공유하기 위한 도구라고 볼 수 있습니다. 실제로 대부분 그렇게 활용하고 있기도 하죠. 하지만 와이어프레임 작업을 위한 도구로도 사용할 수 있다고 생각했고, 그래서 직접 활용해보기로 했습니다.



스케치와 인비전으로 만든 스티비 와이어프레임들



방법은 단순합니다. (사실 스케치와 인비전을 활용한 일반적인 프로토타이핑 과정과 다를 바 없습니다. 그 대상이 디자인 산출물이냐 와이어프레임이냐의 차이일 뿐입니다.)


  1. 스케치에서 아트보드(Artboard) 단위로 화면별 와이어프레임을 만듭니다.
  2. 스케치 파일을 인비전에서 불러와 화면 순서를 정리합니다.
  3. 인비전에서 화면 간 이동, 팝업, 스크롤 등 간단한 인터랙션을 정의하고 부연설명이 필요한 곳에 노트를 추가합니다.
  4. 인비전 링크를 동료들에게 공유하고 코멘트를 활용하여 의견을 주고받습니다. 필요하다면 사용자에게 디자인을 미리 공개하고 피드백을 받는 것도 가능합니다. (스티비는 새로운 에디터의 디자인 시안을 인비전으로 공개하여 피드백을 받았습니다.)



함께 사용하면 좋은 것


인비전 싱크(Invision Sync)

스케치 파일과 인비전 프로젝트를 동기화합니다. 스케치에서 수정한 내용이 인비전 프로젝트에 바로바로 반영됩니다.


크래프트(Craft)

인비전에서 만든 스케치의 플러그인입니다. 한 가지 요소를 그리드 형태의 배치로 복제해주고, 이미지 요소를 라이브러리 형태로 관리하고, 공개된 이미지를 무작위로 불러와 배치하고, 텍스트를 무작위로 입력해주는 등의 기능을 제공합니다.


와이어프레임 키트

공개된 와이어프레임 키트를 사용하면 스케치에서 UI 요소를 직접 그릴 필요가 없습니다. Teracy Wireframe, Bootstrap 3 GUI를 추천합니다.



다른 와이어프레임 도구와 비교했을 때 장점은 이렇습니다.


  1. 다양한 UI 요소를 표현할 수 있습니다.
  2. 디자인 산출물과 연속성이 생깁니다. 와이어프레임을 만들 때 사용한 레이어와 심볼의 이름과 구조를 디자인 작업 시 그대로 사용할 수 있습니다.
  3. 단순한 인터랙션은 글이나 말로 설명할 필요없이 직접 표현할 수 있습니다.
  4. 공유가 쉽고 피드백을 주고받기 쉽습니다.


단점도 있습니다.


  1. UI 요소를 수정할 때 시간이 오래 걸립니다. 다른 와이어프레임 도구는 제공되는 UI 요소에서 간단한 수정만으로도 메뉴의 수를 늘린다든가 버튼의 스타일을 변경할 수 있지만, 스케치에서는 직접 수정해야 합니다.
  2. 전체적인 화면 구조나 순서를 파악하기 어렵습니다. 직접 클릭하면 화면이 어떻게 이동하는지 확인할 수 있지만 전체적인 흐름을 확인할 수는 없습니다.


스티비팀에서도 화면설계 단계에서 스케치와 인비전을 활용해본 건 이번이 처음이었고 이번에 알게된 단점을 어떻게 보완할 수 있을지 고민하고 있습니다. 전체적인 화면 구조나 순서를 파악할 수 있도록 화면 단위의 시나리오를 표현한 별도의 아트보드를 만들고 꼭 필요한 부분만 인비전으로 옮기는 것이 대안이 될 수 있습니다. 어쩌면 아예 다른 도구를 사용하는 게 더 나을 수도 있겠죠.


스케치나 인비전이 정답이 아니듯이 어떤 도구로 서비스 전체의 기획 내용을 완벽히 전달할 수는 없습니다. 문서가 필요할 때도 있고 표가 필요할 때도 있고 순서도가 필요할 때도 있습니다. 기획의 본질은 커뮤니케이션입니다. 중요한 것은 상황에 따라 커뮤니케이션을 효율적으로 할 수 있는 도구를 선택적으로 사용하는 것입니다.



by 낙타 발자국

Posted by slowalk


아름다운가게(www.beautifulstore.org)는 지난 2016년 4월, 웹사이트를 새로운 웹사이트를 공개했습니다. 이번 웹사이트 리뉴얼(개편)은 슬로워크에서 진행하였는데요. 아름다운가게 웹사이트는 어떤 과정을 거쳐 새롭게 태어났을까요? 그 과정을 소개합니다.

아름다운가게 웹사이트 개편을 위해, 슬로워크와 아름다운가게의 담당자 간 사전 미팅을 여러 차례 진행했습니다. 기존의 웹사이트는 다양하고 많은 콘텐츠를 가지고 있었으나, 사업이 점점 커져감에 따라 메뉴 구조와 디자인 톤에 변화를 주고 사용성을 높여야 하는 상태였습니다. 이를 효과적으로 개선하고자 몇 차례 회의을 진행하였고, 시작 전 리뉴얼의 큰 방향성과 목표를 세웠습니다.



기존의 아름다운가게 홈페이지


아름다운가게 리뉴얼 방향성 및 목표

1. 메인 페이지에서 다양한 콘텐츠를 노출

2. 아름다운가게의 아이덴티티 컬러를 주로 사용하여 따뜻하고 친근한 느낌 전달

3. 각 패밀리 사이트들을 메인 사이트에서도 한눈에 볼 수 있도록 구성

4. 직관적인 디자인을 통해 웹사이트 사용성 제고

5. ‘매장찾기’가 가장 중요하므로, 쉽게 사용자들이 접근할 수 있도록 단독 메뉴화


이 방향을 다음과 같이 적용하여 리뉴얼 작업을 진행했습니다.



1. 메인 페이지에서 다양한 콘텐츠를 노출


대부분 웹사이트의 메인 페이지에서는 큰 사이즈의 메인 배너를 사용하는 것이 아직까지 일반적입니다. 하지만 아름다운가게는 콘텐츠를 다양하게 보여줄 방법을 고민했습니다. 이에 따라, 메인 배너 기능을 하는 요소와 다양한 콘텐츠를 함께 노출하기로 했습니다.


초기 기획안과 (moqups 툴 사용, 관련 내용 더 보기)  실제 운영 중인 현재 메인 페이지 비교


주로 글과 사진으로 이루어진 콘텐츠 중심의 배열로 메인 페이지의 기획안이 확정되었고, 이를 기반으로 다양한 디자인 시안이 오갔습니다. 그 결과 현재 아름다운가게의 메인 페이지는 콘텐츠 위주의 생동감 있는 메인 형태를 취하고 있습니다.



2. 아름다운가게의 아이덴티티 컬러를 주로 사용하여 따뜻하고 친근한 느낌 전달



아름다운가게의 CI는 잎들이 모여 꽃이 된 형태입니다. 이 형태는 나보다 우리를 먼저 생각하고 환경을 지키기 위한 다섯 가지 실천(기증, 되살림, 윤리적소비, 자원활동, 나눔활동)의 상징으로, 나눔과 순환을 소중히 여기는 그물코정신과 되살림정신을 내포하고 있습니다. 특별히 아름다운가게의 색상인 연두색(mild green)은 생명과 환경, 미래와 희망을 상징합니다. 이 메인 색상을 웹사이트에 전면적으로 통일되게 사용함으로써 아이덴티티를 확실하게 전달했습니다.


아름다운가게 주요 컬러가 사용된 아이콘 디자인 예시



3. 각 패밀리 사이트들을 메인 사이트에서도 한눈에 볼 수 있도록 구성



아름다운가게는 여러 패밀리 사이트를 가지고 있습니다. 그 중에서도 자원활동, 나눔교육, 사회적기업센터, 인재채용 페이지는 더욱 중요한데요. 해당 페이지들이 메인 사이트와 함께 한눈에 보이면서도 접근하기 쉽도록 초점을 맞추었습니다. 상단 바에 각 패밀리 사이트들로 이동할 수 있는 탭 구조를 만들었습니다. 이를 통해 메인 사이트와 패밀리 사이트 간에 이동이 자유롭게, 또한 언제든 메인 사이트로 돌아올 수 있게 되었습니다. 또한 다른 패밀리 사이트들은 셀렉트 박스를 통해 이동할 수 있게 상단에 패밀리 사이트들을 배치해 사용성을 높였습니다.



4.  직관적인 디자인을 통해 웹사이트 사용성 제고


아름다운가게 웹사이트 리뉴얼 작업에서 가장 중점적으로 고려한 포인트는 ‘사용성을 높인다’라는 점이었습니다. 다양하고 많은 정보를 가지고 있는 사이트이기 때문에 메뉴 구조부터 디자인까지 복잡하기보다는 심플하고 간결하게 혼란을 주지 않는 것이 중요했습니다. 사이트를 이용하는 연령대와 주 사용자를 고려해 최대한 직관적이고 쉽게 사이트를 이용할 수 있도록 하는 것입니다.


이에 따라, IA(Information Architecture)를 구성할 때 사용자들이 메뉴명만 보고도 어디로 이동할지 고민하지 않고 예측할 수 있도록 메뉴명을 조금씩 변경했습니다. 변경한 사업소개 하위 메뉴명으로, 아름다운가게의 사업을 한 페이지에서 볼 수 있는 ‘사업 한눈에 보기’와 연혁을 대신한 ‘걸어온 길’ 등이 있습니다.


또한, 각 하위 메뉴가 많은 상위 메뉴에는 게이트 페이지를 두어 각 메뉴들에 대한 설명과 어느 페이지로 이동해야 내가 원하는 정보를 얻을 수 있는지 간편히 볼 수 있게 하였습니다. 각 게이트 페이지에서는 하위 메뉴들의 간단한 소개와 사진을 통해 해당 메뉴를 사용자가 인지할 수 있습니다.



5. ‘매장찾기’가 가장 중요하므로, 쉽게 사용자들이 접근할 수 있도록 단독 메뉴화



아름다운가게에서 주요한 참여 방법은 매장에 기부하거나 매장에 방문해 물건을 구입하는 것입니다. 그렇기 때문에 ‘매장찾기’ 메뉴가 사이트 내에서 가장 중요한 역할을 하게 되었습니다. 따라서 매장찾기를 메뉴 중에서도 가장 우선순위에 두어 어떤 사용자가 보더라도 쉽게 눌러보고 확인할 수 있게 유도하였습니다. 또한, 현재 내 위치를 중심으로 가까운 매장을 찾을 수 있고, 검색을 통해서도 매장을 쉽게 찾을 수 있게 했습니다. 지도 위에 매장을 위치를 바로 보여주어 정확성 또한 높였습니다. 해당 매장에 대한 자세한 정보는 팝업 창으로 뜨고 공유, 인쇄하기도 간편하게 구성했습니다. 매장찾기 메뉴를 구성하면서 사용성 테스트를 함께 진행하여 사용자가 원하는 정보와 구성을 최적으로 찾을 수 있었습니다.



아름다운가게 웹사이트 리뉴얼은 킥오프미팅부터 메인 사이트 오픈까지 10개월의 기간이 걸렸습니다. 그만큼 완성도와 사용성에 중점을 두었고, 웹사이트 리뉴얼 이벤트 진행 당시 사용성이 높아졌다는 후기를 받으며 성공적으로 운영하고 있습니다. 리뉴얼한 아름다운가게 웹사이트, 지금 방문해보세요!


by 양 발자국


Posted by slowalk

UI/UX 기획을 할 때 사용하는 와이어프레임(Wireframe)에 대해 들어보셨나요?

웹 또는 앱 프로젝트를 진행할 때 필요한 과정 중 하나로 웹 페이지의 구조를 제안하기 위한 화면 설계도입니다. 즉 디자인이 들어가기 전 단계에서, 선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말합니다. 단순한 선과 회색박스들로 보일 수 있겠지만, 디자인의 컨셉, 고객의 요구사항, 콘텐츠들의 기능 요소를 모두 파악하여 전략적으로 설계되어야 하므로 중요도가 높습니다. 또한, 이 와이어프레임이 잘 갖춰져 있어야 디자이너와 웹 퍼블리셔, 개발자 그리고 클라이언트가 서로 원활히 소통할 수 있게 됩니다.



와이어 프레임이 실제 업무에서 사용되는 예시를 살펴보겠습니다. (*주관적인 흐름으로 개인적, 업체별로 다른 프로세스로 사용될 수 있습니다.) 

고객이 웹 페이지 제작을 요청합니다. 기획자는 고객의 요구사항을 파악하고 메인에 나올 콘텐츠와 기능 요소들을 정리합니다. 정리된 자료를 토대로 와이어프레임을 제작하게 됩니다. 디자인의 컨셉, 레이아웃, 각각 요소들의 상호작용과 인터렉션까지도 정해주게 됩니다. 이 와이어프레임을 통해 개발자는 사이트의 기능을 이해하고, 디자이너는 디자인 컨셉을 원활하게 잡을 수 있고, 클라이언트는 요구사항과 원하는 기능이 제대로 전달되었는지를 사전에 확인할 수 있습니다.



와이어프레임을 초기에는 파워포인트로 제작을 주로 했습니다. 하지만 앞서 설명한 것과 같이 화면 기획서에는 디자이너와 웹 퍼블리셔, 개발자, 클라이언트에게 필요한 다양한 정보가 들어가 있습니다. 그러나 파워포인트로 제작 할 시 조금 불편한 점이 있습니다. 파워포인트는 Document 사이즈이고 웹은 pixel 단위입니다. 그러므로 클라이언트 입장에서는 실제로 이 와이어프레임이 웹 페이지에서 어떠한 사이즈로 보일지 감을 잡기 어렵습니다. 또한, 실시간 공유와 협업이 쉽지 않습니다. 그렇게 되면 매끄러운 업무협의가 어려워지고 제작 시간 또한 늘어날 수 있습니다. 그렇기 때문에 최근 많이 사용되고 있는 다양한 와이어프레임툴을 사용해볼 것을 권합니다. 이러한 다양한 와이어프레임툴들은 실제 웹 페이지와의 1:1사이즈 대응, 실시간 공통편집 등의 다양한 기능을 제공하며 공유 또한 쉽습니다. 그렇다면 사용하기 쉬운 와이어프레임 제작 도구 몇 가지를 소개해드리겠습니다. 


1. Moqups (https://moqups.com)

슬로워크 웹 개발실에서 사용하고 있는 툴입니다. PNG,PDF로 저장이 가능하고 메일이나 URL로 여러 사람과 공유하기가 쉽습니다. 직관적인 UI로 누구나 손쉽게 사용할 수 있다는 장점이 있습니다. 



2. UXPin (http://www.uxpin.com)

반응형 웹 기획에 적합합니다. 동일 페이지를 해상도별 사이즈로 쉽게 만들 수 있고, 실제 html로 확인할 수 있습니다. 실시간 협업 또한 가능합니다.



3. Balsamiq (https://balsamiq.com)

손으로 스케치한듯한 캐쥬얼한 느낌을 주는 와이어프레임 도구입니다. 네트워크 연결 없이도 사용할 수 있다는 점이 있습니다.




4. Proto.Io (https://proto.io)

모바일 앱을 만들기에 적합한 툴입니다. 아이폰, 아이패드, 안드로이드, 안드로이드 타블렛 모두 가능합니다. QR코드를 통해 스마트폰에서 바로 확인하여 볼 수 있습니다.




5. Power mockup (http://www.powermockup.com/)

파워 목업은 많은 기획자들이 사용하는 툴입니다. 다운로드를 받으면 파워포인트 내에 설치되어 손쉽게 와이어프레임과 문서작성을 동시에 할 수 있습니다. 사용성이 매우 간편하고 스텐실 종류가 다양해 초보자도 쓰기가 편하다는 장점이 있습니다. 





이 밖에도 다양하고 손쉽게 쓸 수 있는 와이어프레임 툴이 많습니다. 가장 좋은 것은 직접 사용해 보고 자신의 사용 목적에 맞고 편한 와이어프레임 툴을 선택하는 것이 좋습니다. 

참조사이트 <http://likelink.co.kr/20702>를 확인하시면 더 많은 와이어프레임 툴에 대해 소개하고 있습니다. 

UIUX기획, 손쉽게 와이어프레임 툴로 시작해보세요.



by 양 발자국




Posted by slowalk