NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

기획

알아두면 좋을 IT관련 웹사이트들: 3부, 기획자의 웹사이트 10개

웹사이트, 서비스 앱, 그리고 콘텐츠 기획을 위해 어떤 툴을 사용하는 것이 작업 효율성을 높일 수 있을까요? 작업을 빠르게 하려면 첫 번째 무료 서비스가 좋습니다. 무료 서비스는 결제 프로세스 없이 빠르게 이용할 수 있죠. 두 번째 로그인 회원가입 프로세스가 간단한 SNS 연동 로그인과 자동 로그인이 이용 step을 줄일 수 있습니다. 로그인과 회원가입 측면에서 접근성이 뛰어납니다. 그 밖에도 기획 문서 탬플릿을 직접 제공받아 나의 스타일대로 변경하여 사용하는 것도 기획 작업을 빠르게 만듭니다. 

 

이번 편에는 업무를 용이하게 만드는 웹사이트 정보를 드리려 합니다. 세미나 혹은 강의를 하다 보면 다른 기획자들은 어떤 웹사이트를 참고하고 활용하는지 궁금해하시는 분들이 꼭 계시더라고요.

 

 

작업 들어가기 전에 꾸물거리게 되나요?

잠깐만 웹 서칭 후 시작하시죠!

 

1. awwwards #웹 밴치마킹

https://www.awwwards.com/

이 웹사이트, 꽤 오래된 웹사이트로, 최신 PC 웹사이트 디자인이나 UI 스타일을 확인할 수 있습니다. 본격적으로 기획 업무 하기 전에 잠시 방문하기에 좋은 곳입니다. 다양한 웹사이트를 구경하며 가볍게 워밍업 하시기 바랍니다.

 

2. icunow. #지금 써보러 갑니다

http://icunow.co.kr/

우연히 웹 서칭을 하다 알게 된 웹사이트로 기획자들이 참고하기에 좋은 웹사이트입니다. 디자인, 서비스 기획자 북, 벤치마킹할 만한 케이스 스터디 등 여러 칼럼들이 있는데 비교적 실제 필드 이야기와 관련되어 있는 가이드라 다른 분들이 어떻게 기획하는지 참고할 만한 웹사이트입니다. 본격적으로 화면 기획서, 기획 제안서, 기획 리서치 등등... 자꾸만 작업을 미루고 싶고 다른 기획자분들은 어떤 생각을 가지고 리뷰하는지 궁금한 분들은 주저 없이 클릭해보시길 바라겠습니다.

 

3. mediaqueri #반응형 웹

https://mediaqueri.es/

반응형 웹으로 기획해야 하는 분들은 참고하시면 좋을 웹사이트입니다. 반응형 웹으로 제작된다면 크게 PC 웹사이트, 태블릿 웹, 그리고 모바일 웹 등으로 규격을 나눌 수 있습니다. (*필드에서 태블릿은 제작 안 하는 경우가 더 많죠) 해당 웹사이트에서 변형되는 모둘이나 UI 레이아웃을 확인해보시면서 감을 익혀 보실 것을 추천드립니다. (*이것 외에도 구글 크롬을 브라우징하면 F5를 클릭하셔서 여러 기기의 사이즈로 세밀하게 테스트해 보는 방법도 있습니다)

 

4. uxarchive #UI 벤치마킹

https://uxarchive.com/appFlowName/Translating/1

UX아카이브는 여러 UI 레이아웃을 참고하기에 좋은 웹사이트입니다. 왼쪽 LNB의 카테고리를 선택하면, 원하는 특정 UI의 Flow에 따라 각 각의 화면 디자인과 UI를 확인할 수 있습니다. 회원가입과 로그인을 해야 접속이 가능한 점이 번거로울 수 있습니다. UI화면 기획서를 작성하기 전, 벤치마킹이 필요하고 동기 부여가 필요하신 분들은 접속해보세요!

 

자, 이제 숨 한 번 고르고 작업 들어갑니다!

 

5. PowerMockup #UI mockup

https://www.powermockup.com/

파워 목업은 UI의 다양한 요소를 디자인 없이 바로 사용할 수 있도록 돕는 작업 툴입니다. 피그마 같은 툴에서 디자인과 기획을 함께 하는 경우 필요가 없겠지만 많은 작업장에서 아직도 파워포인트로 커뮤니케이션하는 케이스가 대부분입니다. (*해당 툴은 파워포인트에서만 작동 가능합니다.) 1회 설치하시면 무료로도 사용이 가능하지만, 사실 유료로 받으셔야 활용할 수 있는 UI 요소가 많습니다. (*시장의 대부분의 작업 툴이 그렇듯 팀으로, 유료 멤버십으로 사용하실 때 가격이 비교적 저렴합니다) 다운로드해보시면, 파워포인트 위 리본 메뉴에 파워 목업 툴 메뉴가 1개 추가되고, 선택 시 하단 우측 패널에 UI 종류 별로 카테고리화 되어 노출됨을 확인하실 수 있습니다. 작업 편의성 때문에 사용하긴 하지만 UI 요소들이 디자인면에서 크게 어필되지 않았습니다.

 

6. miricanvas #디자인 탬플릿

https://www.miricanvas.com/

미리 캔버스는 콘텐츠를 제작할 때 비교적 많은 탬플릿을 제공하고, 저작권 이슈가 없어 자주 방문하는 웹사이트입니다. 교육, 카드 뉴스, 명함, 배너 등등 수많은 케이스에 맞춘 탬플릿을 제공하고 있습니다. 경쟁 타사보다 차별점은 첫 번째 워터마크를 넣지 않아도 되는 점, 두 번째 탬플릿에 들어가는 디자인 품질이 비교적 좋다는 점, 그리고 마지막으로 디자인 폰트나 일러스트가 한국인 무드에 맞다는 점 같습니다. 단점으로 생각되는 부분은 우선 제공하는 탬플릿의 카테고리가 늘고 매우 상세하게 카테고리화 되어(예: 배너 가로형, 배너 세로형…) 검색하지 않으면 직관적으로 선택하기 어렵습니다. 따라서, 탬플릿 디자인 페이지로 진입하기 어려운 부분입니다. 두 번째, 데이터 로딩 속도가 매우 느려 기다리는 시간이 많이 걸린다는 것입니다. 마지막으로, 탬플릿이 더 다양해지고 튜토리얼 제공이 풍부해지면 좋을 것 같습니다.

 

7. slidesgo #문서 탬플릿

https://slidesgo.com/

여러 기획 문서 탬플릿을 제공받기에 용이한 웹사이트입니다. 구글 슬라이드와 파워 포인트 형식으로 파일 다운로드가 가능합니다. 메뉴 구성은 교육용, 비즈니스, 마케팅, 인포그래픽용, 디자인 스타일대로 분류되어있습니다. 그밖에 리스트는 칼라 별, 유료/무료 탬플릿, 최신순 인기순대로 소팅하여 확인하실 수 있습니다. 다소 해외 입맛에 맞는 탬플릿을 제공하고 있지만 무료로 사용 가능하다는 점이 매력적입니다.

 

8. pexels #무료 이미지

https://www.pexels.com/search/korean/

무료로 이미지를 사용해도 되고 자동 로그인이 가능하도록 북마크로 지정해둔 채 클릭만 해서 웹사이트에 접속하면 빠르게 다운로드가 가능합니다. 무료라 이미지 제공자에게 간혹 “좋아요”를 누르기도 하는데요 데이터 로딩도 많이 걸리지 않고 비교적 속도가 빨라 자주 이용하는 웹사이트입니다. 이미지는 저작권 이슈도 있기 때문에 예민할 수밖에 없을 텐데요. 블로그를 검색해서 무료 이미지 사이트를 찾고 실제 접속해보니 실제로는 유료이거나 복잡한 접속 과정이 있는 경우가 있더라고요. 모든 걱정 없이 쓸 수 있어 매우 편리한 웹사이트이지만, 다소 미국인이나 영국인들 위주의 인물 사진이 많고, 감성적인 사진에 편향되어 있습니다. 게티나 구글 이미지보다는 사진 제공의 다양성이 아쉽습니다.

 

9. flaticon #아이콘

https://www.flaticon.com/

플랫 아이콘은 7년 전에도 존재했던 아이콘 제공 웹사이트입니다. 당시와 지금을 견주어 보면, 흑백 아이콘에서 컬러풀한 일러스트, 아이콘 등으로 자료가 더 풍부해지고 프리미엄 멤버십, 즉 유료 회원만 다운로드할 수 있는 제한도 생겨났습니다. 무료가 좋으신 분들은 PNG로 무료 다운로드하셔서 기획서에 활용하시면 좋습니다. 다만, 사람들의 주관적이라고 일컫는 미의 의식이 비교적 보편적인 것인지 몰라도 유료 상품들이 더 이뻐 보이는 건 어쩔 수 없겠죠?

UI기획서 같은 화면 기획을 할 때에, 기획자는 아이콘을 굳이 넣어주지 않고(*물론 찾아서 넣어주면 더 성의 있어 보입니다만!) “I”표시로만 작성해도 되기 때문에, 화면 기획서 보다 제안서에 더 사용하게 됩니다.

 

10. allinpdf #지원 문서 편집

https://allinpdf.com/

원래 저는 “Small pdf”라는 툴을 사용하고 있었습니다. 이 툴도 제한에 비교적 자유로웠던 예전과 달리 최근에는 1일 2회라는 제한이 생겨버려 사용하기에 귀찮음이 생겨버렸습니다. Word나 PPT 문서 작업하고, 파일명 수정하고, 파일 닫고 이메일로 송부하기 전에 빠진 것 하나가 생각나서 수정해야 하는 경우가 많죠. 1일 2회라는 제한은 너무 냉정하게 느껴집니다. 그래서 찾게 된 무료 툴입니다. Small pdf와 마찬가지로 문서 합치기, 자료 파일 형식 호환하기 등 다양한 기능을 제공 중이며, small pdf와 비교해봤을 때 불편함은 잘 모르겠더군요.

 

Wrap-up

기획하기 전, 두뇌 회전을 돕고 기획 작업의 편의성을 돕는 웹사이트 10개를 소개해드렸습니다. 이번 편의 웹사이트는 범용적으로 추천드렸기 때문에 추후 이어지는 편을 통해 UX 디자이너, 그래픽 디자이너가 참고하면 좋을 웹사이트를 공유드리기로 하겠습니다.

댓글 0

NINA.C

UX를 전공하고 UXUI, 서비스 기획자, 강사, 작가 활동을 하는 NINA입니다. 대중성 있는 UX를 연구하며 디자인 비즈니스를 구상하고 있습니다.

당신이 사인하기 전에 알아야 할 것들: ②일을 맡길 때

아웃소싱

당신이 사인하기 전에 알아야 할 것들: ①일을 할 때

아웃소싱

2022년 주목해야 할 IT 키워드 10가지

기획

비정규 직원과 커뮤니케이션 툴로 협업하는 방법

아웃소싱

UX측면에서 잘 만들어진 B2C사례 9부, 텍스트 콘텐츠 플랫폼의 UX는?

디자인

초보자를 위한 스토리보드 작성 팁

기획

외주 잘 맡기는 방법 3부: 외부 업체와 Co-working 하기

아웃소싱

ERP 중심의 물류전산화 2부, ERP 제품 집중 분석

프로덕트

UX측면에서 잘 만들어진 B2C사례: 8부, 피그마와 캔바

디자인

UX측면에서 잘 만들어진 B2C사례: 7부, 노인을 위한 UX는 있다

디자인

UX측면에서 잘 만들어진 B2C사례: 6부, 테슬라의 경험디자인

디자인

외주 잘 맡기는 방법 2부: 분쟁과 리스크를 줄이는 9가지 팁

아웃소싱

기획 용어 10부, JD로 보는 직무 개념 및 용어

기획

기획 용어 9부, AI 음성인식 기획 기초 용어

기획

ERP 중심의 물류 전산화 1부, ERP 가볍게 다가가기

프로덕트

기획 용어 8부, 팝업과 오류 유형 정리

기획

기획 용어 7부, 메뉴 혹은 내비게이션 개념 정리

기획

기획 용어 6부: 시작하기 프로세스 기초개념 알기

기획

외주 잘 맡기는 방법 1부: 외주 계약 전에 꼭 보세요!

아웃소싱

코로나로 인해 고용 및 비즈니스 환경은 어떻게 변화하고 있을까?

아웃소싱

UX측면에서 잘 만들어진 B2C사례: 5부, 교통서비스와 길안내

디자인

화면 정의와 기능 정의 3부, 유용한 상세 가이드 꿀팁

기획

기획 용어 5부: 인터랙션/제스처 알아가기

기획

‘아웃소싱’ 하기 전에 꼭 알아야 할 것들

아웃소싱

어디까지 왔나요? AI 적용사례

개발

프리랜서가 겪는 문제와 해결방안

프리랜싱

알아두면 좋을 IT관련 웹사이트들: 5부, IT 채용 정보 웹사이트

아웃소싱

화면 정의와 기능 정의 2부, 기획자를 위한 디스크립션 작성 원칙

기획

UX측면에서 잘 만들어진 B2C사례: 4부, 나이키 러닝 NRC & Fitbit

디자인

알아두면 좋을 IT관련 웹사이트들: 4부, UX디자이너가 포트폴리오를 만들 때

디자인

기획 용어 4부: 검색 기획/설계를 위한 기본 용어 알고 가기

기획

왜 아웃소싱인가?

아웃소싱

UX측면에서 잘 만들어진 B2C사례: 3부, 카카오 모빌리티와 이브이패스

디자인

화면 정의와 기능 정의 1부, 기획자를 위한 화면 정의 원칙

기획

알아두면 좋을 IT관련 웹사이트들: 2부, IT 트렌드 세터를 위한 웹사이트 추천

기획

자율주행 기술의 현황: 3부, 자율주행차 디자인이 다른 점은?

개발

알아두면 좋을 IT관련 웹사이트들: 1부, 성장러를 위한 IT 웹사이트

기획

기획 용어 3부: 이커머스 페이지 기획 시 알아야 하는 기본 용어

기획

자율주행 기술의 현황: 2부, 움직이는 스마트폰, 무인 자동차!

개발

UX측면에서 잘 만들어진 B2C사례: 2부, 토스와 기업은행 아이원뱅킹

디자인

기획 용어 2부: UI 기획 시 알아야 하는 기초 용어

기획

기획 용어 1부: 웹, 앱 UI 설계 전 알아야 하는 기본 개념

기획

자율주행 기술의 현황: 1부, 완전 초짜들을 위한 자율주행 이해하기!

개발

UX측면에서 잘 만들어진 B2C사례: 1부, 디터람스 제품 디자인

디자인

프리랜서와의 프로젝트를 안정감 있게 이어가려면

기획

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.