<figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/0.jpg"></figure><p style="text-align:justify;">웹사이트, 서비스 앱, 그리고 콘텐츠 기획을 위해 어떤 툴을 사용하는 것이 작업 효율성을 높일 수 있을까요? 작업을 빠르게 하려면 첫 번째 무료 서비스가 좋습니다. 무료 서비스는 결제 프로세스 없이 빠르게 이용할 수 있죠. 두 번째 로그인 회원가입 프로세스가 간단한 SNS 연동 로그인과 자동 로그인이 이용 step을 줄일 수 있습니다. 로그인과 회원가입 측면에서 접근성이 뛰어납니다. 그 밖에도 기획 문서 템플릿을 직접 제공받아 나의 스타일대로 변경하여 사용하는 것도 기획 작업을 빠르게 만듭니다. </p><p style="text-align:justify;"> </p><p style="text-align:justify;">이번 편에는 업무를 용이하게 만드는 웹사이트 정보를 드리려 합니다. 세미나 혹은 강의를 하다 보면 다른 기획자들은 어떤 웹사이트를 참고하고 활용하는지 궁금해하시는 분들이 꼭 계시더라고요.</p><p style="text-align:justify;"> </p><div class="page-break" style="page-break-after:always;"><span style="display:none;"> </span></div><h4 style="text-align:justify;"><i><strong>작업 들어가기 전에 꾸물거리게 되나요?</strong></i></h4><h4 style="text-align:justify;"><i><strong>잠깐만 웹 서칭 후 시작하시죠!</strong></i></h4><figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/1.jpg"></figure><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>1. awwwards #웹 밴치마킹</strong></h3><p style="text-align:justify;"><a href="https://www.awwwards.com/">https://www.awwwards.com/</a></p><p style="text-align:justify;">이 웹사이트는 꽤 오래된 웹사이트로 최신 PC 웹사이트 디자인이나 UI 스타일을 확인할 수 있습니다. 본격적으로 기획 업무 하기 전에 잠시 방문하기에 좋은 곳입니다. 다양한 웹사이트를 구경하며 가볍게 워밍업 하시기 바랍니다.</p><figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/2.jpg"></figure><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>2. icunow. #지금 써보러 갑니다</strong></h3><p style="text-align:justify;"><a href="http://icunow.co.kr/">http://icunow.co.kr/</a></p><p style="text-align:justify;">우연히 웹 서칭을 하다 알게 된 웹사이트로 기획자들이 참고하기에 좋은 웹사이트입니다. 디자인, 서비스 기획 가이드북, 벤치마킹할 만한 케이스 스터디 등 여러 칼럼들이 있는데 비교적 실제 필드 이야기와 관련되어 있는 가이드라 다른 분들이 어떻게 기획하는지 참고할 만한 웹사이트입니다. 본격적으로 화면 기획서, 기획 제안서, 기획 리서치 등등... 자꾸만 작업을 미루고 싶고 다른 기획자분들은 어떤 생각을 가지고 리뷰하는지 궁금한 분들은 주저 없이 클릭해보시길 바라겠습니다.</p><figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/3.jpg"></figure><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>3. mediaqueri #반응형 웹</strong></h3><p style="text-align:justify;"><a href="https://mediaqueri.es/">https://mediaqueri.es/</a></p><p style="text-align:justify;">반응형 웹으로 기획해야 하는 분들은 참고하시면 좋을 웹사이트입니다. 반응형 웹으로 제작된다면 크게 PC 웹사이트, 태블릿 웹, 그리고 모바일 웹 등으로 규격을 나눌 수 있습니다. (*필드에서 태블릿은 제작 안 하는 경우가 더 많죠) 해당 웹사이트에서 변형되는 모둘이나 UI 레이아웃을 확인해보시면서 감을 익혀 보실 것을 추천드립니다. (*이것 외에도 구글 크롬을 브라우징하면 F5를 클릭하셔서 여러 기기의 사이즈로 세밀하게 테스트해 보는 방법도 있습니다)</p><figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/4.jpg"></figure><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>4. uxarchive #UI 벤치마킹</strong></h3><p style="text-align:justify;"><a href="https://uxarchive.com/appFlowName/Translating/1">https://uxarchive.com/appFlowName/Translating/1</a></p><p style="text-align:justify;">UX아카이브는 여러 UI 레이아웃을 참고하기에 좋은 웹사이트입니다. 왼쪽 LNB의 카테고리를 선택하면, 원하는 특정 UI의 Flow에 따라 각각의 화면 디자인과 UI를 확인할 수 있습니다. 회원가입과 로그인을 해야 접속이 가능한 점이 번거로울 수 있습니다. UI화면 기획서를 작성하기 전, 벤치마킹이 필요하고 동기 부여가 필요하신 분들은 접속해보세요!</p><figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/5.jpg"></figure><div class="page-break" style="page-break-after:always;"><span style="display:none;"> </span></div><h4 style="text-align:justify;"><i><strong>자, 이제 숨 한 번 고르고 작업 들어갑니다!</strong></i></h4><figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/6.jpg"></figure><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>5. PowerMockup #UI mockup</strong></h3><p style="text-align:justify;"><a href="https://www.powermockup.com/">https://www.powermockup.com/</a></p><p style="text-align:justify;">파워 목업은 UI의 다양한 요소를 디자인 없이 바로 사용할 수 있도록 돕는 작업 툴입니다. 피그마 같은 툴에서 디자인과 기획을 함께 하는 경우 필요가 없겠지만 많은 작업장에서 아직도 파워포인트로 커뮤니케이션하는 케이스가 대부분입니다. (*해당 툴은 파워포인트에서만 작동 가능합니다.) 1회 설치하시면 무료로도 사용이 가능하지만, 사실 유료로 받으셔야 활용할 수 있는 UI 요소가 많습니다. (*시장의 대부분의 작업 툴이 그렇듯 팀으로, 유료 멤버십으로 사용하실 때 가격이 비교적 저렴합니다) 다운로드해보시면, 파워포인트 위 리본 메뉴에 파워 목업 툴 메뉴가 1개 추가되고, 선택 시 하단 우측 패널에 UI 종류 별로 카테고리화 되어 노출됨을 확인하실 수 있습니다. 작업 편의성 때문에 사용하긴 하지만 UI 요소들이 디자인면에서 크게 어필되지 않았습니다.</p><figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/7.jpg"></figure><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>6. miricanvas #디자인 템플릿</strong></h3><p style="text-align:justify;"><a href="https://www.miricanvas.com/">https://www.miricanvas.com/</a></p><p style="text-align:justify;">미리 캔버스는 콘텐츠를 제작할 때 비교적 많은 템플릿을 제공하고, 저작권 이슈가 없어 자주 방문하는 웹사이트입니다. 교육, 카드 뉴스, 명함, 배너 등등 수많은 케이스에 맞춘 템플릿을 제공하고 있습니다. 경쟁 타사보다 차별점은 첫 번째 워터마크를 넣지 않아도 되는 점, 두 번째 템플릿에 들어가는 디자인 품질이 비교적 좋다는 점, 그리고 마지막으로 디자인 폰트나 일러스트가 한국인 무드에 맞다는 점 같습니다. 단점으로 생각되는 부분은 우선 제공하는 템플릿의 카테고리가 늘고 매우 상세하게 카테고리화 되어(예: 배너 가로형, 배너 세로형…) 검색하지 않으면 직관적으로 선택하기 어렵습니다. 따라서, 템플릿 디자인 페이지로 진입하기 어려운 부분입니다. 두 번째, 데이터 로딩 속도가 매우 느려 기다리는 시간이 많이 걸린다는 것입니다. 마지막으로, 템플릿이 더 다양해지고 튜토리얼 제공이 풍부해지면 좋을 것 같습니다.</p><figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/8.jpg"></figure><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>7. slidesgo #문서 템플릿</strong></h3><p style="text-align:justify;"><a href="https://slidesgo.com/">https://slidesgo.com/</a></p><p style="text-align:justify;">여러 기획 문서 템플릿을 제공받기에 용이한 웹사이트입니다. 구글 슬라이드와 파워 포인트 형식으로 파일 다운로드가 가능합니다. 메뉴 구성은 교육용, 비즈니스, 마케팅, 인포그래픽용, 디자인 스타일대로 분류되어있습니다. 그밖에 리스트는 칼라 별, 유료/무료 템플릿, 최신순 인기순대로 소팅하여 확인하실 수 있습니다. 다소 해외 입맛에 맞는 템플릿을 제공하고 있지만 무료로 사용 가능하다는 점이 매력적입니다.</p><figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/9.jpg"></figure><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>8. pexels #무료 이미지</strong></h3><p style="text-align:justify;"><a href="https://www.pexels.com/search/korean/">https://www.pexels.com/search/korean/</a></p><p style="text-align:justify;">무료로 이미지를 사용해도 되고 자동 로그인이 가능하도록 북마크로 지정해둔 채 클릭만 해서 웹사이트에 접속하면 빠르게 다운로드가 가능합니다. 무료라 이미지 제공자에게 간혹 “좋아요”를 누르기도 하는데요 데이터 로딩도 많이 걸리지 않고 비교적 속도가 빨라 자주 이용하는 웹사이트입니다. 이미지는 저작권 이슈도 있기 때문에 예민할 수밖에 없을 텐데요. 블로그를 검색해서 무료 이미지 사이트를 찾고 실제 접속해보니 실제로는 유료이거나 복잡한 접속 과정이 있는 경우가 있더라고요. 모든 걱정 없이 쓸 수 있어 매우 편리한 웹사이트이지만, 다소 미국인이나 영국인들 위주의 인물 사진이 많고, 감성적인 사진에 편향되어 있습니다. 게티나 구글 이미지보다는 사진 제공의 다양성이 아쉽습니다.</p><figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/10.jpg"></figure><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>9. flaticon #아이콘</strong></h3><p style="text-align:justify;"><a href="https://www.flaticon.com/">https://www.flaticon.com/</a></p><p style="text-align:justify;">플랫 아이콘은 7년 전에도 존재했던 아이콘 제공 웹사이트입니다. 당시와 지금을 견주어 보면, 흑백 아이콘에서 컬러풀한 일러스트, 아이콘 등으로 자료가 더 풍부해지고 프리미엄 멤버십, 즉 유료 회원만 다운로드할 수 있는 제한도 생겨났습니다. 무료가 좋으신 분들은 PNG로 무료 다운로드하셔서 기획서에 활용하시면 좋습니다. 다만, 사람들의 주관적이라고 일컫는 미의 의식이 비교적 보편적인 것인지 몰라도 유료 상품들이 더 이뻐 보이는 건 어쩔 수 없겠죠?</p><figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/11.jpg"></figure><p style="text-align:justify;">UI기획서 같은 화면 기획을 할 때에, 기획자는 아이콘을 굳이 넣어주지 않고(*물론 찾아서 넣어주면 더 성의 있어 보입니다만!) “I”표시로만 작성해도 되기 때문에, 화면 기획서 보다 제안서에 더 사용하게 됩니다.</p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>10. allinpdf #지원 문서 편집</strong></h3><p style="text-align:justify;"><a href="https://allinpdf.com/">https://allinpdf.com/</a></p><p style="text-align:justify;">원래 저는 “Small pdf”라는 툴을 사용하고 있었습니다. 이 툴도 제한에 비교적 자유로웠던 예전과 달리 최근에는 1일 2회라는 제한이 생겨버려 사용하기에 귀찮음이 생겨버렸습니다. Word나 PPT 문서 작업하고, 파일명 수정하고, 파일 닫고 이메일로 송부하기 전에 빠진 것 하나가 생각나서 수정해야 하는 경우가 많죠. 1일 2회라는 제한은 너무 냉정하게 느껴집니다. 그래서 찾게 된 무료 툴입니다. Small pdf와 마찬가지로 문서 합치기, 자료 파일 형식 호환하기 등 다양한 기능을 제공 중이며, small pdf와 비교해봤을 때 불편함은 잘 모르겠더군요.</p><figure class="image image_resized" style="width:100%;"><img src="https://www.wishket.com/media/news/723/12.jpg"></figure><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>Wrap-up</strong></h3><p style="text-align:justify;">기획하기 전, 두뇌 회전을 돕고 기획 작업의 편의성을 돕는 웹사이트 10개를 소개해드렸습니다. 이번 편의 웹사이트는 범용적으로 추천드렸기 때문에 추후 이어지는 편을 통해 UX 디자이너, 그래픽 디자이너가 참고하면 좋을 웹사이트를 공유드리기로 하겠습니다.</p><p style="margin-left:auto;text-align:justify;"> </p><p style="text-align:center;"><span style="color:#999999;">©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.</span></p>
