학원에서 html/css 수업을 마치고 시험 테스트 겸 간단한 팀 프로젝트로
화면 구축을 해보았습니다.
조원은 학원에서 비전공자 한분과 전공자 한분, 총 세 명이서 프로젝트를 시작했습니다.
우선 시험 조건은
- 주제를 정하고, 주제에 대한 유스케이다이어그램 및 와이어 프레임 제작
- 게시판 페이지
- 로그인/ 회원가입 페이지
- css 사용
이렇게 크게 4가지가 포함 되어있어야됩니다.
시작
화면을 구축할 간단한 주제를 정해야해서,
팀원들과 의견을 나눠 OTT 사이트인 WAVVE 를 참고하여 만들기로 결정했습니다.
사이트를 확인해보니 크게 만들어야되는 페이지가
홈페이지, 로그인/회원가입, 공지사항, 컨텐츠페이지 정도 만들기로 했습니다.
역할 분담을 위해 전공자분이 다이어그램과 와이어프레임 경험이 있어 두개를 작성하기로 하였고, 작성하는 동안 비전공자분은 로그인과 회원가입 페이지의 로그인과 회원가입 작성란을 제작하기로 하였습니다.
마지막으로 저는 모든 페이지에 공통적으로 들어가는 header태그와 footer태그 부분을 제작하기로 하였습니다.
검색기능은 없지만 타자는 칠 수 있는 검색창과 다른 페이지로 이동가능한 메인 기능들 다시 홈페이지로 돌아올수 있게끔 페이지 기본틀의 html과 css를 완성했습니다.
이후에 빠르게 다른 분들이 제가 만든 기본틀 위에
적용시킬수 있게 코드를 공유해 주었습니다.
중간
homepage
기본틀과 기획서 모두 작성 완료해서 이제 각자 만들 페이지를 정했습니다.
- 나 : 메인페이지와 컨텐츠 페이지
- 비전공자 : 로그인/회원가입 페이지
- 전공자 : 공지사항
전공자가 많이 만들어야 되지않나 생각하고 있었지만, 공지사항 페이지 내부에
게시판 기능과 글 등록 하는 페이지까지 포함되어 있어 납득을 하고 제작을 시작하였습니다.
따라만드려는 WAVVE의 메인 페이지에는 인기 컨텐츠 들의 사진이 크게 나와 일정 시간이 지나면 왼쪽으로 스크롤 되어지는 기능
그리고 카테고리 별로 모아져있는 일정크기의 컨텐츠들이 있었습니다.
학원에서 배운걸 최대한 써보자는 의미로 flex-derection 과 float를 적절하게 써서
.contents {
width: 200px;
height: 270px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
overflow: hidden;
border-radius: 10px;
}src태그와 a를 같이 사용해 그럴싸하게 배치해주고,
wavve에 자그만한 기능들이 최근에 배웠던 이미지에 마우스 hover를 하면
transition 으로 이미지에 애니메이션 효과를 주는 것도 해보았습니다.
WAVVE 화면
내 화면
.contents .img {
width: 200px;
height: 270px;
border-radius: 10px;
margin: 0px auto;
object-fit:cover;
transform:scale(1.0);
transition: transform 0.4s;
}
.img:hover {
transform:scale(1.1);
border-radius: 10px;
transition: transform 0.4s;
}검색하지 않고 제 지식만 사용하여 만들어봤는데, 생각이상으로 똑같이 만들어져서 기분이 좋게 다음 단계로 넘어갈 수 있었습니다.
남은건 스크롤 되는 사진을 만들어야되는데,
아직 자바스크립트를 배우지않아서 css만으로 만들어야 되기에
모든 지식을 부어봤지만, 제 힘으로는 아직 난이도가 높기도하고, 시간을 쏟아 붓기엔 한정된 시간이 많이 적어서 구글에서 찾아 참고하기로 하였습니다.
구글에서 이것저것 코드를 찾아서 자동으로 넘어가지지는 않지만 스크롤이 되는 화면을 만들었습니다.
.slider{
width: 850px;
height: 500px;
position: relative;
margin-right: 10%;
margin-left: 230px;
overflow: hidden;
box-shadow:10px black;
}
.slider input[type=radio]{
display: none;
}
ul.imgs{
padding: 0;
list-style: none;
border-radius: 10px;
}
ul.imgs li{
position: absolute;
left: 500px;
transition-delay: 1s;
padding: 0;
margin: 0;
background-color: rgb(66, 66, 66);
}
.bullets{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
z-index: 2;
}
.bullets label{
display: inline-block;
border-radius: 50%;
background-color: rgba(183, 183, 183, 0.55);
width: 20px;
height: 20px;
cursor: pointer;
}우여곡절 끝에 메인페이지를 겨우 완성시켰습니다.
content pages
강사님의 조건중에 만든거는 기능을 웬만하면 하는편이 좋다고 들었어서
사진마다 사진에 맞는 컨텐츠페이지를 만들어야되게 생겼습니다...
너무 많아서 줄여야 되나 싶었지만 팀프로젝트기도하고, html/css 시험이라
안하기엔 눈치가 보여서 결국 부랴부랴 만들었습니다.
사진 삽입을 할 때 다행히도 전부 a태그를 달아놨어서 번거로운 작업 하나는 빠졌습니다.
이후에 컨텐츠마다 html클래스를 하나 생성하여 메인 사진을 크게 띄어놓고
사진위에 시청하기 버튼을 놓아 실제 WAVVE에 있을법하게 최대한 구사해봤습니다.
하지만 코드 공유하고 각 코드들을 본인 코드에 맞추는 작업까지 시간을 생각해봤을 때 시간이 살짝 촉박할 거 같아서 많은 기능과 디자인을 신경쓰지 못하고 만들었습니다.
이렇게 아주 간단하게 만든 컨텐츠 페이지를 총 8개 만들고 제 역할을 다 끝냈습니다.
마무리
다른분들은 윈도우고 저만 맥북이라 코드 주고받는데 살짝 어려움을 겪었지만,
결국 모두 받고 코드수정까지 마친 뒤 아슬아슬하게 제출했습니다.
이후에 곧바로 다른 팀들이 만든 페이지들을 보면서 감상했습니다.
다들 생각보다 퀄리티가 높아서 의기소침 해져있다가, 저희팀꺼 보여줄 때
다들 제가 만든 기능들을 보고 놀라하시고 심지어 강사님마저도 이정도 기능까지 바란건 아니였다고 말씀해주셔서 기분이 좋게 첫 팀프로젝트를 마칠 수 있었습니다.
느낀점
팀플을 하면서 생각보다 많이 소통해야된다는것을 깨달았고,
역할분담의 중요성을 뼈저리게 느낀 계기가 된 거 같아서 다음 실전 프로젝트 때
준비과정을 더 세세하게 해야겠다는 생각이 들었습니다.
