웹 서비스 개발 기획

• 왜 웹 서비스를 만드는가?

• 핵심 요소는 무엇인가?

• 누가, 어떤 기기를 가지고 이 홈페이지를 방문하는가?

• 어떤 기능을 제공하는가?

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

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

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

• 규모에 따라 사용하는 툴이 다르지만 소규모 툴 기준으로 설명합니다.

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

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

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

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



 

---



 

3. 마인드맵(FREEMIND)

• 설치하기

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



• 단축키 모음 :

1. 새 마인드 맵 : 
  Ctrl+N이나 파일>새파일을 선택하면 "새로운 마인드맵"으로 시작할 수 있습니다.

2. 노드 선택 및 수정 :
  노드를 클릭하면 선택하여 수정할 수 있고 F2를 클릭해도 됩니다.

3. 하위 노드 추가 : 
  선택 노드에서 Insert 키를 누르면 하위 노드를 추가합니다.

4. 같은 레벨 추가 :
  선택 노드에서 Enter 키를 누르면 같은 레벨로 노드를 추가합니다.

5. 노드간 위치 바꾸기 :
  Ctrl+상하좌우 방향키로 노드 위치를 바꿀 수 있고, 마우스로 끌어다 놓기 해도 됩니다.

6. 맵 저장 :
  Ctrl+S 또는 파일>저장으로 파일을 저장할 수 있습니다.

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

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

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

• 소통! 소통! 소통! 아무리 강조해도 지나치지 않습니다. 작업이 어느정도 마무리 된 다음에 소통을 하는 것이 아니라 끊임없이 중간과정을 지나치다 싶을 정도로 소통하셔서 의도를 정확히 반영하려는 노력이 필요합니다.

4.1 카카오 오븐(https://ovenapp.io)

• 앞서 한 질문들을 바탕으로 웹사이트를 제작하는데 큰 도움이 되는 도구들을 소개하겠습니다. 저희가 지금 만들고자 하는 웹사이트 뿐만 아니라 앞으로 프로젝트를 기획하는데 큰 도움이 되는 도구들입니다.

• Oven은 프로토타입을 만들기 적절한 툴입니다. input을 최소화 하여 화면 구성을 할 수 있습니다.

OvenApp.io

마치 데스크톱 애플리케이션을 웹으로 옮겨놓은 듯한 편리함과 직관적이고 아름다운 UI 컴포넌트 그리고 강력한 편집기능들은당신의 손끝 아이디어를 단 한순간도 놓치지 않고 캐치하여 웹에서 실행가능한 프로토타입으로 재탄생시킵니다.디자이너, 기획자, 개발자 누구라도 상관없습니다. 아이디어만 가져오세요. 지금 무료로 가입하세요 "아.. 제가 화면 레이아웃을 잘못 생각했네요" 파워포인트로는 이렇게 하면 될 줄 알았는데 막상 디자인과 개발이 시작되고 나서 아차 싶었던 적이 있으신가요?

https://ovenapp.io/

• 홈페이지에서 오븐을 소개하는 문구

• 예시
• 제주카페찾기 관리자사이트 https://ovenapp.io/view/BRvoQsMUr3opY2hzLk70XNqQfVa7S6BS/RUKEb
• 영화정보사이트 https://ovenapp.io/view/02t1dEDUdhEKYtNy9fG7pwlWOwAHK7Qn/Ffr3y

• 기본기능
• 페이지 추가 : 왼쪽 하단에 페이지 추가를 눌러 페이지를 추가해보세요!
• 텍스트 및 이미지 추가 : 드래그 엔 드롭으로 각 요소를 추가할 수 있습니다.
• 링크연결 : 각 버튼에 링크를 연결할 수 있습니다.
• 미리보기
• 공유하기 : 누군가에게 링크로 바로 공유할 수 있습니다.



 



 

4.2 Figma(https://www.figma.com/)

• 전문적인 디자인 툴도 있습니다. 공유와 설계가 자유로워 카카오 Oven처럼 쉽게 화면 설계를 할 수 있습니다. 다만 기능이 많다 보니 숙련이 되기까지 시간이 필요합니다.

• 수정을 하게 되면 공유받은 모든 인원의 workspace에 반영됩니다.

• 별도의 파일로 저장할 수도 있지만, 따로 저장 안해도 되는 클라우드 환경에서 작동합니다.

• Window, Mac에서 동일한 환경을 제공하고, 히스토리 관리가 가능하며 능숙해질 경우 팀과 디자이너에게 큰 만족도를 줍니다.