당신은 주제를 찾고 있습니까 “웹 프로젝트 기획서 – [IT창업]03.웹\u0026앱 설계 기획서 작성하기 (IT창업 마지막 단계)“? 다음 카테고리의 웹사이트 you.tfvp.org 에서 귀하의 모든 질문에 답변해 드립니다: https://you.tfvp.org/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 민썸 MinSsum , 스타트업 크리에이터 이(가) 작성한 기사에는 조회수 16,214회 및 좋아요 492개 개의 좋아요가 있습니다.
웹 프로젝트 기획서 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 [IT창업]03.웹\u0026앱 설계 기획서 작성하기 (IT창업 마지막 단계) – 웹 프로젝트 기획서 주제에 대한 세부정보를 참조하세요
안녕하세요!! IT 스타트업 크리에이터 민썸입니다.
오늘은 IT창업에서 가장 중요한! 화면설계서, 웹\u0026앱 기획서 작성 방법입니다.
IT가 어려우신 분들은 1편부터 봐주시면 더 이해가 되실거에요!
웹 프로젝트 기획서 주제에 대한 자세한 내용은 여기를 참조하세요.
웹 페이지 기획서인 스토리보드 제작하는 순서, 방법
웹 페이지 기획서인 스토리보드 제작하는 순서, 방법 -스토리보드- · 1. 표지 제작 · 2. 작업 히스토리 제작 · 3. 사이트맵(Sitemap) 제작 · 4. 각 화면 설명 …
Source: thinkingfactory.tistory.com
Date Published: 4/18/2021
View: 5336
딱 한 달 동안 나만의 웹사이트 기획하고 만들기! – 브런치
1. 서비스 컨셉 확정 및 Front UI 설계 (1일차) · 2. Admin 설계 (2일차) · 3. 기획서 리뷰 및 협의 · 4. Admin 구축 및 테스트 (8일차) · 5. 콘텐츠 리스트업 …
Source: brunch.co.kr
Date Published: 8/9/2021
View: 4556
[ 쇼핑몰 웹 사이트 개발하기 ] 3. 프로젝트 계획서 작성
< 쇼핑몰 웹 사이트 개발 프로젝트 3단계 : 프로젝트 계획서 작성 >. 이번 프로젝트는 간단한 쇼핑몰 웹 사이트를 개발하는 것입니다.
Source: m.blog.naver.com
Date Published: 3/18/2021
View: 8683
[웹/앱 설계의 기본] 화면설계서 작성방법 :: 기획자 데이먼
프로젝트 성격에 따라 권한 설계가 필요한 경우도 있고 불필요한 경우도 있습니다. 아래 화면은 권한 정책에 대한 예시인데요. 행은 [페이지]와 [사용자 …
Source: yslab.kr
Date Published: 4/11/2022
View: 7772
1. 웹 프로젝트 기획 – 왕초보코딩탈출
작업 순서. 1. 프로젝트 정하기. 2. 개발 환경 정하기. 3. 프로젝트 스토리보드 작성. 4. 스프링 개발환경 구축. 5. 디자인 작업하기 Bootstrap.
Source: kingchobocoding.tistory.com
Date Published: 1/19/2022
View: 2292
[웹기획가이드] 화면설계서 v1.0 양식 공유합니다. – 야메군
저도 출근한 지 3일만에 기획서를 썼… 하지만 밝은 면이 있다면 어두운 면도 있겠죠? 빠른 변화에 대응하다보니 진행되는 많은 프로젝트의 히스토리 …
Source: www.yamestyle.com
Date Published: 10/1/2022
View: 6207
웹사이트 개발/리뉴얼 기획서 작성 10단계 – Contenta M
웹사이트 기획 단계에서 가장 핵심 사항은 고객의 요구사항과 회사의 목표의 … 애정이 적은 사람이 먼저 지쳐서 양보하는구나를 깨닫고 프로젝트는 마무리 되었죠.
Source: magazine.contenta.co
Date Published: 9/23/2021
View: 4746
21.01.13 프로젝트#1 기획서
슈팅스타제제 님의 블로그입니다. 구독하기. 프로필 사진. 웹 프로젝트의 다른 글. 21.01.13 …
Source: jemerald.tistory.com
Date Published: 10/27/2021
View: 6872
웹 프로그래밍 프로젝트 기획서 7 조 – PDFSLIDE.NET
웹 프로그래밍 팀프로젝트 제안서 웹 프로그래밍 프로젝트 기획서 7조 – 1 – 조장 60092778 정태석 조원 60052404 임효준 60072334 박성범…
Source: pdfslide.net
Date Published: 6/8/2021
View: 3244
주제와 관련된 이미지 웹 프로젝트 기획서
주제와 관련된 더 많은 사진을 참조하십시오 [IT창업]03.웹\u0026앱 설계 기획서 작성하기 (IT창업 마지막 단계). 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
![[IT창업]03.웹\u0026앱 설계 기획서 작성하기 (IT창업 마지막 단계)](https://i.ytimg.com/vi/1hfhUmb_bRc/maxresdefault.jpg)
주제에 대한 기사 평가 웹 프로젝트 기획서
- Author: 민썸 MinSsum , 스타트업 크리에이터
- Views: 조회수 16,214회
- Likes: 좋아요 492개
- Date Published: 2021. 4. 25.
- Video Url link: https://www.youtube.com/watch?v=1hfhUmb_bRc
웹 페이지 기획서인 스토리보드 제작하는 순서, 방법 -스토리보드-
안녕하세요. thinkinfactory입니다.
제가 개발자로서 개발 강의만 쭉 작성을 하다가, 프로젝트의 첫 순서인 기획 작업을 어떻게 하는가에 대한 질문에 답을 드리기 위해 기획 카테고리를 만들어서 강의를 작성하게 되었습니다.
먼저, 스토리보드는 하나의 프로젝트를 수행하기 위해 구현 목적과 목표에 따라 설계를 제시하는 일입니다.
개발하는 분들은 개발 작업 시작에 스토리보드를 전달받고 거기에 맞게 소프트웨어 혹은 모듈을 구현하기 시작하는데 다음 과정을 통해서 어떻게 만드는지 알아보겠습니다.
1. 표지 제작
유니드림 스토리보드의 표지
유니드림 스토리보드의 표지를 제작한 부분인데, 웹사이트 이용자화면 화면정의서라는 이름으로 스토리보드를 개괄합니다.
2. 작업 히스토리 제작
작업 히스토리
작업 히스토리를 표시하는 일은 팀과 공동으로 작업을 하면서 필요한 부분입니다. 누가 어떤 작업에 참여했는지 히스토리를 작성해서 책임을 나누고 기여자를 기록하는 것입니다.
3. 사이트맵(Sitemap) 제작
유니드림의 사이트맵
어떤 화면에 어떤 서비스가 들어갈지 사이트의 화면을 매핑합니다. 전체적인 부분을 제공한 뒤에 디테일을 제공해야 개발하기가 수월하고, 이해하기도 편합니다.
4. 각 화면 설명 제작
화면 소개 좌. 화면 기획. 우. 디스크립션
일반적으로 스토리보드는 좌측에 화면에 대한 대략적인 드로우가 있고, 우측에는 설명(Description)이 있습니다. 객체 하나하나에 어떤 이벤트가 존재하는지 설명 부분에 적어주어야 합니다.
본문 내용의 데이터 테이블 제시
가끔씩 화면에서 고정적인 값들을 제공하기 위해서는 데이터 테이블을 설명 텍스트에 적어주는 방법을 이용합니다. 예를 들어서, 오른쪽 퍼블리싱 플랫폼을 보시면 다음과 같습니다.
퍼블리싱 플랫폼
A. 안드로이드 앱
i . 네이티브 앱
ii. 하이브리드 앱
B. iOS 앱
i . 네이티브 앱
ii. 하이브리드 앱
C. 웹앱
i . PC 호환 웹앱
ii. 반응형 웹앱
iii. 모바일 웹앱
D. 윈도우앱
E. 서버
F. 기타
저는 개발자이기 때문에 데이터 테이블이나 ENUM 이렇게 이야기를 하는데, 기획자분들은 고정값들에 대한 설명을 어떤 용어로 표현하는지 잘 모르겠습니다. 아시는 분 있으시면 덧글 남겨주시면 공부하도록 하겠습니다!
위와 같은 방법을 통해서 사이트맵에 제시된 화면을 하나하나 제작하다보면 기획서가 완성이 됩니다. 개인적으로 기획은 아직 흥미가 붙지 못했지만, 익숙해지면 상당히 창조적인 일이라고 생각합니다.
간단히 스트레칭한다는 생각으로 포스트를 작성했고, 다음에는 더 좋은 퀄리티로 찾아뵙겠습니다. 유투브 영상도 촬영했으니 따라하면서 배우시면 더 수월할 것 같습니다.
읽어주셔서 감사합니다.
딱 한 달 동안 나만의 웹사이트 기획하고 만들기!
2016년 12월 1일.
기획자와 개발자 단둘이서 한 달간 사이트를 만들어보기로 계획하고 28일이 지난 오늘 2017 버킷리스트 서비스를 오픈했습니다. 이 서비스는 여러분의 새해 목표를 쉽게 계획하고 페이스북에 공유할 수 있도록 도와주는 서비스입니다.
이번 포스팅은 한 달 간의 서비스 제작과정을 정리한 것으로 관련 업종 종사자분들이 참고해보시면 좋을 것 같습니다. 글도 재밌게 읽어주시고 서비스도 열정적으로 사용해주시면 정말 감사하겠습니다.
사이트 링크 : http://2017things.com >>> http://wishub.me로 변경.
2017년에만 반짝 사용될 것으로 예상해서 2017things라는 도메인을 사용했는데, 사이트 이용자가 꾸준히 있어 도메인을 wishub로 변경했습니다. (깃허브에서 차용) 그런데.. 그런데.. 도메인을 변경하고 나니 구글SEO가 모두 초기화되어 상위랭크가 모두 날라감 ㅜ.ㅜ
#. 프로젝트 시작 동기
기존에 다니던 회사의 경영악화로 인해 올해 12월까지 근무하는 조건으로 회사를 퇴직하게 되었습니다. 당시가 11월 말이었는데 한 달 정도의 시간적 여유가 생겨 무엇을 해볼까 고민하다 아이폰 개발언어인 ‘스위프트’를 공부해보기로 결심했습니다. 그래서 온라인 강좌도 2개 구매하고 이제 막 시작해보려고 했었죠.
그러던 어느 날 이전 직장에서 함께 일했던 개발자 형, 친구와 함께 커피를 마셨는데 개발자 형도 12월 말에 퇴사한다고 합니다. 이 형은 제가 그동안 경험했던 개발자 중에 가장 뛰어난 개발자인데 마침 타이밍이 맞아서 12월 한 달간 간단한 사이트를 하나 만들어보기로 했습니다. 저는 기획과 디자인을 담당하고, 이 형이 개발 전체를 담당하기로 했죠. 앞으로 이 형을 최형이라고 지칭하겠습니다.
이날이 2016.11.30이었습니다. 12월 중에 사이트를 만들기로 했는데 마땅한 아이템은 없었습니다. 그래서 제가 집에 돌아가는 길에 아이디어를 고민하고 결정하기로 했습니다. 저는 기획자니까요 ^^
서비스 아이템은 이렇게 즉흥적으로 결정되었습니다.
1. 서비스 컨셉 확정 및 Front UI 설계 (1일차)
서비스 아이템은 결정되었지만 어떤 서비스를 만들지에 대해 구체적인 계획이 필요했습니다. 그래서 다음날 오전 전체 Flow가 담긴 Front 설계문서를 기획하고 공유했습니다.
설계문서를 빠르게 만들어 공유한 이유는 ①우리가 만들고자 하는 서비스에 대한 구체적인 전달 및 협의가 필요했고, ②한 달 안에 구현 가능한지 개발 범위를 파악하기 위해서였습니다.
다행히도 최형이 쿨하게 OK 해줘서 다음 스텝으로 넘어갈 수 있었습니다.
위 설계문서는 프로토타이핑 툴 Axure로 제작했습니다. 설계문서를 직접 확인하실 수 있도록 링크 공유드립니다.
– Front 기획서 링크 : http://bit.ly/2i5InPR (PC에서 확인해주세요)
2. Admin 설계 (2일차)
자 이제 어떤 서비스를 만들지 확정이 되었으니 바로 Admin 설계 작업을 시작했습니다. 이유는 Front 서비스가 돌아가기 위해서는 Admin이 필요하고, Admin을 개발하기 위해서는 DB설계가 필요하기 때문이죠.
Admin 설계 시 가장 먼저 신경 쓴 부분은 목표를 생성하고 외부 API를 연동해서 하나의 콘텐츠를 완성하는 과정입니다. 핵심 로직을 먼저 설계하고 전체 사이트맵을 완성했습니다.
Admin 기획서는 오픈하기 어려운 관계로 스크린샷 한 장 올려봅니다.
Admin 코어 프로세스를 설계하고 기능 구현에 대해 논의를 했는데 내가 제안한 로직으로 개발할 경우 작업 기간이 늘어날 수 있고, 속도도 느려질 수 있어서 API 검토 후 방향을 결정하기로 함. 결과는 최형이 알아서 잘 만들어줌.
3. 기획서 리뷰 및 협의
그동안 메신저로만 이야기를 나누다가 Admin/Front 기획서가 어느 정도 완성되어 카페에서 미팅함. 리뷰라고 하긴 뭐하고 커피 마시면서 가볍게 이야기를 나눴는데 최형이 내가 설계한 방향보다 좋은 아이디어를 많이 제안해줘서 기획서에 반영하기로 함. 역시 훌륭한 개발자라고 다시 한번 느낌.
네이티브 앱과 모바일웹 중 어떤 기술 기반으로 서비스를 만들지도 고민해봤는데 PC와 Mobile 등 모든 디바이스에 가볍게 공유되는 것이 중요한 관계로 모바일 웹으로 구축하기로 결정함.
서비스명과 도메인명도 고민해봄
– 가칭 : 2017 버킷리스트
– 도메인 : 2017things.com
4. Admin 구축 및 테스트 (8일차)
최형이 주말에 뚝딱 작업해서 Admin을 만들어줬음. 이형은 정말 최고다. 2일 만에 서버 세팅, DB세팅, 퍼블리싱, 핵심기능 구현까지 모두 완료! 나는 기능 검수를 위해 Google 스프레드시트로 테스트 시트를 생성함.
5. 콘텐츠 리스트업 및 등록
우리 서비스는 콘텐츠가 서비스의 성패를 좌우한다. 따라서 사람들이 관심 가질만한 콘텐츠를 충분히 누적하는 게 핵심이기에 <온라인 검색, 버킷리스트 관련 책, 버킷리스트 앱>의 목표들을 수집하여 약 200여 개의 목표를 생성했다. 다음으로 목표와 매칭 되는 API 콘텐츠를 등록해야 하는데 홍보글이 많아서 콘텐츠를 수집하는데 시간이 오래 걸렸다.
내가 직접 등록하기에는 시간적 한계가 있어서 임산부인 아내에게 SOS를 쳤다. 구글 애드센스로 수익이 생기면 모두 주기로 하고..! 혹시 이 글을 보신다면 마음에 드는 광고는 한 번씩 클릭해주세요! ㅎㅎㅎ
6. 기획서 최종 완료
Admin 핵심 기능도 구현되었겠다. 아내가 콘텐츠 등록도 해주겠다. 이제는 일정에 쪼임이 없어 띵가띵가 여가시간을 즐기다 누락된 UI 설계 및 디스크립션을 추가해 기획서 작업을 최종 완료했다.
7. 스케치 툴로 디자인하기
살다 살다 내가 디자인을 할 줄은 꿈에도 생각 못했다. 나는 디자인 감각이 없다고 판단했기에 디자인해볼 생각은 전혀 없었는데 상황이 상황인지라 스케치 툴로 디자인을 하게 되었다. 툴을 많이 사용해봐서인지 스케치 툴은 처음 사용하는데도 전혀 어려움이 없었다.
여러 앱들을 사용해보고, 드리블과 스케치 리소스 사이트를 둘러보며 디자인을 완성했다. 그리고 깨달았다. 나… 디자인 감각이 없지는 않구나! (위에 작성한 화면 설계서와 비교해보세요!)
전체 디자인을 공개하지는 못했지만 총 20page의 디자인을 완성했다.
8. 제플린으로 스타일 가이드 공유하기
디자인 작업을 완료했으니 이제 코딩과 개발을 담당하는 최형에게 스타일 가이드를 전달해야 한다. 스케치 플러그인 제플린을 설치하고 Export 했더니 다음과 같은 스타일 가이드가 뚝딱 만들어진다! 오~~ 신세계!
9. 로고 만들기
디자인을 끝내고 보니 텍스트로 넣은 로고가 너무 밋밋했다. 그래서 로고 디자인을 해보려고 하는데 어떻게 시작해야 할지 감이 안 왔다.
그래서 이쁜 폰트를 찾아보자는 생각으로 검색을 해보다가 저작권 걱정 없는 무료 한글 폰트 포스팅을 보고 소개된 폰트를 하나씩 적용해봤다. 계속 적용해봐도 딱히 마음에 드는 폰트가 없었는데 티몬 몬소리체를 적용해보니 잘 어울린다를 느낌을 받았다. 그래 너로 결정했어!
다음으로 외부로 공유하거나, 네이티브 앱을 만들 때 활용할 심볼을 만들고 싶었다. 어떤 심볼을 사용할지를 잠시 고민해봤는데 재미있게 봤던 업(up)이라는 영화의 애드벌룬이 적당하다고 생각되어 아이콘 공유 사이트인 더눈프로젝트에서 마음에 드는 애드벌룬을 검색하고 스케치에서 펜툴로 그렸다.
그래~ 로고는 이렇게 완성했다. 뿌듯 뿌듯!
로고와 별개로 서비스 기본 폰트는 스포카 한 산스 폰트를 적용함.
10. 구글 애널리틱스와 구글 애드센스 적용
사이트가 거의 다 완성되어 로그분석을 위한 구글 애널리틱스 스크립트를 삽입하고, 수익창출을 위한 구글 애드센스 심사를 요청하여 프로젝트 오픈 준비를 마쳤다. (오픈 후 검색엔진 최적화를 위한 메타태그 작업 추가)
정리하며
그동안 에이전시, 중견기업, 스타트업 창업 멤버(2회), 프리랜서 등으로 일하면서 수없이 많은 사이트를 만들어봤지만 오로지 나만의 사이트를 만들어본 것은 처음이라 저에겐 이번 프로젝트의 의미가 큽니다.
그리 대단한 서비스는 아니지만 시니어급 기획자(디자이너)와 개발자 2명만 있으면 한 달 이면 웬만한 서비스는 만들 수 있다는 걸 검증하는 시간이었습니다. 실제로 제가 기획/디자인에 투여한 시간이 약 10일, 개발자가 전체 개발에 투여한 시간도 10일 정도 소요되었습니다.
또한 기획자는 기획만 해야 한다는 경계선을 이번 경험을 통해 허물 수 있었습니다. 이제는 기획자도 충분히 디자인을 할 수 있습니다. 앞으로의 기획자와 디자이너의 포지션은 해외와 마찬가지로 하나로 통합되고, 전략기획 직군만 별도로 빠지지 않을까 생각되네요.
마지막으로 이번 프로젝트는 공간의 제약에서 완전히 해방된 프로젝트였습니다. 저희 집은 인천인고 최형은 선릉이라 필요한 이야기는 카톡으로 간단히 대화하고 기획서, QA시트, 디자인 산출물은 온라인으로 공유했는데 커뮤니케이션의 어려움은 전혀 없었습니다. 카페에서 2번 만나서 짧게 이야기한 게 전부네요. 그렇다고 안 친한 사이는 아닙니다 ㅎㅎㅎ
제일 중요한 이야기를 빼먹었네요.
2017 버킷리스트는 여러분의 새해 목표를 쉽게 선택하고 공유할 수 있도록 만들었습니다. 주변에 많은 입소문 부탁드립니다. 저희 서비스는 여러분의 참여가 절실히 필요합니다! ^^ 서비스에 대한 아쉬운 점도 댓글로 남겨주시면 적극 수용하도록 하겠습니다.
운세 서비스 등의 광고 제휴도 가능합니다! 으흐흐흐흐!!
– 사이트 바로가기 : 2017 버킷리스트
유튜브 동영상
유튜브로 올려보았습니다.
[ 쇼핑몰 웹 사이트 개발하기 ] 3. 프로젝트 계획서 작성
이름 담당자 시작 날짜 완료 날짜 프로젝트 개요 작성 안경잡이개발자 2016-02-22 2016-02-22 프로젝트 요구사항 분석 안경잡이개발자 2016-02-23 2016-02-23 UML 유스케이스 다이어그램 작성 안경잡이개발자 2016-02-23 2016-02-23 프로젝트 계획서 작성 안경잡이개발자 2016-02-24 2016-02-24 프로젝트 용어 정리 안경잡이개발자 2016-02-24 2016-02-24 프로젝트 테스트 케이스 작성 안경잡이개발자 2016-02-24 2016-02-24 자바 코드 객체 작성 안경잡이개발자 2016-02-25 2016-02-25 데이터베이스 테이블 작성 안경잡이개발자 2016-02-25 2016-02-25 개발 환경 설정 안경잡이개발자 2016-02-25 2016-02-25 UML 클래스 다이어그램 작성 안경잡이개발자 2016-02-25 2016-02-25 구현 안경잡이개발자 2016-02-26 2016-02-27 사후 검토 안경잡이개발자 2016-02-28 2016-02-28
< 프로젝트 용어 >
통합 개발 환경 : 실제로 프로젝트를 개발할 수 있는 개발 환경을 말합니다. 통합 개발 환경이라고 불리는 이유는 코드 편집기, 컴파일러, 프로그램 수정기, 그래픽 사용자 인터페이스(GUI) 설치기를 모두 포함한 패키지이기 때문입니다. 흔히 자바 개발 환경으로 유명한 이클립스(Eclipse), 넷빈즈(NetBeans)에서부터 C++ 개발 환경으로 유명한 비주얼 스튜디오가 있습니다.
데이터베이스 : 여러 사람에 의해 공유되어 사용될 목적으로 통합하여 관리되는 데이터의 집합을 의미합니다. 데이터베이스는 자료를 중복해서 저장하지 않고, 컴퓨터가 접근할 수 있으며, 조직의 어떤 기능을 수행하는 데 있어서 필수적이고, 한 조직에서 사용되는 공동자료로서 응용 목적에 다르게 사용이 가능합니다.
서버 : 근거리통신망(LAN)에서 집약적인 처리기능을 서비스하는 서브시스템으로서 클라이언트(Client)와는 대조되는 개념입니다. 서버 프로그램이 실행되고 있는 컴퓨터 하드웨어 그 자체를 서버라고 부르는 경우가 많습니다.
자바 : 객체 지향 프로그래밍 언어로서 보안성이 뛰어나며 컴파일한 코드를 클래스로서 제공하는 언어입니다. C언어를 확장한 객체 지향 언어인 C++의 장점을 살리면서 분산 개발 환경을 제공해 프로젝트 팀으로 구성된 개발 환경에 더욱 유리합니다. 우리는 자바 프로그래밍 언어를 이 프로젝트에 사용할 예정입니다.
JSP : HTML 코드 내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹페이지를 생성하여 웹브라우저에 돌려주는 언어입니다. 웹 애플리케이션 서버에서 동작하는 것으로 게시판, 수강신청, 쇼핑몰 등의 수없이 많은 사이트 개발에 가장 많이 사용되는 언어 중 하나입니다.
자바 서블릿 : 자바를 사용하여 웹페이지를 동적으로 생성하는 서버 측 프로그램 혹은 그 사양을 말합니다. 정확히는 웹 서버의 성능을 향상시키기 위해 사용되는 자바 클래스의 일종입니다.
자바빈즈 : 자바로 작성된 소프트웨어 컴포넌트를 의미합니다. 썬 마이크로시스템즈에서는 자바빈즈를 다음과 같이 정의했습니다. “자바빈즈는 빌더 형식의 개발도구에서 가시적으로 조작이 가능하고 또는 재사용이 가능한 소프트웨어 컴포넌트이다”
오라클 11g : 세계적인 기업 오라클에서 제작한 관계형 데이터베이스 관리 시스템(RDBMS)입니다. 현재 유닉스 환경에서 가장 널리 사용되는 기업형 RDBMS로 유명합니다. 현재 가장 최신 버전 중 하나이면서 많이 사용되는 버전이 오라클 11g입니다.
아파치 톰캣 : 아파치 소프트웨어 재단에서 개발한 서블릿 컨테이너만 있는 웹 애플리케이션 서버를 의미합니다. 톰캣은 웹 서버와 연동하여 실행할 수 있는 자바 개발 환경을 제공하여 자바 서버 페이지(JSP)와 자바 서블릿이 실행될 수 있는 환경을 제공하고 있습니다. 톰캣은 관리툴을 통해 설정을 변경할 수 있지만, XML 파일을 편집하여 설정할 수도 있습니다.
넷빈즈 : 넷빈즈는 자바 기반의 사용자 프로그램을 개발하기 위한 플랫폼 또는 자바, 자바스크립트, PHP, 그루비, C, C++ 등을 개발하기 위한 통합 개발 환경을 말합니다. 넷빈즈 또한 자바로 개발되어 있기 때문에 자바 가상 머신(JVM)이 갖추어진 환경이면 사용이 가능합니다.
MVC 2 모델 : MVC 모델이란 웹 애플리케이션을 개발할 때 사용되는 패턴으로 웹 페이지를 Model, View, Controller로 구분하여 개발하는 개발 패턴을 말합니다. MVC에서 모델은 애플리케이션의 정보(데이터)를 말합니다. 우리가 사용하게 될 자바 객체들이 모델이라고 생각하시면 됩니다. 그리고 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타냅니다. 마지막으로 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리합니다. 흔히 말하는 MVC 모델은 MVC 2 모델을 말하는 것이며 MVC 1 모델이라고 불리는 것은 컨트롤러가 생략된 개념입니다. 따라서 MVC 1 모델에서는 비즈니스 로직과 뷰가 하나의 코드처럼 상호밀접하게 연결되어있어 연결 관계를 수정하려면 프로젝트 전역에 걸친 수정 작업이 필요합니다. 다만 우리가 작업할 MVC 2 모델은 더 객체 지향적인 느낌이라고 생각하시면 됩니다.
UML 다이어그램 : 통합 모델링 언어(UML)로 작성된 모든 도안을 UML 다이어그램이라고 합니다. 개발자의 입장에서 굉장히 이해하기 쉽도록 가시적인 그림으로 표현됩니다.
[웹/앱 설계의 기본] 화면설계서 작성방법
프로덕트 매니저와 기획자의 메인 업무 중 하나는 UI 설계입니다.
이를 업계에서는 화면설계서, 화면정의서, 스토리보드, MMI(Man Machine Interface)등 다양한 이름으로 부르고 있는데요. 고놈이 고놈이라고 이해하시면 됩니다.
화면설계서는 대부분 파워포인트(키노트)로 제작합니다. 저도 주니어 시절에는 2년간 PPT 설계를 정말 열심히 했는데요. 그때는 설계 문서가 대외비이기도 하고 내 노하우를 남들에게 알려주기 싫어서 꽁꽁 싸매 놓고 있었습니다. 하지만 PPT 설계를 안 한 지도 어느새 10년이 넘었고 공개 가능한 내용도 있어서 문서 몇 개를 짜깁기해서 샘플 설계서를 만들어봤습니다.
이미 현업에 계시는 분들은 다 아실 내용이라 주니어 레벨에서 참고해보시면 좋겠습니다.
1. 표지
모든 문서의 첫 페이지는 표지로 시작합니다.
표지에는 [프로젝트명], [문서 버전], [작성일], [소속], [작성자]를 표기하는데 추가로 회사 로고를 넣거나 프로젝트 성격에 맞게 디자인을 하기도 합니다.
2. 목차
문서의 전체 순서를 간단히 정리합니다.
한글로 작성해도 되지만 많은 분들이 타이틀은 영어로 작성합니다. 영어로 작성하면 좀 더 있어 보이거든요 ^^;;
3. 히스토리
현재 문서의 버전과 히스토리를 정리합니다. 개발자들은 깃허브를 통해 그동안의 코드 변경내용을 상세히 알 수 있지만, 파워포인트 문서는 파일로 주고받다 보니 서로의 버전이 꼬일 수도 있고 변경내용을 추적하기가 어렵습니다. 그렇기 때문에 문서 앞부분에는 그동안의 변경내용과 문서 버전을 꼭 기록해야 합니다.
4. 메뉴 구조 (사이트맵)
제품의 전체 구조를 시각화합니다. 설계 문서를 여럿이 작업하는 경우에는 메뉴 기준으로 업무 범위를 나눌 수도 있고, 문서 양이 많은 경우에도 메뉴 구조별로 쪼개면 나중에 취합하기에도 좋습니다.
5. 화면 목록
문서에 담긴 화면 목록을 정리합니다. IA(InformationArchitecture)와 비슷하다고 보면 되는데 개발자와의 커뮤니케이션을 위해 Screen ID를 표기하기도 합니다. 맨 우측 열에는 페이지별 참고사항을 정리하는데 페이지가 삭제되거나 분리되었을 때 해당 행을 완전히 삭제하기보다는 아래 화면처럼 취소선과 비고를 적절히 활용하면 전체 히스토리를 파악할 수 있어서 좋습니다.
6. 설계
위에서 문서의 전체적인 개요를 정리했다면 이제부터는 본격적인 설계 내용을 포함합니다.
6-1 플로우차트
설계 화면이 간단한 경우에는 굳이 플로우차트를 만들지 않아도 됩니다. 하지만 복잡해질수록 플로우차트를 먼저 정리하고 시작하기를 권장하는데요. 플로우차트를 그릴 때는 [페이지]는 네모로, [프로세스]는 평행사변형, [분기]는 마름모 도형을 사용하면 됩니다. 시작과 끝은 [배경색]을 주면 좀 더 명확합니다.
한 가지 팁을 드리면 [비밀번호 찾기] 우측의 화면처럼 해당 페이지에서 필요한 필드 값을 함께 정리해두면 뒤에서 UI를 그릴 때 큰 고민 없이 바로 시작할 수 있습니다. 또한 얼럿 메시지도 눈에 띄게 표현해주면 좋습니다.
아이디/비밀번호 찾기
6-2 기본 정책
플로우차트와 정책은 세트로 묶어서 한 흐름에 이어가면 좋습니다. 플로우차트에서 담지 못한 내용은 정책 문서로 따로 분리해서 각 항목에 대한 고민사항과 결정사항을 정리합니다.
6-3 권한 정책
프로젝트 성격에 따라 권한 설계가 필요한 경우도 있고 불필요한 경우도 있습니다. 아래 화면은 권한 정책에 대한 예시인데요. 행은 [페이지]와 [사용자 그룹]으로 쪼개고, 열은 [CRUD]로 쪼개면 한눈에 들어와서 보기 좋습니다. 페이지에 따라 특정 기능을 사용할 수 없는 경우에는 명확하게 Block처리를 해주면 좋습니다.
6-4 UI 설계
UI 설계 화면은 이미 익숙하실 거라 생각합니다. 상단 영역에는 화면 목록에서 정리한 내용을 담고, 왼쪽 영역에는 UI를, 우측 영역에는 각 번호에 해당하는 디스크립션을 정리합니다. 디스크립션 작성 팁 중 하나는 아래 화면처럼 [Description], [Check Point], [Related ID]와 같이 성격에 따라 영역을 구분하면 좀 더 깔끔하게 정리할 수 있습니다. 모바일 설계도 같은 방식으로 진행하면 됩니다.
유효성 검사 디스크립션 작성 팁!
설계를 하다 보면 [필수 입력항목]과 [유효성 체크] 시나리오도 정리해야 하는데 우측 공간이 너무 좁은 경우에는 디스크립션을 작성하기가 불편합니다. 이 때는 별도 페이지로 분리해서 아래 화면처럼 [상황, 문구, 처리 시나리오]를 표로 만들어서 정리하면 작성하기도 쉽고 개발자들이 보기에도 훨씬 좋습니다 ^^
7. 마무리
마지막 페이지는 Thank you 혹은 EOD(End of Document) 텍스트로 마무리하면 됩니다. 표지 화면과 디자인 스타일을 비슷하게 유지하면 좋습니다.
네, 여기까지 화면설계서의 구성요소를 간단히 정리해봤습니다. 한 가지 빠진 부분은 ‘모바일 제스처’라던지 ‘얼럿 메세지 스타일’, ‘게시판 작동방식’ 등 문서에서 공통으로 사용되는 내용은 앞 부분에 함께 정리하면 좋습니다.
강의 영상
글에서 담지 못한 내용은 영상으로 정리했으니 이해가 어려우신 분들은 영상도 함께 참고해주세요! ^^
반응형
1. 웹 프로젝트 기획
작업 순서
1. 프로젝트 정하기
2. 개발 환경 정하기
3. 프로젝트 스토리보드 작성
4. 스프링 개발환경 구축
5. 디자인 작업하기 Bootstrap
6. DataBase 연동 및 테스트
7. 데이터베이스 모델링
8. 데이터 테이블 출력
9. 데이터 테이블 차트로 출력
10 테이터 PDF로 출력하기
마무리
프로젝트를 진행하기 앞서 유용한 사이트를 알려드릴까해요 ㅎㅎ
https://trello.com/
카드 방식의 플래너 입니다. 저는 위에 작업 순서에따라 나눴습니다. 디테일한 작업을 추가하고 완료되면 완료처리하면서 작업하면 본인의 프로젝트 위치를 정확하게 파악할 수 있습니다.
프로그램이 아니여도 카드 방식의 플랜이 엄청 좋다고 어디 책에서 봤는데 저도 처음 써보는거라 ㅎㅎ
이번 프로젝트를 처음으로 저도 처음 써볼까 합니다 ㅎㅎ
1. 프로젝트 정하기
로또 사이트에서 CSV파일 다운로드하여 데이터베이스 저장 후 ,
테이블 형식으로 출력한다. 출력한 내용을 차트로 다양하게 출력해보고
인쇄가 가능하게 pdf로 내보내기 버튼을 만든다.
(아주 간략하게나마 자신이 만들고자 하는 내용을 정리하세요 꼭 중간에 틀어지더라구요 ㅎㅎㅎ)
목표는 간단합니다.
1. 엑셀 데이터 대량으로 입력하기
2. 입력한 데이터 웹에 출력하기
3. 차트로 출력하기
4. 인쇄하기
2. 개발환경 정하기
프레임워크
Spring Framework + mybatis
DBMS
mariaDB
디자인
Bootstrap
스크립트
DataTables , ChartJS
* 추가로 Spring Boot , 하이버네이트 , PostgreSQL , Angular 로 준비중입니다. ㅎㅎ~
다음편엔 간략하게 스토리 보드를 작성하겠습니다.
[웹기획가이드] 화면설계서 v1.0 양식 공유합니다.
반응형
안녕하세요, 야메군입니다.
저는 최근 반려동물 스타트업으로 이직 했습니다. 대부분의 스타트업들이 그러하듯 이곳도 젊은 직원들이 주축이 되어 시시각각 달라지는 트렌드와 비즈니스 환경에 대응하고자 24시간도 부족할만큼 몰려드는 스케줄을 소화하고 있습니다. 또 그간 근무했던 어떤 회사보다도 활발하고 역동적인 조직 분위기를 가진 회사라 저 역시도 그 활발함에 동화되어가고 있습니다. 저도 출근한 지 3일만에 기획서를 썼…
하지만 밝은 면이 있다면 어두운 면도 있겠죠? 빠른 변화에 대응하다보니 진행되는 많은 프로젝트의 히스토리나 레퍼런스 관리가 잘 이루어지지 않거나 업무가 입에서 입으로 전해지는 경우로 인해 특정 이슈가 발생했을 때 상황대처가 쉽지 않다는 문제점도 눈에 띕니다. 이러한 문제에 대응하기 위해서는 JIRA와 같은 툴을 통해 업무를 관리하고 구성원간의 능동적인 업무진행도 필요하지만, 프로젝트 진행과정에서 산출되는 표준화에 근간을 둔 기획서의 작성 및 관리도 필요합니다.
그 관점에서 다시 앞으로 돌아와 현 직장의 상황을 살펴보니, 툴을 통한 일정관리 및 업무의 공유는 잘 이루어지고 있으나, 언급했던 문서의 관리는 잘 이루어지지 않는다는 문제점은 여전히 남더군요. 그래서 이를 보완하고자 화면설계서, 혹은 스토리보드로 불리는 기획서 양식을 만들어봤습니다. 물론 기획서 양식을 처음 만들어보는 건 아니지만, 스타트업의 업무환경 상 번거롭고 형식적인 문서화보다는 꼭 필요한 내용만을 담는 것이 현실적이라는 판단이 들었습니다. 이에 기존에 통용되던 복잡한 양식을 조금 손 봤습니다.
그런데 혼자 쓰기는 조금 아쉬운지라 한 번 공유해볼까 합니다. 부족한 양식이지만 필요하신 분은 마음대로 이용하하시기 바랍니다. 아, 사용하시기 전에 아래 기획서 양식 사용설명서를 읽고 기획적 역량도 같이 높여보시기 바랍니다.
1. 표지 양식
먼저 표지 입니다. 표지를 통해 기획서의 명칭을 정의하고 기획서의 버전(Version), 작성일자, 작성자 정보 등을 기록하게 됩니다. 아울러 문서의 보안성 정도에 따라 보안의 단계나 열람권한 등을 표기하기도 합니다. 하지만 문서의 보안을 목적으로 DRM(Digital Rights Management)을 사용하는 것이 아닌 이상 잘 지켜지지도 않는 관계로 비밀문서라는 의미의 Confidential 정도만 표지 중앙에 배치했습니다.
화면설계서 표지양식
2. History 양식
두 번째로 문서의 업데이트 내역을 기록하는 History 양식입니다. 우리가 작성하는 화면설계서 또는 스토리보드는 필연적으로 클라이언트, 사수, 팀장, 오너 또는 기획자 본인의 필요에 의해 수정이 이루어지게 됩니다. 이때 문서의 업데이트 내역이 관리되지 않는다면, 어떤 내용이 수정되었는지 기획자 본인은 물론 디자인/퍼블리싱/개발을 위해 문서를 보는 작업자들도 알 수가 없죠.
반응형
이를 위해 업데이트 기록을 관리하는 History 양식이 존재하며 버전, 업데이트 날짜, 변경 또는 추가된 내용, 해당 변경이 적용된 페이지, 작성자 정보를 기록합니다. 참고로 주니어 기획자를 위해 기획문서의 업데이트 팁 하나 알려드릴께요. 최초 기획서 작성 후 업데이트 이슈 발생 시, 문서를 복사하고 복사한 문서에 추가/변경된 내용을 작성합니다. 그 이후 업데이트 이슈 발생 시 이러한 과정을 반복합니다.
화면설계서 문서 히스토리 양식
그리고, 더 이상 문서의 업데이트 이슈가 없다면 기존 복사본을 모두 삭제하고 최종 문서만을 남기는 방식으로 문서를 관리하시면 진행과정에서 변경내역을 효율적으로 관리하실 수 있습니다.
3. 서비스 개요 양식
제 강의에서도 항상 언급하는 내용이지만, 기획자가 만드는 모든 문서에는 주제적 관점에 기인한 목적성이 있어야 합니다. 목적이 존재하지 않는 기획서는 마치 태어났기 때문에 사는 것과 다를 바 없는 것처럼 기획서를 왜 작성했고 무엇을 지향하고 있는지를 정의해줘야 기획서 본연의 존재감이 생기게 됩니다. 이를 위해서는 아래 그림에서 보는 것처럼 기획배경과 목적, 기획을 통해 얻고자 하는 기대효과, 기획에서 고려된 주요 기능요약, 기타 전달해야 할 이슈를 정의해줘야 합니다. 하지만 생각보다 많은 수의 기획자들이 기획 개요를 작성하지 않는 경향이 있습니다.
화면설계서 개요 양식
제가 기획 개요를 무엇보다도 중요하게 생각하는 이유는 기획서 전체를 훓터보지 않더라도 개요항목을 통해 기획서를 읽는 이에게 해당 기획의 방향성이 전달되기 때문입니다. 단순히 UI설계나 Flow만으로는 기획의 타당성이나 목적성을 충분히 전달되기가 어렵습니다. 기획의 방향성이 충분히 전달되지 않는다면 의사결정권자에 대한 설득이 쉽지 않을 겁니다. 또한 디자이너, 퍼블리셔, 개발자 등의 실무자들도 해당 기획을 구현하는데 있어 목적과 괴리감이 있는 결과물을 생산할 수도 있습니다. 때문에 개요항목을 통해 해당 기획의 목적과 방향성을 전달하는 것이 무엇보다도 중요합니다.
이것이 정의된 후 기획의 세부 과정과 그 과정의 진행일정을 개략적으로 정리하는 표를 추가하여 기획 스케줄을 공유할 수 있습니다. 물론 조직 내부에서 트렐로나 아사나와 같은 별도의 프로젝트 관리 툴을 사용한다면 생략하셔도 됩니다.
4. User flow 양식
그 다음으로 User flow 항목입니다. 아래 그림을 보면 각 단계로 구분된 표와 표 안에 논리 프로세스가 구성되어 있는 것을 확인할 수 있는데요. 이 문서를 통해 단위 서비스 별로 고객의 이용 흐름을 도식화함으로써 한 눈에 서비스의 시작과 종료까지의 전 과정을 파악할 수 있습니다. 서비스의 규모에 따라 통상 1개 이상의 User flow가 존재하는데, 만일 서비스를 도식화하는 과정이 생략된다면 세부 UI를 설계하는 과정에서 중요한 흐름이 누락될 수도 있습니다. 또한 개발 시 전제 구조를 파악하는데 어려움을 겪을 수도 있습니다.
User flow 양식
참고로 이 단계는 서비스의 전체적인 흐름을 정의하는 단계입니다. 때문에 상세한 흐름을 담기 보다는 개략적으로 “이런 식의 흐름이다.” 정도를 전달해주면 되며, 서비스의 상세한 흐름은 아래의 Logic process를 통해 정의하게 됩니다.
5. Logic process 양식
앞선 User flow에서 단위 서비스의 단계 별 흐름을 개략적으로 정의했다면 Logic process는 단계 별로 상세한 흐름을 정의하는 문서입니다. 이를 통해 정보의 수집이나 사용, 상황 별 논리적 대처방안을 정리하게 됩니다. 해당 문서는 개발 시 참고하는 내용이며, 개발 완료 후 서비스 검증을 위한 QA(Quality Assurance)과정에서도 사용됩니다.
만일 Logic process가 잘 정리되어 있지 않은 경우라면 개발자가 의아한 표정으로 “이거 이렇게 되는 게 맞아요?”하는 질문을 하는 경우도 있는데, 경험이 부족한 개발자는 잘못 설계된 Logic process 그대로 개발하는 경우도 있으므로 보다 꼼꼼한 작성을 요하는 문서입니다. 참고로 Process 개념을 더 알고 싶으신 분은 링크를 통해 확인해보세요.
Logic process 양식
6. 메뉴 그룹 구분 양식
말 그대로 하나의 기획 문서에서 메뉴 별 그룹을 구분 지어주는 문서입니다. 다른 장표와 달리 중요한 목적이 있는 문서는 아니며, 문서 열람 시 다음 메뉴의 기획으로 넘어간다는 의미를 전달해주기 위해 필요에 따라 기획서 중간 중간에 추가해주시면 됩니다. 단, 메뉴 그룹 타이틀 명은 다음에 설명할 UI 설계 양식 상단에 위치한 Group Title에 기록되어, 해당 장표가 속한 위치를 확인할 수 있습니다.
메뉴 그룹 타이틀 양식
7. UI 설계 양식
UI 설계 양식은 기획자가 구현하고자 하는 서비스의 화면을 설계하고 이를 어떻게 만들어야 하는지 설명하는 문서로 통상 기획자가 가장 많은 시간을 투자허비하게 되는 영역입니다. 아래 그림을 기준으로 좌측 텅 빈 공간에 웹/모바일 페이지의 인터페이스 설계하고 디자인/퍼블리싱/개발요소에 ①②③④와 같은 표기를 한 후, 우측 Description 영역을 통해 해당 위치의 전달사항을 작성합니다.
UI 설계 양식
참고로 UI를 설계할 때, 마치 디자인을 하는 것처럼 다양한 색상을 사용하거나 그림, 디테일한 구조를 그리는 것은 디자인의 Creation을 방해하는 원인이 되기도 합니다. 때문에 UI를 설계할 때는 가급적 선과 면 그리고 텍스트만으로 이루어진 간결한 Wireframe 구조로 설계해야 합니다.
지금까지 화면설계서 양식에 대한 사용방법을 간단히 정리해봤는데요. SI나 에이전시에서 사용하는 화면설계서 양식의 경우 UI 설계 페이지 별로 Screen ID를 표 형태로 작성, 화면의 위치 또는 해당 화면과 관련된 Screen ID를 표기하여 문서의 열람구조를 정리하기도 합니다. 하지만 파워포인트의 경우 워드와 달리 자동으로 업데이트되는 목차 기능이 존재하지 않습니다. 그래서 페이지나 기능이 추가될 때마다 매번 작성하는 번거로움이 있어 이번에 공유하는 양식에는 수록하지 않았습니다.
필요하신 분들이 있다면 언제든 마음껏 사용하시기 바라며, 본 양식과 관련해서 궁금하신 점이 있다면 아래 댓글을 통해 문의주시기 바랍니다. 아, 본 양식은 몇 개의 템플릿을 슬라이드 마스터로 만들었습니다. 장표 추가 시 마우스 우 클릭 후 팝업 메뉴에서 레이아웃 메뉴를 선택하시면 공통된 몇 개의 템플릿을 확인하실 수 있습니다. 참고하세요!!
야메군. Web와 Mobile, Digital 카테고리 SME(웹기획 18년차로 네이버 웹기획자 커뮤니티 “웹(WWW)를 만드는 사람들”에서 운영진으로 활동하고 있으며, 딴지일보를 시작으로 아이러브스쿨, 짱공유닷컴, YES24 등의 회사를 거쳐, 민간 IT 원천기술 연구소 “Valhalla Lab”에서 Pattern recognition과 Machine learning, Natural Language Processing 기술의 상업적 이용방법에 대해 연구. 현재 반려동물 스타트업에서 서비스기획 총괄로 재직중. 2016년 7월 7일, 웹/모바일 기획자의 업무능력 향상으로 위한 Guide Book “처음부터 다시배우는 웹기획(정재용, 최준호, 조영수 공저)” 출간.
반응형
키워드에 대한 정보 웹 프로젝트 기획서
다음은 Bing에서 웹 프로젝트 기획서 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 [IT창업]03.웹\u0026앱 설계 기획서 작성하기 (IT창업 마지막 단계)
- 창업
- 창업지원
- 지원사업
- 정부지원사업
- 예비창업자
- 창업준비생
- 정부지원
- 예비창업
- 서비스기획
- 지원금
- 대외활동
- 취업
- 멘토링
- IT컨설팅
- 웹기획
- 앱기획
- 디자인
- 웹디자인
- 앱디자인
- 웹기획서
- 앱기획서
- UX기획
- 기능명세서
- 화면설계서
- 와이어프레임
- wireframe
YouTube에서 웹 프로젝트 기획서 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 [IT창업]03.웹\u0026앱 설계 기획서 작성하기 (IT창업 마지막 단계) | 웹 프로젝트 기획서, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.
