팀 소개 웹 페이지 만들기 (미니 프로젝트 과정 소개)

✅ 초기 와이어 프레임 구성

 

내일 배움 캠프에서 4일 동안 미니프로젝트로 팀 소개 페이지를 만들었습니다. 

 

위 이미지는 첫날 급하게 만든 와이어프레임인데, 여러 문제가 있어서 중간에 수정했습니다.
(즉, 최종 결과본은 초기 와이어프레임과 전혀 다름)

• 짧은 시간 내에 구현해야 할 기능이 너무 많음 (이제 막 웹개발을 배우기 시작한 단계라 익숙지 않음)
• HTML, JavaScript(+ JQuery), CSS 구성보다는 CRUD 기능적인 측면에 너무 과중되어 있음

 

✅ 모방 학습

위 와이어프레임대로 진행하는 것은 좋지 않다고 판단하여, 팀원들과 상의하고 먼저 모방 학습이란 걸 해봤습니다.

다른 사람들이 만든 웹사이트를 참고하는 것인데, 저희 현재 수준에서 적당히 어려운 것 하나 골라서 각자 가능한 한 똑같이 만들어보는 연습을 했습니다. 

 

출처: https://github.com/HyeRrin/portfolio

모방 학습으로 위 이미지를 참고했습니다. 저희 팀에서 만들려고 하는 웹페이지와 구성이 흡사하고 깔끔해서 선택했습니다.

 

저희 팀원들이 모방을 하면서 각자 만든 화면입니다. 프로젝트가 시작하고 2일(=총 프로젝트 기간이 4일이니까 절반) 정도는 과감하게 공부하는 기간으로 썼습니다. 웹개발 강의 마저 보고, 예시로 주어진 웹사이트 각자 나름대로 만들어보면서 그 과정에서 생긴 어려움이나 궁금증들을 서로 공유하고 해결해 보려고 노력했습니다.

 

✅ 최종 프로젝트 결과물

파일 구성
└ index.html (html + javascript)
└ resources
    └ style.css
└ image
    └ 이미지 파일들..

 

링크 : 코틀인 팀 소개 웹페이지 

Our Team

 

상단 헤더 & 배너

 

• 헤더
  • 상단에 위치 고정됨 : 스크롤해도 노출됨
  • `홈` / `팀 소개` / `팀원 소개` 네비 기능이 있는 탭 : 누르면 해당 영역으로 부드럽게 스크롤
• 배너
  • 왼쪽 상단에는 코틀인 로고가 위치함
  • 배너 이미지 자동으로 바뀌는 효과

 

팀 소개

 

팀 소개 영역입니다. 3개의 탭(구성원, 목표, 약속)으로 구성되어 있습니다. 

• 구성원
  • 팀 대표 로고 이미지, 팀원 대표 사진, 텍스트로 구성
  • 팀원 이미지는 마우스 커서를 올려 놓으면 1.1배 커지도록 이미지 효과 부여
• 목표
  • html, css 으로 메모장 구현
• 약속
  • 텍스트가 하나씩 노출
  • 처음에는 속도가 느렸다가, 일정 부분 이후로 빨라지는 효과
  • 텍스트가 전부 노출되면 모두 지워지고 처음부터 반복
  • javascript으로 기능 구현 하였음

 

팀원 소개

 

• 팀원 이미지 스와이프
  
  • 부트스트랩의 Carousel 기능을 사용해서 이미지가 스와이프 기능 추가
• 모달창
  • 이미지 스와이프를 하다보면 노출되는 버튼이 있는데, 해당 버튼이 모달창과 연결되어 있음 
  • 부트스트랩의 Modal 기능 사용
• 프로그래밍 Skill 숙련도 표시
  • 부트스트랩의 Progress Bar 기능 이용
  • 진행 정도를 나타낼 수 있음