온보딩 웹 개발 프로젝트
우리만의 이야기를 담을 수 있는 팀 소개 웹페이지 만들기
F1T4 프로젝트
프로젝트 개요

1

F1T4팀 소개

2

와이어프레임 초안

3

최종 와이어프레임

4

팀원 역할 분담

5

시연영상

6

사용 기술

7

어려웠던 점 및 문제 해결

8

향후 계획과 각오
1. F1T4 팀 소개
"T사이에 F는 귀하다"
우리 팀은 'T' 4명과 'F' 1명으로 구성되어 있습니다.
우리는 각자의 다름을 존중하고, 서로의 강점을 살려 협력하여 최고의 결과를 만들어냅니다.
F1T4 팀 프로젝트 목표
F1T4 팀의 비전과 가치를 효과적으로 전달하기 위해 팀원들의 개성과 스토리를 담은 협력적 웹페이지 제작을 목표로 합니다.
2. 와이어프레임초안
  • 각 팀원들이 제시한 초기 구상안 및
  • 아이디어 목록 공유
  • 팀원들 간의 구상안 리뷰 및 피드백 주고받기
  • 아이디어 조합하여 구상플로우 검토
  • 개선된 플로우 확인 후 기능 팀원 회의
  • 담당 튜터님 피드백
  • 반영사항 및 개선 사항 재확인
3. 최종 와이어프레임
  • 과정
  • 초기 초안을 바탕으로 각자의 의견을 반영하여 디자인을 수정하고 개선.
  • 팀원들의 의견을 반영하여, 사용자 경험을 고려한 직관적이고 깔끔한 레이아웃 설계.
  • 팀 내 협력을 시각적으로 나타내기 위해 협업 요소와 디자인을 강조.
  • 주요 특징
  • 각 팀원이 자신을 표현할 수 있는 영역을 확보
  • 협력의 중요성을 시각적으로 표현할 수 있는 디자인 요소 추가.
  • 다양한 화면 크기에서 웹페이지가 잘 동작하도록 최적화.
4. 팀원역할분담

1

메인페이지 HTML 제작
(현우님)

2

응원하기 모달 페이지 HTML 제작
(유빈님)

3

메인페이지 CSS, 목표 페이지 제작
(수린님)

4

팀 응원하기 모달 페이지 CSS
(지연님)

5

버튼 상호작용(스크립트) 구성

6

팀 소개 페이지 모달 구상
(재영님)
5. 시연영상
6. 사용기술
HTML
메인 및 응원 페이지 구조 설계
CSS
메인 및 응원 페이지 디자인
JavaScript
버튼 상호작용 및 동적 기능 구현
Firestore
데이터 관리 및 저장
GitHub
팀 협업 및 버전 관리
HTML 와이어프레임 및 상세 페이지 설계
시맨틱 태그 활용
팀원 소개, 목표와 약속, 방명록, 모달 화면 등 총 4가지 섹션으로 구성. 시맨틱 태그를 사용하여 웹 페이지의 구조를 명확하게 함.
데이터 속성 활용
데이터 속성을 활용하여 효율적인 구분과 의미 전달을 강조. 사용자 정의 데이터 속성을 사용하여 HTML 요소에 추가 정보를 포함.
CSS & JavaScript 파일 분리
CSS 및 JavaScript 파일을 분리하여 코드의 재사용성과 유지보수성을 향상. 가독성을 개선하여 협업 효율성을 높임.
JavaScript
기능 개발 및 Firebase 연동

1

DOM 조작 및 이벤트 처리
  • 모달창을 사용해 팀원 프로필 및 방명록 작성 시 UI 구현
  • 이벤트 리스너로 사용자 인터랙션 처리

2

팀원 데이터 불러오기 및 모달 효과
  • 팀원 소개 섹션에서 외부 파일로 데이터를 불러와 사용
  • 모달 화면 닫힘 시 setTimeout 함수를 활용해 transition 효과 구현

3

실시간 데이터 저장 및 Timestamp
  • 방명록 작성 시 실시간 데이터 저장
  • 화면 새로고침을 통해 UI 반영
  • Timestamp를 사용해 날짜 표시
CSS 메인 및 응원 페이지 디자인

1

Flexbox 활용
  • Flexbox 사용으로 수평/수직 정렬 구현
  • 반응형 디자인을 위한 유연한 레이아웃 구성

2

애니메이션 효과
  • transition 속성을 활용해 사용자 액션에 따라 요소 상태 변화

3

반응형 디자인
  • CSS는 시각적인 요소와 UX 최적화에 중요한 역할
  • 다양한 화면 크기에서의 반응형 디자인 구현
협업 및 데이터 관리
  1. GitHub
팀 프로젝트 코드 관리 및 협업
  • 코드 변경 이력 관리
  • 실시간 코드 공유 및 피드백
  • 문제 발생 시 원인 추적 용이
2. Firestore
실시간 데이터 동기화 및 관리
  • 실시간 데이터 동기화
  • 확장성 뛰어난 구조
  • 프로젝트 데이터 처리
7. 어려웠던 점 및 문제 해결

1

서버 충돌

2

임시 저장소
데이터 손실 방지를 위해 임시 저장소를 생성하고, 자동 백업 시스템을 도입하여
문제를 해결했습니다.

3

팀의 중요성
문제 해결 과정에서 팀워크와 협력이 중요한 역할을 했으며, 함께 해결책을 찾아 나갔습니다.
8. 향후 계획과 각오

1

지속적인 학습과 성장
새로운 기술과 도구들을 꾸준히 학습하여, 점점 더 효율적이고 깔끔한 코드를 작성할 수 있도록 노력할 것입니다.

2

협업 강화
팀원들과의 원활한 소통과 협업을 통해, 보다 나은 결과물을 도출할 수 있도록 최선을 다할 것입니다.

3

문제 해결 능력 향상
포기하지 않고 해결책을 찾아가며 끈기 있게 문제를 풀어 나갈 것입니다.