기획을 하기 앞서 먼저 해야 하는 질문은 다음과 같습니다.

• 왜 웹 서비스를 만드는가?
• 핵심 요소는 무엇인가?
• 누가, 어떤 기기를 가지고 이 홈페이지를 방문하는가?
• 어떤 기능을 제공하는가?

1. 왜 홈페이지 기획을 하는가?

• 시행착오를 줄이고 원하는 결과물을 잘 구상하기 위해서

2. 무엇을 이용해서 기획을 하는가?

• 정보구조설계(I.A.)

• 화면설계(스토리보드)

• 정보구조설계 Information Architecture

  • 웹사이트의 정보(메뉴구조)를 단계별로 정리한 문서
  • 웹사이트 사이트맵 검색결과 https://bit.ly/2uvjTVG

• 기능목록 홈페이지를 구성하고 있는 메뉴와 기능 목록

  

  블록체인으로 구현하는 투표 시스템 - jeju BlockChain Vote

  ---

  

  영화 추천 사이트 구현

3. 마인드맵(FREEMIND)

• 설치하기

• Freemind를 사용해서 제주카페관리자사이트 메뉴 만들어보기, Insert키를 이용해 가지를 칠 수 있습니다.

  

  • 단축키 모음 :

    1. 새 마인드 맵 : 
      Ctrl+N이나 파일>새파일을 선택하면 "새로운 마인드맵"으로 시작할 수 있습니다.
    
    2. 노드 선택 및 수정 :
      노드를 클릭하면 선택하여 수정할 수 있고 F2를 클릭해도 됩니다.
    
    3. 하위 노드 추가 : 
      선택 노드에서 Insert 키를 누르면 하위 노드를 추가합니다.
    
    4. 같은 레벨 추가 :
      선택 노드에서 Enter 키를 누르면 같은 레벨로 노드를 추가합니다.
    
    5. 노드간 위치 바꾸기 :
      Ctrl+상하좌우 방향키로 노드 위치를 바꿀 수 있고, 마우스로 끌어다 놓기 해도 됩니다.
    
    6. 맵 저장 :
      Ctrl+S 또는 파일>저장으로 파일을 저장할 수 있습니다.
    

4. 화면설계(KAKAO OVEN & Figma)

출처 : http://blog.naver.com/PostView.nhn?blogId=yingbbang&logNo=221473198909&from=search&redirect=Log&widgetTypeCall=true&directAccess=false

• 보통 프로젝트를 할 때는 혼자서 하는 게 아닌 디자이너, 기획자, 개발자와 같은 다양한 사람이 참여하여 이루어집니다. 이 때 화면설계는 아이디어 발안자가 아닌 다른 사람들이 작업을 이해하고 아이디어를 소통하는데 중요한 역할을 합니다. 화면설계는 프로젝트의 청사진이자 목적지이기도 합니다. 만약 화면설계를 하지 않은 채 프로젝트를 진행한다면 위와 같은 결과가 벌어지기도 합니다.

• 스토리보드, 와이어프레임, 프로토타입

  

  스토리보드

  

  프로토타입

  

  와이어 프레임