구름톤 유니브 전남대학교 공식 웹사이트
- 2024년 9월 8일부터 10월 10일까지 진행한 교내 프로젝트 기간동안 개발이 가능한 아이디어를 고르는 과정에서 최종 아이디어로 '구름톤 유니브 전남대학교 웹사이트 제작'이 선정되었습니다.
- 동아리 내에서 진행하는 활동들을 기록하고 공유하고, 로그인 기능을 통해 동아리 회원 관리 및 일정 관리가 가능합니다.
- 미르미(동아리 회원)들의 동아리 활동을 기록하고 공유하며, 또한 IT 서비스 개발에 관심이 있는 전남대학교 재학생들에게 동아리를 홍보하는 웹사이트를 기획하고 개발합니다.
- 교내 미르미들과 함께 프로젝트를 진행해보며 추후 해커톤(단풍톤)을 대비합니다.
- Notion, Figma, Discord 등 협업 서비스를 사용하여 활발한 소통을 바탕으로 효율적인 협업을 통해 공동의 목표에 달성합니다.
구름톤 유니브 전남대학교 교내 프로젝트 B팀입니다.
| 파트 | 이름 | 기수 | GitHub |
|---|---|---|---|
| Frontend | 김윤선 | 3기 | @goodoong |
| Frontend | 이경민 | 2기 | @2kmkmkm |
| Backend | 김상훈 | 2기 | @ben7094 |
| Backend | 김채흔 | 2기 | @ChaeheunKim |
| Backend | 나인혜 | 3기 | @inhvee |
| Backend | 전석균 | 3기 | @jsg9987 |
| PM | 박지환 | 2기 | @latencyspace |
| Design | 최지원 | 2기 | @jiiiwonyy |
이번 교내 프로젝트를 진행하며 사용한 기술 스택을 정리한 섹션입니다.
| 카테고리 | 프레임워크 & 라이브러리 |
|---|---|
| Frontend |        |
| Backend |    |
| Collaborative |     |
아래 링크를 통해 개발 레포지토리 및 관련 문서들을 확인하실 수 있습니다.
| 카테고리 | 링크 |
|---|---|
| Frontend Repository | GitHub |
| Backend Repository | GitHub |
| UI Design | Figma |
| Function Flowchart | FigJam |
| ERD | ERDCloud |
| API Specification | Notion PDF |
-
로그인 및 회원가입
-
사용자는 회원 정보를 입력하여 웹사이트에 가입할 수 있으며, 가입 단계에서 이메일 인증을 통해 회원가입을 완료할 수 있습니다.
-
회원가입 단계 이후, 추가적인 절차를 통해 교내 미르미인지 검증하는 단계를 거쳐 검증된 사용자라면 승인되어 로그인이 가능하도록 합니다.
로그인 및 회원가입
- 로그인
- 회원가입
- 회원가입 관련 상태변화
- 승인 대기
-
-
메인 페이지
-
메인 페이지에서는 저희 동아리에 관한 간단한 소개와 함께 어떠한 활동이 이루어지고 있는지, 그리고 교내 및 중앙 행사 일정을 확인하실 수 있습니다.
메인 페이지
-
-
멤버 페이지
-
회원가입 이후 승인된 사용자는 해당 페이지에 등록되며, 사진/기수/파트와 같은 개인 정보는 마이 페이지에서 수정할 수 있습니다.
-
상단에 배치된 파트별/기수별 필터링 기능을 통해 원하는 정보를 빠르게 찾아볼 수 있도록 합니다.
멤버 페이지
-
-
액티비티 페이지
-
동아리에서 이루어지는 모든 활동을 액티비티 페이지에서 확인할 수 있으며, 세부 항목으로는 프로젝트(교내, 해커톤)/세미나/스터디/네트워킹이 있습니다.
-
컨텐츠 박스에는 간략하게 컴포넌트 형식으로 정보가 제공되고, 각 항목별로 자세한 정보는 컨텐츠 박스를 클릭하여 나타나는 모달창을 통해 확인할 수 있습니다.
액티비티 페이지
- 프로젝트 카테고리
- 컨텐츠 박스 클릭 시 모달창
- 세미나 카테고리
- 네트워킹 카테고리
-
-
리크루트 페이지
-
동아리에 관심이 있는 재학생 또는 모집 기간에 동아리원 모집 대한 정보를 확인할 수 있도록 제작한 페이지입니다.
-
이전 모집 공고글/FAQ 등 다양한 정보를 제공하고 있습니다.
리크루트 페이지
-
-
마이 페이지 및 일정 페이지
-
로그인을 하게 되면 상단 네비게이션 바의 우측에 위치한 회원 사진 아이콘을 클릭하여 마이 페이지 또는 일정 페이지로 이동이 가능합니다.
-
마이 페이지를 통해 회원 정보(사진, 파트, 기수 등)의 추가 및 수정이 가능합니다.
-
일정 페이지에서 동아리의 전반적인 행사 정보를 달력 형태로 확인할 수 있고, 추가/수정은 관리자만 가능합니다.
마이 페이지 및 일정 페이지
- 내 정보 수정
- 비밀번호 변경
- 비밀번호 변경 - 오류 메세지
- 일정 페이지
-
-
관리자 페이지
-
동아리 행사 또는 일정을 기록하고 수정하기 위해 만든 기능입니다.
-
관리자 계정으로만 엑세스가 가능하며, 회원 관리/일정 관리/게시글 관리 기능을 지원합니다.
관리자 페이지
- 회원 관리
- 일정 관리
- 게시글 관리
-
아래 토글을 통해 대략적인 교내 프로젝트 기간 내 스케쥴을 확인하실 수 있습니다.
Schedule
- 대략적인 일정(기획/디자인/개발 기간)을 정하고 두 번의 프로젝트 아이디어 회의를 거쳐 최종 아이디어를 선정하였습니다.
- '구름톤 유니브 전남대학교 공식 웹사이트'에 필요한 기능들에 대해 추가적인 아이디어 회의를 거쳐 필요한 기능들을 모두 정했습니다.
- 정해진 기능들을 바탕으로 컨텐츠 및 웹사이트 스케치를 진행하고, 해당 내용을 노션에 기록하였습니다. Notion PDF
- 디자인 파트와 회의를 통해 기능과 스케치에 대한 설명을 드리고 API 명세서 및 ERD 작성을 위한 기능 플로우를 만들었습니다. 해당 내용은 상단의 개발 문서 항목에서 확인하실 수 있습니다.
-
텍스트와 컬러 스타일을 미리 등록하여 일관성 있는 디자인을 할 수 있도록 세팅하였습니다.
스타일 등록
-
페이지 작업 시 컴포넌트의 분류가 용이하도록 관련 페이지 옆에 컴포넌트를 정리하였습니다.
페이지 간 컴포넌트 분류
-
다양한 동아리 웹사이트 랜딩 페이지 레퍼런스를 조사하는 과정에서 애니메이션을 많이 활용함을 알게 되어 상태 변화에 따른 컴포넌트를 신경썼고 피그마의 Interaction 기능을 활용하여 제작하였습니다.
상태 변화가 일어나는 컴포넌트 Variants 등록
| 파트 | 이름 | 개발 업무 |
|---|---|---|
| Frontend | 김윤선 | 메인 페이지, 멤버 페이지, 리크루트 페이지, 마이 페이지, 일정 페이지 개발 |
| Frontend | 이경민 | 공통 컴포넌트, 로그인 및 회원가입 페이지, 회원가입 승인 대기 페이지, 관리자 페이지 개발 및 라우팅 |
| Backend | 김상훈 | React 캘린더 라이브러리를 사용한 일정 관리(일정 조회/추가/수정/삭제) 기능 개발 |
| Backend | 김채흔 | 로그인 및 회원가입, 동아리 멤버 리스트 조회 기능 개발 |
| Backend | 나인혜 | 마이 페이지(조회, 세부 정보 수정 및 삭제, 프로필 사진 업로드, 비밀번호 변경 요청) 기능 개발 |
| Backend | 전석균 | API 명세서 및 ERD 작성 총괄, 게시글 관리(게시글 리스트 조회, 게시글 수정 시 이미지 첨부 모달, 게시글 등록/수정/삭제) 기능 개발 |
- 프로젝트 기획 및 디자인 기간 동안, 개발에 사용할 기술 스택을 정리하고 깃허브 환경 세팅 및 연동을 해두었습니다.
- 각자 맡을 파트를 분배하고 재사용을 위한 공통 컴포넌트를 구현해 두었습니다.
- 피그마 디자인 작업과 동시에 화면 개발을 시작하였고, 전체적인 개발 마무리 후 백엔드와 API 연동을 진행하였습니다.
- 스프링 부트 기본 세팅 이후 Configuration과 Redis, 그리고 MySQL DB 세팅 및 JPA와 Security 기본 설정
- 로그인, 마이 페이지, 멤버 페이지, 일정 관리 페이지, 게시글 페이지 별로 나눠 API 명세서 작성
- 회원, 마이 페이지 등 각 엔티티 간의 관계 설정 및 변수 설정을 위한 ERD 작성
- API URL과 요청 및 응답값 작성
-
이슈
- 저희 프로젝트는 협업을 노션과 디스코드를 통해 진행하였고, 노션의 <기획> 페이지와 <기능 명세서> 페이지를 보고 피그마로 디자인을 진행하였습니다.
- 하지만 기능 명세서 부분의 정보가 정확하지 않아서 기획 페이지와 기능 명세서 페이지를 번갈아가며 확인해야 하는 번거로움이 있었습니다.
- 또한 기능 부분이 정확하게 명시되어 있지 않은 부분들이 있어서 해당 부분을 디자인할 때 어려움이 있었고, 기획 페이지만 보고 디자인을 했다가 API 명세서와 다른 부분이 있어 디자인을 다시 수정해야 했습니다.
-
트러블 슈팅
- 팀 노션에 API 명세서와 ERD가 있어 상세한 부분(게시글 정보, 회원가입 정보 등)은 해당 페이지를 참고하며 페이지 제작을 완료하였습니다.
-
이슈
- CSS 작성 시, 컴포넌트 배치나 반응형 디자인 적용에 어려움을 느꼈습니다.
- 각자 개발을 진행하다보니 겹치는 컴포넌트를 따로 만들 때가 있었습니다.
- 와이어프레임과 화면 비율이 달라서 전체적으로 보이는 크기가 달랐었습니다.
-
트러블 슈팅
- CSS 공식 문서와 구글링을 통해 활용법과 예시를 알게 되었고, 알맞은 코드들을 하나씩 적용해보며 디자인의 변화를 확인하였습니다.
- 사전에 기존 컴포넌트들을 제대로 숙지하고 비슷한 것이 있는지 확인하고 최대한 재사용하려 노력하였습니다.
- 양쪽 여백은 최대한 비슷한 비율로 나타내려고 하였고, 여러 컴포넌트들이 화면에 스크롤 되는 경우에는 하나의 내용으로 묶일 수 있는 컴포넌트가 전부 나올 수 있도록 고려하였습니다.
-
이슈
- 게시글 페이지에서 사진 업로드 API를 만드는 과정 중, Form Data가 아니라 json과 Multipart 두 가지 자료형으로 보냈어야 하는 상황에서 어노테이션을 사용해 파싱을 진행하였습니다.
- List 안에 오브젝트 형태로 key와 value가 들어가 있는데, 로직 상에서는 List으로 처리를 해서 파싱이 제대로 되지 않는 문제가 발생하였습니다.
-
트러블 슈팅
- 위 이슈는 자료 구조 문제였으며, List<Map<String, Object>>로 변경하고 로직을 수정하여 해결하였습니다.
- 제한된 기간 내 기능 구현을 위한 개발에 초점이 맞춰져 있던 프로젝트지만 이후 리팩토링 및 디벨롭을 할 예정이었기 때문에, 교내 프로젝트 기간이 마무리되고 교내 미르미들의 의견을 받아 추가/수정하고 지속적으로 배포할 예정입니다.
- 웹에 맞춰 제작되어졌기 때문에 모바일에서 봤을 때를 고려한 모바일 버전의 레이아웃 제작 및 반응형 웹사이트 개발을 계획 중에 있습니다.
- 기간별로 계절에 맞는 에셋(벚꽃, 단풍)을 이용한 웹사이트 디자인을 변경할 예정입니다.