- 프론트엔드(html, css, JavaScript)만을 이용해서 만들어졌습니다.
- 2030세대의 1인독립을 지원하는 정보를 제공하는 사이트입니다.
- 관리자가 2030 1인 독립 가구에게 도움이 될 것이라 생각하는 정보를 취합해 가공하고 가이드를 통해 제공합니다.
- 2030 1인 독립 가구들끼리의 정보를 주고 받기 위해 커뮤니티 게시판을 이용할 수 있습니다.
- 키워드를 통해 찾는 가이드를 쉽게 찾아볼 수 있습니다.
- 마음에 드는 가이드나 게시글에 좋아요를 누를 수 있고 게시글에 댓글을 달 수 있습니다.
| 김재원 | 김용 | 안준수 | 이석현 | 이제희 | 조해인 |
|---|---|---|---|---|---|
 @Jaewon94 |
 @kimYong91 |
 @Derit7042 |
 @maijjoo |
 @JHLEE91 |
 @Haein-Jo |
- 프론트 : HTML, CSS, JAVASCRIPT
- 데이터 : JSON
- 버전관리 : Github
- 협업툴 :
Github
(1. https://github.com/project-200OK/project-200-OK)
Figma
(1. https://www.figma.com/board/5Hs1rEnbBdbagu9XHfjP4I/200OK?node-id=0-1&t=mBgvhng4DqC4vXIV-1)
(2. https://www.figma.com/design/azzdeH6dJhrKeVkUWMFghy/200OK---1%EC%9D%B8%EA%B0%80%EA%B5%AC-%EC%82%B4%EC%95%84%EB%82%A8%EA%B8%B0?node-id=0-1&t=zpdRLx0qzZLKsJ06-1)
Google Drive
(1. https://drive.google.com/file/d/1lDdpNh3TMu_lYZqyGAtGUP7CkfTRomzl/view?usp=sharing)
.
├── README.md
├── admin
│ ├── board.html
│ ├── create.html
│ ├── css
│ ├── js
│ └── json
├── community
│ ├── board.html
│ ├── create.html
│ ├── css
│ ├── detail.html
│ ├── js
│ ├── json
│ └── update.html
├── guide
│ ├── board.html
│ ├── css
│ ├── detail.html
│ ├── js
│ └── json
├── images
│ ├── banner
│ ├── communityimg
│ ├── guide
│ ├── icons
│ └── index
├── index
│ ├── css
│ ├── images
│ ├── js
│ └── json
├── index.html
├── index2.html
├── json
│ ├── community.json
│ ├── guide.json
│ └── user.json
├── member
│ ├── calendar.html
│ ├── css
│ ├── js
│ ├── json
│ ├── like.html
│ ├── login.html
│ ├── resign.html
│ ├── signUp.html
│ └── update.html
├── search
│ ├── css
│ ├── js
│ ├── json
│ └── searchBoard.html
└── template
├── css
├── footer-only.html
├── header-only.html
├── js
├── json
├── sidebar-only.html
└── template.html
- UI
- 페이지 : 커뮤니티 게시판, 게시글, 게시글 쓰기/수정
- 공통 컴포넌트 : 헤더, 푸터, 사이드바
- UI
- 페이지 : 메인, 통합검색 화면 구현작업
- UI
- 페이지 : 관리자 게시물 관리, 좋아요 화면 구현작업
- UI
- 페이지 : 가이드 목록, 가이드 상세 화면 구현작업
- UI
- 페이지 : 문서작업, JSON 데이터 작업
- UI
- 페이지 : 로그인,회원가입,회원탈퇴,나의캘린더,회원정보수정 화면 구현작업
- 전체 기간 : 2024-08-02 ~ 2024-08-14
- 문서 작업 : 2024-08-02 ~ 2024-08-05
- UI 구현 : 2024-08-05 ~ 2024-08-12
- 결과 보고서 작성 : 2024-08-13
- 발표 : 2024-08-14
- 200OK - MZ-ONE 산출물 (https://drive.google.com/file/d/1lDdpNh3TMu_lYZqyGAtGUP7CkfTRomzl/view?usp=sharing)
| 구분 | 내용 |
|---|---|
| 헤더 | - 모든 페이지에서 공통으로 사용하는 부분입니다. - 홈, 가이드, 커뮤니티로 이동합니다. - 검색을 통해 해당 통합검색으로 이동합니다. |
| 푸터 | - 모든 페이지에서 공통으로 사용하는 부분 - 프로젝트의 기본 설명이 있습니다. |
| 사이드바 | - 마이페이지에서 공통으로 사용하는 부분 - 마이페이지에서 원하는 페이지로 이동하는 링크가 있습니다. |
| 메인(index) | - 홈페이지의 메인 정보인 가이드와 인기 키워드를 볼 수 있습니다. - 가이드와 키워드를 클릭하면 해당 정보의 목록을 보여주는 페이지로 이동합니다. |
| 가이드 목록 | - 서비스에서 제공할 가이드 별 목록을 보여줍니다. - 키워드 별로 분류해서 볼 수도 있습니다. |
| 가이드 상세 | - 해당 글의 내용과 출처 등을 확인할 수 있습니다. - 마음에 들면 좋아요를 해서 스크랩을 할 수 있습니다. |
| 커뮤니티 목록 | - 유저들이 소통을 할 수 있는 공간입니다. - 자유롭게 작성한 글의 목록을 볼 수 있습니다. |
| 커뮤니티 상세 | - 유저들이 작성한 글을 볼 수 있습니다. - 마음에 들면 좋아요를 해서 스크랩을 할 수 있고, 댓글을 작성할 수 있습니다. |
| 통합검색 | - 홈페이지에있는 필요한 정보의 목록들을 검색하고 볼 수 있습니다. - 검색한 정보를 클릭하면 해당 정보의 상세보기 페이지로 이동합니다. |
| 로그인 | - 가입시 작성한 정보를 기반으로 사용자의 신원확인 및 접근에 대한 권한, 로그인상태를 유지하고 사용자를 관리하기 위한 화면입니다. |
| 회원정보수정 (마이페이지) |
- 가입시 입력한 정보를 기반으로 회원정보를 관리 할 수 있는 화면입니다. - 해당 화면에서는 사용자의 비밀번호, 거주지를 수정 할 수 있습니다. |
| 좋아요 (마이페이지) |
- 좋아요 하트를 표시한 가이드와 게시물을 볼 수 있습니다. |
- 처음으로 단체로 해보는 프로젝트라서 많은 부분이 어려웠던 것 같다. 프로젝트를 시작하기에 앞서 문서화를 진행해 보던가 체계적인 설계는 어떻게 할지, 어떻게 협업을 진행할지등 많은 부분에서 어려움을 겪었던것 같다. 하지만 직접 해보니 점점 어떤식으로 해야할지 다음은 어떤식으로 해볼지, 무엇을 사전에 배워서 적용해볼지등 다양한 경험을 쌓을 수 있는 좋은 기회였던것 같다. 다음 협업 프로젝트는 더 체계적이고 소통을 잘 할 수 있도록 미리 공부하고 준비해야겠다.
- 프로젝트에서 코드를 짜기 전에 문서화 부터 제대로 진행해봤던 프로젝트는 처음이라서 많이 어려웠던 것 같다. 작성할 문서들이 많았지만 하나씩 팀원들과 차근히 진행하니까 크게 어렵지 않게 진행할 수 있었고, 문서 작업의 중요성을 느낄 수 있는 소중한 기회였던 것 같다. 그리고 깃허브를 다루면서 merge를 할 때 그 동안 충돌난 상황을 많이 경험해보지 않아서 충돌난 코드를 처리하는 것이 익숙하지 않았지만, 이번에 그러한 경험을 많이 쌓으면서 익숙해질 수 있게 되었다. 여러모로 부족한 경험들을 쌓을 수 있었던 좋은 기회였다.
- 협업 팀 프로젝트는 처음이라 깃 사용부터 소통 과정까지 어려움이 많았다.
- 기획, 문서화 작업부터 체계적으로 시작한 프로젝트는 처음이다 보니 시작할 때는 이런 과정을 왜 진행하는지 몰랐고 마냥 지루하기만 했다. 하지만 코딩을 하면서 문서화가 왜 필요한지, 체계적인 기획 과정이 왜 필요한지 깨닫게 되었다.
- 풀스택 교육 과정 중 프론트엔드 미니 프로젝트로 진행했기 때문에, 백엔드 없이 프론트엔드만으로 구현한 프로젝트이다. 따라서 JSON 파일만으로는 원하는 기능을 구현하기에 한계가 있어서 아쉬웠다.
- 프로젝트 기간이 짧았고, 특히 코딩 기간이 촉박했기 때문에
- 협업을 통하여 많은 것을 알 수 있는 시간이었습니다. 혼자라면 할 수 없었던 생각과 기획을 협업을 통하여 혼자 보다 더 좋은 기획과 다양한 생각을 접할 수 있었고, 문서를 작성하는 방법을 배우게 되었습니다. 코드를 작성할 때 누군가에게 코드를 보여줄 생각을 하지 못하여 주석에 대한 필요성을 느끼지 못했는데 같이, 그리고 도움을 받는 상황이 많아지다 보니 주석의 중요성을 알게 되었으며, 다른 사람에게 자신의 코드를 설명하는 시간을 가지다 보니 코드를 이해하는 것이 얼마나 중요한지 다시 한번 느끼게 된 시간이었습니다. 다음에는 기본 코딩의 실력은 물론이고 코드를 정리하고 이해하는 능력과 자신의 생각을 문서화할 수 있는 연습을 해야겠다는 새삼 당연한 각오를 가지게 되었습니다.
- 프로젝트의 의미를 정확히 이해하지 못한 상태에서 "직접 몸으로 느껴볼 수 있는 첫 디딤이였다." 라고 말하고 싶습니다. 전반적인 흐름이 어떻게 되는지 파악이 안된 상태에서 기존에 알고 있는 조사 - 분석 - 기획 - 실행 이라는 기본적인 구조로 생각하고 비슷하겠지 하고 접근했지만 한 가지 간과 했던 것은 기획과 생산적 활동(개발)이 같이 진행된다는 것이였습니다. 이에 따른 기본적인 조사-분석-기획-실행 중 특히 분석 단계는 좀 더 조사 단계에서 요구사항에 대한 분석이 기획 및 실행 단계에서 개발 간에 좀 더 세부적인 제한사항(가이드라인 → 개발도구, 가이드라인, 흐름도)을 명확하게 하여야 한다는 것을 느낄 수 있었습니다. 아직 코딩 및 기술을 사용하는데 어려움이 많아서 이를 어떻게 문서에 녹여서 기획-실행을 해석 하는데 맞게 할 지 더욱 고민 한다면 좋겠습니다. 이번 프로젝트로 개발 간의 요구한 내용에 대한 전반적 코딩의 흐름을 머리로 생각 할 수 있게 되었다는 것이 좋은 점이였고. 특히 프로젝트 시작 - 종료 이 사이에 들어가는 전반적 행동을 위한 문서 작업의 틀을 초기모델로 제안 할 수 있을 거 같아서 좋았습니다.
- 프로젝트를 진행하면서 여러 가지로 배울 점이 많았습니다. 특히, 실무에서 사용하는 서류를 직접 작성해보는 경험이 인상 깊었습니다. 문서를 작성하는 과정에서 어떤 방식으로 접근해야 할지 많은 고민을 했고, 익숙하지 않은 작업이라 처음에는 어려움이 있었습니다. 하지만 팀원들의 도움 덕분에 문서 작성도 무사히 마칠 수 있었고, 개발 작업 또한 팀워크가 잘 맞아 성공적으로 마무리할 수 있었습니다. 이번 프로젝트를 통해 느낀 점들을 바탕으로, 다음 프로젝트에서는 더욱 발전된 모습으로 참여하고 싶습니다.