SeSAC 수강생들을 위한 프로젝트 매칭 플랫폼
| 이름 | 포지션 | |
|---|---|---|
| 김소연 | 기획/퍼블리싱 | kimsoso4638@gmail.com |
| 양희광 | 프론트엔드 | ekzm7040@naver.com |
| 유미정 | 프론트엔드 | ymj369@nate.com |
| 이지현 | 프론트엔드/퍼블리싱 | lkf6214@gmail.com |
| 이화랑 | 기획/UXUI | hrlee2929@gmail.com |
SeSAC 웹 퍼블리싱 교육과정 팀프로젝트 발표 대상 (1위)
| 메인 | 온보딩 |
|---|---|
 |
  |
✨메인
[미정]
- 시안에 맞게 UI 디테일 수정
- 반복되는 코드를 함수로 묶거나 반복문을 사용하여 간결하게 하는 작업
[희광]
- JavaScript를 활용하여 header,footer 각 페이지별 동일하게 구현
- flex를 이용한 main page 구현
- swiper library를 통해 banner 구현
- JavaScript를 활용하여 하트클릭 on/off 구현
- localStorage를 활용하여 하트 수량 체크 구현
✨온보딩
[지현]
- 설명텍스트
[소연]
- 레이아웃 구성과 페이지 이동 기능 구현
| 랜덤매칭 | 공간예약 |
|---|---|
 |
 |
✨랜덤매칭
[소연]
- sweetalert2 를 이용한 모달창 구현
✨공간예약
[지현]
- 설명텍스트
| 마이페이지 | 프로젝트 리스트 |
|---|---|
 |
 |
✨마이페이지
[지현]
- 설명텍스트
✨프로젝트 리스트
[미정]
- 직무, 캠퍼스 선택 기능 구현
- 캠퍼스 선택 시 취소할 수 있고 5개까지 선택 가능 기능 구현
- 스크롤바를 끝까지 내리면 새로운 리스트가 한 줄씩 나오는 기능 구현
- 반응형 구현
-검색어를 입력하고 제출하면 주소를 이용해 Project list page로 입력값을 전달할 수 있도록 구현
| 프로젝트 생성 | 프로젝트 상세 |
|---|---|
 |
 |
✨프로젝트 생성
[미정]
- 반응형 구현
- 수량 선택 기능 구현
- input을 이용해 정보를 입력 기능 구현
- datepicker 플러그인을 사용하여 날짜를 선택 기능 구현
- CKeditor 플러그인을 사용하여 텍스트편집, 사진편집 등 기능 구현
✨프로젝트 상세
[희광]
- 모집현황 고정을 위해 position.: fixed 를 주어 스크롤이 내려갈때 따라가게 구현
| DAY | TASK |
|---|---|
| 기획/디자인 중심 (8/4 ~9) |
- 프로젝트 주세선정 - 협업툴 결정 ( slack,Figma)- 필요기능 나열 후 페이지 도출 - 각자 페이지를 나눠 내용 구체화 후 와이어프레임 작성 - 와이어프레임 피드백/수정 - 페이지 디자인 완성 |
| 개발 중심 (8/10 ~20) |
- 규칙/개발환경 세팅 - root.css / global style 설정 - 디렉토리 구조 설정 - 각자 페이지 맡아 개발시작 - 반응형 구현 - 페이지 배포/에러수정 - 발표자료 준비 |
| 발표 (8/21) |
- 프로젝트 발표/시연 |
├── 📁 src
│ ├── 📁 components
│ │ ├── 📁 AuthInputForm
│ │ ├── 📁 ChatUserItem
│ │ ├── 📁 UserSearch
│ │ └── 📁 common
│ ├── 📁 constants
│ ├── 📁 hooks
│ ├── 📁 pages
│ │ ├── 📁 Auth
│ │ ├── 📁 Splash
│ │ └── 📁 Welcome
│ ├── 📁 routes
│ └── 📁 styles
└──
| 프로젝트 회고 | |
|---|---|
| 소연 | - 2주라는 기간 내에 어떤 주제를 선택해야 하는지 어느 정도의 결과물이 나와야 하는지에 대한 가이드라인이 따로 없어 초점을 잡기가 어려웠던 것 같습니다. 이런 디자인 개발 프로젝트 자체가 처음이어서 전부 다 생소했고 저희가 선택한 주제가 플랫폼 구축이라 일상적인 주제가 아니어서 더 다가가기 어려웠던 것 같습니다. - 기획/디자인이 탄탄하게 완성되면 개발도 피그마를 보며 수월하게 맞춰서 진행될 수 있다는 걸 느꼈고 덕분에 피그마 사용의 중요성을 깨닫게 되었습니다. 다음엔 부족한 점을 보완하여 반응형도 직접 해보고 싶습니다. |
| 희광 | - 이번 프로젝트하면서 리더님이 기획 및 피그마로 디자인 부분을 먼저 해주신 덕에 고민 없이 코딩에만 집중할 수 있었다고 생각합니다. 이를 통해 기획 및 피그마가 얼마나 프로젝트를 하면서 시간과 협업에 도움이 되는지 알게 되었습니다. - 아쉬웠던 점은 실력이 부족하여 기능 구현을 하는데 시간이 소비가 많았다는 점과 구현을 못한 점에서는 아쉬움이 남습니다. JS의 공부의 필요성을 느꼈습니다. |
| 미정 | - 저는 처음 팀 프로젝트를 한 거였는데 하기 전에는 의견이 잘 맞춰지지 않아서 갈등 상황이 생기지 않을까 걱정을 많이 했었는데요. 다행히 의견 충돌은 없었고 의견이 상충되더라도 서로 소통을 통해서 더 나은 방법으로 맞춰갈 수 있었습니다. - 팀 프로젝트를 하면서 기획이 엄청 중요하다고 느꼈습니다. 처음에 기획을 잘 세워놓으면 프로젝트의 방향성을 잃지 않고 추후에 수정할 것도 적은 거 같습니다. 다음에 또 팀 프로젝트를 하게 되면 더 탄탄하게 기획을 세우고 프로젝트를 시작하고 싶습니다. |
| 지현 | 1. 역할분담이 잘 이루어졌다. (기획/디자인/퍼블리싱/발표) 2. 페이지 분담 후 각자 맡은 페이지를 디자인 한 뒤에 한 사람이 디자인을 통일시켰는데 통일성 있는 페이지의 중요성을 느꼈다. - 색상, 간격, 폰트, 공통 컴포넌트 등, 페이지 디자인이 안정적으로 보인다! - 디자인이 정해진 후 코드를 짜니 차근차근 목표에 도달하는 느낌을 받았다 - 피그마로 협업한 것이 좋은 경험이었다고 생각한다! (자유자재로 이용하지는 못하지만! 디자인을 경험👍 원하는 곳에 코멘트 남기기👍) 3. 피그마를 토대로 global_style을 만들고 활용했는데 초반엔 쉽게 사용하다가 갈수록 복잡해졌다 class이름을 잘 설정해야겠다. 4. 리더님이 기획/디자인/교통정리/발표준비를 해서 편안하게 작업할 수 있었다. 감사합니다! 아쉬운/보완할점 1. 반응형과 능력을 넘어선 기능 구현... 백엔드 영역은 더 공부해 볼 것이고 발표가 끝난 뒤 보완할 예정이다 2. 공통으로 사용되는 파비콘을 헤더(헤더 푸터 include사용)에 넣으면 될 줄 알았는데 모든 페이지에 넣어주어야 했음 3. 디렉토리 구조관련 (페이지별로 폴더를 만들었는데 다음부터는 HTML, JS, CSS별로 폴더를 나눌 것) |
| 화랑 | - 좋았던점👍 막연하게 생각하던 주제를 기획과 디자인을 통해 구체화 하는 부분이 재밌었습니다. 개발 담당분들이 기획 의도는 지키되 좀 더 만들기 쉬운 방법들을 제안해주신 부분이 좋았습니다. 시간상 반응형을 못할거라 생각했는데 발표 전날 새벽까지 열심히 작업한 팀원들의 열정에 감동했습니다. - 아쉬운/ 보완할점👏 짧은 시간내로 많은 페이지를 만들어야 하다보니 유효성 체크 등 UX측면은 생략한 부분이 있어서 아쉬웠습니다. 프로젝트가 끝난후 부족/생략한 부분을 모두 완성하고 시간 단축을 위해 사이드 프로젝트때 사용할 범용적인 디자인 시스템을 만들어야겠다 결심했습니다. |
