신입 기획자에게 도움을 준 2022 연말결산
웹기반 서비스 기획의 도구와 서비스
기획 경력 어언 1년. 기획의 걸음마 떼는 것을 도와준 수많은 도구와 서비스. 이제는 습관처럼 찾게 되는 것들
환상의 파트너상. 개발자 모드
01. 기억하자 F12, 맥은 command + option + 'I'
기획 일을 하기 전에는 실수로 F12를 누르고는 '에구머니나! 이게 뭐야?!' 하며 서둘러 껐던 개발자 모드. 셜록에게 왓슨이 있듯이, 기획자에게는 개발자 도구라는 영원한 파트너가 있습니다.
브라우저로 접근 가능한 웹 서비스라면 개발자 도구로 구성요소를 확인할 수 있습니다. 현재는 주로 개발자 도구를 검수할 때 사용하고 있는데요. 특히, 모바일의 경우 최소 320px에서 모든 요소가 제대로 나오는지, 텍스트가 영역을 초과할 때 줄 바꿈이나 말 줄임 처리가 되는지, 화면 너비 축소 및 확대에 따라 요소가 적절하게 처리되는지 등등을 검수할 수 있습니다.
지금도 어쩌다 한 번씩 타사 서비스를 개발자 모드로 보며 구성요소가 어떻게 되어있는지 데이터가 어떤 식으로 보이는지 등을 참고하고 있는데요. 기획 업무 시작한 지 얼마 안 되었을 때도 이렇게 서비스의 구성 요소를 파악하니 많이 도움이 되더라고요. 처음부터 개발자 모드의 모든 기능을 이용하려고 하기보다는 '아 이런 기능도 있구나~' 대략적으로만 알아두면 좋을 것 같습니다 :)
올해의 장학상. W3schools & Material Design
02. 공부하지 않는 자 기획도 마라
개발자 모드에서 여러 요소들을 파악하고 검수를 제대로 하기 위해서는 html과 css 요소를 잘 알고 있는 것이 좋습니다. W3schools https://www.w3schools.com/html/default.asp은 관련 구성항목들에 대해 알기 쉽게 정리되어 있고, 또 직접 실습을 해볼 수도 있습니다.
제가 업무 하면서 스크롤업다운에 따라 상단바의 일부가 숨김/표시되는 기능을 기획하였는데, 실제로 너무 번잡해 보일까 싶어 직접 html로 만들어 보았던 적이 있습니다. 디자인이나 개발 수정 요청할 때도 유용하게 활용할 수 있기에 공부하기에는 적격인 것 같습니다.
그리고 더불어서 같이 보면 좋을 서비스는 구글의 머터리얼 디자인 https://m3.material.io/components입니다. 아마 스토리보드 작업할 때 난감한 것 중 하나가 수많은 UI 요소와 용어일 텐데요. 머터리얼 디자인에서는 어떤 UI 요소가 있는지, 또 적합한 디자인과 부적합한 디자인은 무엇인지 쉽게 파악할 수 있습니다. 물론 구글의 디자인이기 때문에 구글?스럽습니다. 그래서 어디까지나 참고용으로 보시고, 또 다른 UI 관련 서적이나 자료를 참고하시면 좋을 듯합니다.
기다리는 자에게 복 있을 상. 캐시 지우기
03. 재요청 전에 진짜 최최최최종 확인
제가 ctrl c, v, z, s 만큼이나 많이 쓴 버튼이 ctrl F5입니다. 디자인이나 개발 수정을 요청한 후에 수정 완료 회신을 받아도 약간의 여유를 가지는 것이 좋습니다.
몇 번의 ctrl+F5 또는 ctrl+R, 그래도 안 될 경우 캐시 지우기를 진행해 보세요. 모바일의 경우 강제 종료를 해보고 그래도 반영이 안 될 경우, 최신 버전이 맞는지 확인하고 캐시 삭제를 진행해 보세요. 괜히 성급하게 수정 안 되었다고 바로 재요청하기보다는 아주 조금 더 기다려보세요. 그리고 각종 사이트에서 로그아웃되어도 당황하지 마세요. 캐시를 지웠으니까요.
이 시대의 6시 내 고향 상. mhtml
04. 웹에서도 통하는 ctrl S
프로젝트를 진행하게 된다면, 프로젝트 종료 전 히스토리를 남겨두는 것이 중요합니다. 추후에 유사한 프로젝트를 진행할 때 참고할 수도 있고, 진행했던 프로젝트에 피드백을 남기며 부족했던 부분을 다시 한번 체크할 수도 있습니다.
캡처하여 이미지를 저장하는 것도 좋지만, 서비스의 동작이나 애니메이션을 확인할 수 없기 때문에 정보의 획득이 제한적일 수밖에 없습니다. 그럴 때는 ctrl+S를 눌러 단일파일로 웹 페이지를 저장하면 됩니다. 브라우저로 해당 파일을 열면 저장된 웹 화면을 확인할 수 있습니다. 물론 모든 기능이 100% 동작되지는 않고 맥에서 저장하면 가끔 폰트가 깨진다는 점도 있기 때문에 이미지도 같이 저장해 놓는 것이 좋습니다.
트렌드세터상. 즐겨찾기 사이트
05. 기획/IT트렌드/콘텐츠/플랫폼/미디어/디자인/UIUX 종합세트
UIUX나 IT트렌드뿐만 아니라 광범위하게 이런저런 분야의 정보를 접하는 것이 여러모로 도움이 되어 첨부링크 외에도 많은 사이트를 즐겨찾기 해놓고 수시로 보고 있는데요. 아직까지는 깊이 있게 한 분야만 파는 것보다는 다양하게 여러 분야를 섭렵하는 게 확실히 더 재밌는 것 같습니다 :)
요즘 IT와 서핏 그리고 오픈애즈는 커리어 콘텐츠를 볼 수 있다는 성격은 유사하나 오픈애즈는 마케팅 관련 글이 많기 때문에 이 점 참고해서 이용하시면 될 것 같습니다. 팩플은 스타트업을 포함한 혁신 기업에 관련된 최신 소식을 접할 수 있습니다. 콘텐츠 진흥원에서는 첨부링크 외에도 다양한 보고서와 데이터가 제공되니 메뉴 둘러보시면 더 많은 정보를 얻으실 수 있을 겁니다.
다들 이미 아실 정보일 수도 있겠지만, 그럼에도 도움이 되길 바라며.
2023년에는 더 유익하고 재밌는 기획으로 뵙겠습니다 :)
/ 24.07.29 최근 글과의 톤을 맞추기 위해 쓸데없는 말은 지우고, 레이아웃도 수정했습니다.
/ 썸네일 : 미드저니
