기본 콘텐츠로 건너뛰기

[스프링부트2.0 낚시게시판] 02. 프로토타이핑을 만들어보자

드디어  팀프로젝트 마무리 정리 후 낚시 게시판을 만들수 있는 시간이 조금이나마 생겼다.

앞에서 환경세팅 후 그 다음단계로 진행해 보려 한다.

시작에 앞서 프로토 타이핑이 무엇인지 간단하게 알아보자

프로토 타이핑이란?

 프로토타이핑은 개발 접근법의 하나로 개발 초기에 시스템의 모형을 간단히 만들어 고객에게 보여주고, 고객과의 상호 교류를 통해 기능 추가, 변경 및 삭제 등을 반영해 설계를 해 나가는 방식이다.
 프로토타입은 실제 시스템이 갖추어야 할 모든 기능을 갖고 있지는 않다.

프로토 타입을 위한 도구들
1. Prott
 일본의 웹 에이전시인 굿패치에서 제작한 프로토타이핑 툴로, iOS용 앱이 있어서 앱을 통해 바로바로 확인할 수 있는 강점이 있다. 최근에는 웹용 프로토타이핑 기능도 추가했다. 기본적으로는 이 서비스를 요즘 가장 많이 사용 중이다.

2. Balsamiq
 발사믹은 가장 초창기에 나와서 지금까지도 많이 이용하는 도구이다. 스케치 같은 느낌을 주는 데모 예제들이 많아서 페이지별로 넣고 싶은 기능을 손쉽게 구상하고 커뮤니케이션할 수 있게끔 해준다.

3. Oven
 카카오에서 제공하는 아름다운 UI 컴포넌트 그리고 강력한 편집기능들을 제공하는 웹에서 웹이나 앱의 프로토타이핑을 쉽게 할 수 있도록 돕는 웹 서비스라고 한다.

등등 아주많은 프로토타입 도구들이 많이 존재한다.

위 도구들을 사용해서 그려보면 좋겠지만, 그 사용법을 사용하는데 시간도 걸리고, 아날로그?를 좋아하는 편이라 손으로 그려보았다...

프로토 타입을 통한 화면 구성

<메인화면>

메인화면은 크게, Top, Body, Bottom으로 구성해 보았다.
1. Top 
  - 왼쪽에 광고
  - 중간에 커뮤니티 이름
  - 오른쪽 로그인 기능

2. Body 
  - 커뮤니티 서비스 화면이 보여지는 곳
  - 루어낚시, 낚시스쿨, 중고장터, 공지사항 링크가 있고 검색기능이 있다.
  - 우측엔 광고를 박을 예정이다.
  - 중간엔 링크 카테고리별 최신 목록을 보여주도록 작성해 볼것이다.

3. Bottom
  - 개인 정보와 연락처가 보일 것이다.

<링크별 상세화면>




메인화면의 링크별 항목을 클릭하거나, 카테고리별 최신 목록을 클릭하면 나오는 화면이다.
1. 조행기(민물)
  - 지역, 낚시터명, 검색 기능이 있다.
  - 등록 날짜 최신 순으로 글 목록이 보여진다.
  - 글 목록엔 대표사진(없을수 있음), 제목, 간단내용이 표시된다.
  - 해당 목록을 클릭하면 글 상세보기로 이동한다.
  - 상세보기에선 댓글을 달 수 있고, 다시 목록으로 돌아오는 버튼이 있다.

2. 조행기(바다)
  - 1과 동일

3. QnA
  - 낚시 궁금사항을 묻고 답변하는 게시판이다.
  - 민물/바다 카테로리 하에 제목, 내용, 작성자 별로 검색을 할 수 있다.
  - 글은 등록 최신 순으로 보여진다.
  - 해당글 클릭 시 QnA 상세보기 페이지로 이동한다.
  - 상세보기 페이지는 제목, 글쓴이, 글이 보여지고 하단에 댓글을 달수 있다.

4. 같이가요
  - 같이 낚시가는 사람들을 모집하는 기능이다.
  - 지역, 제목, 작성자, 작성일, 조회 목록이 보인다.
  - 글은 등록 최신 순으로 보여진다.
  - 상세보기를 클릭하면 상세글과 댓글을 달 수 있다.

5. 로그인
  - 로그인은 id/pw 입력 후 로그인 버튼을 누른다.
  - 회원가입과 ID/PW 찾기 기능이 있다.
  - 페이스북 / 카카오로 가입하기 기능이 있다.

6. 회원가입
  - 회원가입은 성명, 생년월일, 성별, 휴대폰(인증), 아이디, 비밀번호, 이메일을 입력값으로 받는다.

프로토타입은 변경될 수 있으므로 처음엔 간단하게 요구사항대로 그려 보았고, 이 중에서 필수 기능이라고 생각되는 조행기(민물), 메인화면, 로그인, 회원가입을 먼저 진행해 보려한다.

프로토 타입을 그리는게 귀찮긴하지만, 머리속으로만 생각하며 개발하다 보면, 원했던 기능들이 먼 산으로 가는 경우가 있다. 나 같은 경우 만들어 보고 싶은걸 평소에 대중교통이나 신간이 짬짬히 남을때 그려보고 수정하다 보면 괜찮은 아이템을 건질 수 있지 않을까 생각한다 ㅎㅎ.

그럼 끝~!

댓글

이 블로그의 인기 게시물

[자바 웹 프로그래밍]2장 문자열 계산기 구현을 통한 테스트와 리펙토링

이번엔 2장에 나와 있는 내용 정리와 느낀점을 정리 해 보겠다. 1. main() 메소드를 활용한 테스트의 문제점.   - 소스코드 구현 후 정상적으로 동작하는지 확인 위해 일반적인 방법은 main()메소드를 활용하는 것이다.   - 실제 서비스를 담당하는 프로덕션 코드와 이 프로덕션 코드가 정상 동작 하는지 확인을 위한 main() 으로 나뉜다.   - 이 방법의 첫번째 문제점은 프로덕션코드와 main() 메서드가 함께 있다는 것이다.   - 프로덕션 코드와 테스트코드(main)을 분리할 수 있다.   - 두 번째 문제는 내가 구현하고 있는 메서드만 집중 할 수 없고, 클래스가 가지고 있는 모든 메서드를 테스트 할 수 밖에 없다.   - 다른 문제는 항상 콘솔로 확인을 할 수 밖에 없다는 것이다.   - 이를 위해 등장한 라이브러리가 JUnit 이다. 내 관심을 가지는 메서드에 대해 테스트 가능하다. 2. JUnit을 활용해 main() 메서드 문제 극복 2.1 한 번에 메서드 하나에만 집중.   - JUnit관련 라이브러리 추가 후  테스트 메서드에 @Test를 붙이면 된다.   - test 관련 코드 작성 후 Run > Run as> JunitTest를 실행해 보자.   - 각각 테스트 메서드를 독립적으로 실행할 수 있기 때문에 현재 내가 구현하고 있는 프로덕션 코드의 메서드에 집중할 수 있다. import org.junit.Test; public class CalculatorTest { @Test public void add() { Calculator cal = new Calculator(); System.out.println(cal.add(1,2)); } } 2.2 결과 값을 눈이 아닌 프로그램을 통해 자동화 import org.junit.Test; import static org.junit.Assert.assertEquals;

[고량주] 라오왕 연태고량주 플러스

나에게 처음 고량주란 이런것이다 라는걸 알려준 녀석이다. 부모님이 중국집을 하다 보니 가끔 초록색병 고량주를 먹었을때  역한 공업용 알콜 맛에 고량주는 나랑 안맞는다 생각했다가 우연히 양고기에 이녀석을 접한 뒤로 고량주의 맛을 알아버렸다... 제품명 : 라오왕 연태고량주플러스 제품유형 : 일반증류주 도수 : 34.2% 가격 : 9000원(홈플러스 익스프레스 기준) 재구매 의사 : 있다 시음평 : 역시 고량주 특유의 향인데, 열대과일 향도나고, 배향, 살짝 달달한 향이 난다.            목넘김은 34.2%에도 불구하고 그리 힘들지 않았다(주당이 된걸수도..)             중국요리나 양꼬치집에서 맛있는 술이 땡긴다면 강력추천한다.