Java JSP MVC2 구조를 이용한 Web Micro blog : Micro blog를 구현하기위해 페이스북, 인스타그램과 같은 성공적인 웹서비스를 모티브로 하였습니다. github : https://github.com/HanHyeonseok/Micro_blog_WebProject/tree/master/KH

1. WEB Micro blog Project
Made by Team.2
MINI TEAM PROJECT

2. 1. 개발목표
: Micro blog를 구현하기위해
페이스북, 인스타그램과 같은
성공적인 웹서비스를 모티브로
하였습니다.
1. 다양한 지역의 행사들을 일정을
캘린더 형식으로 한눈에 볼 수
있도록 서비스합니다.
2. 페이스북, 인스타그램과 같이 짧은
글귀와 관련 사진을 주로 이루는
게시판형식을 채택하였고 또한 유사한
분위기를 형성하기 위해 디자인에
노력하였습니다.
사진출처 :http://www.the-pr.co.kr/news/articleView.html?idxno=32467

3. 2. 개발환경

4. 3-1. 담당 핵심기능 기술서 ( BBSLIST.jsp )
Issue.01
: 일반적인 게시물을 어떻게
화면에 구성 할 것인가?
Issue.02
: 게시글에 노출되는 사용자의
개인 정보는 무엇을 노출 시킬
것 인가?
Issue.03
: 불필요한 페이지 혹은
재사용 가능한 페이지의 활용
3
웹디자인, 구글로그인[JavaScript], FileUpload, 깃허브&소스트리 당담

5. 3-1. 담당 핵심기능 기술서 ( BBSLIST.jsp )
Issue.01
: 일반적인 게시물을 어떻게 화면에 구성 할 것인가?
①
②
③
④
① 설명
게시글 등록단 : 스크롤시 상단
헤더 부분에 고정되어 사용에
용이하게 구현
② 설명
게시글 리스트단 : 최신글을
기준으로 정렬된 게시글이 상단에서
하단으로 스크롤 진행을 할 수 있게
구성
③ 설명
베스트 글 리스트단 : 좋아요와,
조회수를 기준으로 상위 3개의
게시글을 노출시킨다.
④ 설명
조회,검색 단 :
제목,본문,해시태그의 로그를
검색하여 게시글을 찾는다

6. 3-1. 담당 핵심기능 기술서 ( BBSLIST.jsp )
Issue.02
: 게시글에 노출되는 사용자의 개인 정보는 무엇을 노출 시킬 것 인가?
구글 로그인 API사용하여 회원의 정보를 받아
호스트서버의 DB저장이 가능하다. 그렇기때문에
구글에서 받아오는 사용자의 정보를 적절하게
저장해주어 사용해야 하는데 구글로그인시
회원의 정보는 ID코드를 대체하여 이메일을
채택하게 되었고 auth값을 구별하는 조건으로
서비스를 사용시 일반 유저와의 다른 조건을
주었습니다.

7. 3-1. 담당 핵심기능 기술서 ( userMyPage.jsp )
Issue.03
: 불필요한 페이지 혹은 재사용 가능한 페이지의 활용①
②
프로그래밍은 불필요한 코드를 줄이고 보다 효과적인 결과를
만드는 것이 중요하다고 생각합니다. 가능하다면 기능 단위를
객체로 만들어 사용하였습니다. 실제로 페이스북과 같은 곳을
살펴보면 개인 마이페이지와 다른 유저의 마이페이지가 크게
다르지 않습니다.포장은 같으나 그 안의 내용물만 바꾸어
포장할 수 있다면 좋을 것이라는 생각으로 로그인한 사용자의
마이페이지는 세션에서 파라미터 값을 받아와 사용, 다른
유저의 마이페이지는 사용자의 id 혹은 이메일, 작성한
게시글의 시퀀스값 등 과 같이 마이페이지의 주체를 구분하고
그에 적합한 서비스를 제공할 수 있도록 구현하였습니다.
1. 로그인한 마이페이지 2.다른 유저의 마이페이지

8. 3-1. 담당 핵심기능 기술서 ( login.jsp )
Issue.04
: 구글 로그인 기능 구현 (JavaScript)

9. 3-2. 구현된 이미지
① 설명 :
- index.jsp 페이지에서 event,
board, mypage 페이지
화면으로 이동
② 설명 :
- 다가오는 행사와, 베스트
게시글을 보여준다.
③ 설명 :
- 광고, 대문사진, 등 이미지
슬라이드를 통해 메인화면의
느낌을 주었습니다.
메인 페이지
①
②
③

10. 3-2. 구현된 이미지
게시판 페이지
①
②
③
④
① 설명 :
- 게시글 폼에 맞는 내용을 작성하여
게시글 등록
② 설명 :
- Micro blog형태의 게시글을 보여줍니다.
③ 설명 :
- 좋아요, 조회수를 SQL쿼리문으로
조회하여 상위 3개의 리스트를
보여줍니다.
④ 설명 :
- 제목, 내용, 해시태그를 통해 검색가능

11. 3-2. 구현된 이미지
게시판 디테일 페이지
①
②
③
① 설명 :
- 해당게시글의 DTO를 웹 디자인 폼에 맞춰
사용자에게 보여줍니다.
② 설명 :
- 댓글 기능
③ 설명 :
- 게시글과 로그인된 정보가 같은 경우 수정, 삭제
등 게시글의 수정이 가능합니다.

12. 3-3. 제작과정 중 시행착오
1 ) 개발 기간과 설계
개발을시작하기 전 다양한 기능과 그에
맞는 폼을 만들었지만 주어진 기간에
모든 기능을 구현할 수 없었습니다.
계획대로 초반 부분의 일정을 끝낸
팀원들은 프로젝트의 크기를 정정할 수
밖에 없었고
개발 프로그램의 핵심 기능들에 완성도를
높이는 것에 집중하게 되었습니다.
결과적으로 다양한 기능을 구현하는 것은
어려움이 있었지만 주된 기능의 완성도
높이는데 성공했습니다. 하지만, 그
과정에 설계단계에서 고려해야 하는
사항이 얼마나 중요한지 알게 되었습니다.
2 ) 도메인을 이용한 다양한 API로그인
프로젝트회의를 할 때 팀원들은 로그인과
회원가입에 높은 완성도를 구현하고
싶어했습니다.
그렇게 도입하게 된 다양한 API를 이용한
로그인기능을 구현 목표를 하였으나 호스트
서버의 URL이 보안상 인증 되어있는 공인IP가
아니면 다른 서버에 있는 회원의 정보를 얻는게
한정적인 것 을 알게 되었습니다.
그러한 이유로 ‘페이스북’ 로그인 API기능을
구현에 실패하였지만 ‘구글’ API에서
제공해주는 회원의 정보는 저희 DB의
제약조건을 충족하기 때문에 구현 할 수 있게
되었습니다.

13. 4. 프로젝트를 마치며..
한현석( Hyeon seok Han )
• e-mail : gksgustjr727@naver.com
• blog : http://toycode.tistory.com
• github : https://github.com/HanHyeonseok
• slideshare :
https://www.slideshare.net/HyeonseokHan1
코드의 가독성, 기능의 재사용, 보안적인 문제 등 많은
부분을 신경을 쓰며 보다 탄탄한 제품을 만들고 싶었습니다.
하지만, 기능을 ‘어떻게든 작동하게만 하자’라는 안일한
생각으로
스스로에게는 후회가 많이 남는 프로젝트였다고 생각합니다.
하나의 기능을 코딩하더라도 그 다음의 일을 생각하며
코딩에 임하겠다는 생각을 하게 되었고 다음 프로젝트에서는
지금의 제품보다 더 좋은 코드를 작성하고 싶습니다.
웹 앱을 만들게 되면서 프로그래밍 언어의 쓰임을 다양하게
사용해 볼 수 있는 좋은 기회였다고 생각합니다. 또한, 웹
개발 언어에는 제가 모르는 수 많은 언어들이 있다는 것을
알게 되었고 좋은 프로그래머가 되기 위해서는 새로운
언어와 툴에 대한 두려움이 없어야 하며 자기개발을 꾸준히
해야하는 부분이라는 것을 다시 느꼈습니다.