[Web] SNS형 게시판 만들기 프로젝트 (1) - 스토리보드 구성

이번 학기에 웹 프로그래밍 강의를 듣습니다.

 

예전에 고등학교 시절에 웹 프로그래밍을 간단히 해본 기억이 있어서 부담감은 좀 적긴 한데요.

 

HTML5, CSS3, JSP를 이번 수업에서 배우게 됩니다.

 

웹 프로그래밍 수업 최종 프로젝트가 수업을 하면서 진행을 하게 됩니다.

 

이번 주제는 'SNS형 게시판 만들기'입니다.

 

공부한 걸 복습할 겸 제 프로젝트 기록을 작성해 봅시다.

---

저희 학교는 웹 프로그래밍을 할 때 Java Server인 JSP를 쓰기로 했기 때문에 eclipse를 활용합니다.

 

사실 코딩의 전반적인 걸 이클립스로 해야 하지만 이클립스는 너무 버그도 많고 구리기 때문에....

 

저는 서버가 필요한 상황 아니면 아톰(Atom) 에디터를 활용하겠습니다.

 

아톰 에디터는 여러가지 플러그인을 설치하면 굉장히 편리합니다.

제가 사용하는 아톰 플러그인이 궁금하시면 제가 작성한 글을 참고해주시길 바랍니다.

 

[Project/Web] - [Web] 아톰(Atom) 에디터 사용 플러그인

[Web] 아톰(Atom) 에디터 사용 플러그인

제가 웹 제작을 할 때 고려한 것은 간단하게 아래와 같습니다.

< 고려사항 >

1. 일단 예뻐야 한다.

2. 현실적인 기능

3. 예쁘되 simple해야 한다.

프런트엔드 개발자는 전체적인 사용자에게 주어지는 화면을 잘 구성을 해줘야 합니다.

 

 결국에는 일반인들이 사용할 줄 모르거나 사용자들을 이끌 수 없으면 실패한 디자인이 되게 됩니다.

 

저는 일단 외관상으로는 예뻐야 하고 제가 좋아하는 것이 심플한 디자인이기 때문에 심플함을 핵심으로 보겠습니다.

 

기능은 사실 외관 디자인보다는 백엔드 쪽이니까 skip 하겠습니다.

 

다양한 SNS 사이트들을 돌아보면서 제가 참고한 SNS는 바로 인스타그램입니다.

 

심플함과 예쁜 디자인을 모두 갖춰서 많은 사용자들이 사용하는 대표 SNS입니다.

 

사실 인스타그램은 모바일에 최적화된 SNS라 웹 인터페이스는 크게 특별한 것은 없습니다.

 

하지만 충분히 간단하지만 예쁜 디자인을 살린 웹입니다.

---

이제 대략적으로 비슷한 디자인을 구상했으니 스토리보드를 디자인해 봅시다.

 

가장 기본적으로 로그인 페이지입니다. 체크박스를 통해서 관리자 로그인 여부를 확인할 예정입니다.

 

회원가입, 로그인 두 개로 구분 버튼을 만들 예정입니다.

 

전체적으로는 메인 화면을 section태그로 설정해서 적당히 픽셀 조절로 가운데에 위치시켜야겠습니다.

회원가입 페이지입니다. 사진을 가져올 수 있게 만들고, 기본적인 선택사항을 입력 가능하게 해 줍니다.

 

생년월일은 목록 상자로 구현합니다.

 

일반적으로 로그인을 진행하면 보이는 초기화면입니다.

 

개인 사진과 닉네임을 설정하면 표기를 해줍니다. 그리고 로그아웃을 하면 맨 처음 페이지로 이동합니다.

 

게시글의 전체적인 디자인은 인스타그램의 게시글 느낌으로 보이게 할 예정입니다.

 

사진 게시는 글쎄요.... 어떻게 할지 참 고민이 많습니다.

 

사실 제일 초라해 보이는 게시글 작성 페이지입니다.

 

도저히 생각해도 이 이상의 디자인이 생각이 안 납니다.ㅠㅠ

 

이 쪽 파트를 여러 페이지를 돌아보면서 디자인 구상을 해야겠습니다.

 

이건 사실 일반 사용자에게는 보일 수 없는 화면입니다.

 

Master 관리자, 즉 페이지 제작자가 관리자 권한을 부여한 회원에 한해서만 접속이 가능합니다.

 

회원정보 수정, 삭제가 가능합니다.

 

관리자 권한 부여 기능은 master 관리자만 할 수 있습니다. 관리자와 master관리자, 일반회원 구분은 Database에서 특정 key값으로 구분을 할까 구상 중입니다.

 

사실 스토리보드 관련은 별로 작성할 게 많지 않네요. 이미 학교 과제로 제출한 ppt에서 캡처만 떠서 자세한 구상을 적기만 했습니다.