개요
첫 개인 프로젝트를 진행하게 되었다.
프로젝트는 추후 취업준비를 할 때 사용할 개인 포트폴리오 사이트를 제작하는 것이었다.
전 기수 선배님의 포트폴리오 사이트를 보고 반응형 웹을 만들어야 되겠다는 생각이 들었고, 같은 수업을 듣는 친구들 또한 같은 생각으로 제작하였다.
기간은 금요일 오후부터 화요일 오전까지. 약 5일의 시간이 주어졌고, 나의 포트폴리오 사이트는 3일에 걸쳐 완성되었다.
기획과정
기획단계에서는 참고를 할 수 있는 사이트를 조사하고, 해당 사이트들을 바탕으로 내가 구성하고 싶은 화면을 스케치하였다.
참고했던 사이트는 하단의 사이트와 개인포트폴리오(개인정보가 기재되어 있어, 공유 불가) 한 가지를 참고하였다.
해당 사이트를 참고하면서 따듯한 색감을 가진 사이트를 만들고자 하였고, 키 컬러를 설정하기 위해 색상참고 사이트에서 키 컬러에 대한 내용을 참고하였다. 해당 내용은 제작단계에서 설명할 예정이다.
홈페이지는 총 6단계로 구성되어 있다.
intro페이지 > title > about > skill > project > contect로,
- intro: 홈페이지에 들어가면 가장 먼저 만나게 될 인트로 페이지이다. 애니메이션 효과를 줄 예정이다.
- title: 인트로 페이지가 끝나면 포트폴리오의 가장 상단에 위치하게 될 영역이다. 표지의 역할을 해줄 것이다.
- about: 자기소개 영역이다. 사진과 개인 프로필, 학력과 경력, 기타사항을 넣고자 하였다.
- skill: 내가 다룰 수 있는 프로그램을 기재하는 영역이다.
- project: 내가 참여한 프로젝트들을 소개하는 영역이다. 스와이퍼로 나열할 예정이다.
- contect: 깃허브 주소, 블로그 주소, 연락처와 이메일주소를 소개할 영역이다.
다음으로는 스케치 한 내용이다.
인트로 화면이다.
큰 글씨가 축소되면서 나타나고 공이 튀기듯이 바운스를 주려고 한다.
타이틀 화면이다.
상단에 position: fixd로 nav바를 제작하고 about, skill,project, contact를 a태그로 만들어 id값을 링크하여 클릭 시, 원하는 위치로 이동할 것이다.
우측에서 nav바가 있어 이모티콘 별로 나오는 영역이 달라지도록 만들 예정이다.
어바웃 화면이다.
개인 정보를 기입하려고 하였고, 프로필과 사진, 학력과 경력사항을 필수로 기입하고자 하였다.
사진과 같이 배치하고자 하였을 때 해당 요소만 넣기에 배치가 마음에 들지 않아 하단의 영역을 추가하여 기입할 기타상이 있으면 기입하고자 하였다.
프로젝트 화면이다.
개인 및 팀 프로젝트 진행사항을 기입할 영역이다.
스와이퍼를 이용하여 노출하고자 하였고 한 영역에 한 개의 프로젝트가 들어가도록 작성하고자 하였다.
프로젝트는 좌측에는 프로젝트에 대한 정보가, 우측에는 프로젝트에 대한 이미지를 삽입하고자 하였다.
스킬 화면이다.
내가 다룰 수 있는 툴을 소개하고자 하였다.
고정 포지션으로 주기에는 심심하다는 생각이 들어, 화면 하단에 사람의 이미지를 배치하고 사람의 머리위에 작게 배치한 스킬들이 뒤섞여 있다가 일정 위치로 화면이 위치하면 해당 스킬들이 주위로 퍼지면서 크기가 커지도록 제작하고자 하였다.
컨텍 화면이다.
연락을 할 수 있는 연락처와 블로그주소, 깃허브 주소를 기입하고자 하였다.
사실 스케치 단계에서는 그럴 듯한 아이디어가 떠오르지 않아 미뤄두었다.
하단의 wj는 제작단계에서 홈페이지 상단 Nav바에 띄울 로고를 제작하기 위해 스케치 한 것이다.
제작과정
intro
먼저 인트로 화면을 제작하고자 하였다.
아직 자바스크립트를 다루는 것이 익숙하지 않기 때문에 첫 시작이 굉장히 막막했던 기억이 있다.
스케치한 내용대로, 빈 화면에서 커다란 텍스트가 축소되면서 나타나는 것을 원했었다. 해당 방법으로 진행하기 위해 아래의 방법을 고안했었다.
- 텍스트의 color는 배경의 색과 동일해야 한다. - 투명하게 보이도록 하여 아주 큰 상태(애니메이션 시작 전)일 때 텍스트가 보여서는 안되기 때문
- 텍스트에 획을 주어야 한다. - 텍스트가 배경색과 동일하기 때문에 투명하게 보일 것이다.
- 폰트는 굵어야 한다. - 텍스트가 굵어야 첫 시작에 텍스트의 획이 노출되는 것을 방지할 수 있을 것이다.
- 애니메이션 진행 - 애니메이션은 4개의 단계를 가지고 있다.
- 예) 텍스트 크기가 200% -> 최종적으로 100%를 만들것이다.
- 1단계 - 200% > 50%
- 2단계 - 50% > 150%
- 3단계 - 150% > 75%
- 4단계 - 75% > 100%
하지만, 이 방법으로 진행을 하는 것에는 문제가 있었다. 바로, 텍스트의 획이 보이지 않을 정도로 커다랗게 준비되어 있어야 하는데, 이대로 진행을 하기에는 텍스트의 크기가 너무 커진다는 단점이 있었고, 정 가운데로 좁혀지면서 배치가 되기를 원했지만, 텍스트의 획이 노출되는 것 또한 피해야 했기 때문에 텍스트의 배치와 크기를 설정하기에 문제가 있었다.
여러가지 상황을 고려하였을 때 해당 방법은 적절치 않다는 생각이 들었고, 계획을 수정해야 했다. 크기 바운스 효과는 적용하고 싶어서 방법을 생각했고, opacity를 사용하고 텍스트의 크기가 커질 때 opacity의 값을 1로 줘서 배경에서 글씨가 튀어나오는 듯한 효과를 제작하였다.
텍스트 애니메이션을 위해 Javascript에서는 텍스트가 순차적으로 띄워질 수 있도록 비동기적으로 값을 주어야 했다. 때문에 setTimeout을 사용하여 제작하였고, setTimeout을 이용해 일정시간마다 텍스트의 태그인 h1에 순차적으로 classList로 클래스를 붙여주어 애니메이션 속성이 있는 css를 부여하였다.
css에서 미숙한 부분들을 설정해야 했기에 내가 적용하기 어렵다고 생각했거나, 할 줄 몰랐던 부분을 중점적으로 기입하고자 한다. 먼저 텍스트의 가장자리에 선을 넣는 방법이었는데, 획을 추가할 수 있는 별도의 속성이나 관련 정보를 알지 못하였기에 검색을 하였다. 검색 결과로 그림자 기능을 이용하는 것이었다. x좌표와, y좌표를 사용하여 left, bottom, right, top의 값을 넣을 수 있었다. 하단의 코드로 텍스트의 획을 넣어주었다.
/* 텍스트 외곽 선 left(X좌표, Y좌표, 컬러), bottom, right, top */
text-shadow: -3px 0px #B46060, 0px 3px #B46060, 3px 0px #B46060, 0px -3px #B46060;마지막으로는 애니메이션 효과를 넣는 것을 어렵게 생각하여 막상 만들자고 생각을 했더니 막막해지기만 했었다. 하지만 이전에 강의를 들었던 내용과 정리한 내용을 토대로 애니메이션 효과를 주었고, 하단의 코드가 그 애니메이션의 내용이다.
@keyframes pop {
0%{
font-size: 150px;
opacity: 1;
}
25%{
font-size: 250px;
opacity: 1;
}
50%{
font-size: 200px;
opacity: 1;
}
75%{
top: 50%;
opacity: 1;
}
100%{
top: 77%;
opacity: 0;
}
}위의 코드와 같이 애니메이션을 제작하고, 이 애니메이션을 동작시킬 클래스를 지정해주어야 했다. 자바에서 설명했던 것과 같이 기존에 html에 선언되어있는 클래스(prol1~5)와 자바스크립트에서 비동기적으로 추가되는 클래스(Pactive)가 함께 있을 때 적용이 되어야 했으므로 하단의 경우에 애니메이션이 동작하도록 하였다.
.prol1.Pactive,
.prol2.Pactive,
.prol3.Pactive,
.prol4.Pactive,
.prol5.Pactive{
animation: pop 2s ease;
}사실, html을 하나로만 제작해서 z-index와 opacity로 조정하여 인트로 화면과 포트폴리오 화면의 타이틀 영역을 겹쳐서 배치하려고 하였으나, 인트로화면의 setTimeout이 비동기처리되는 메소드로 가장 나중에 진행된다는 것을 깨닫고 바로 페이지를 나눠서 작업하였다. 그렇다면 인트로 페이지의 애니메이션이 끝나는 시간에 맞춰서 페이지 이동이 이루어져야 하는데 이 방법을 찾기 위해 구글링을 시도하였고, 하단의 방법을 알 수 있게 되었다.
<!-- refresh: 새로고침 / content="해당 초 후 페이지 이동 url = 이동할 페이지" -->
<meta http-equiv="refresh" content="12; url=./main.html">해당 방법을 적용하면서 인트로 화면의 준비는 모두 마쳤다. 이제 본격적인 포트폴리오 화면을 준비해야 한다. 사실 이 인트로 화면을 고민하고 제작하는데만 하루의 시간을 소비했다,,,
title
타이틀 화면은 사실 포트폴리오를 제작하면서 가장 감이 안오고 그래서 가장 늦게 작업을 끝낸 영역이다.
처음에는 참고 사이트로 찾은 페이지처럼 영상을 배경으로 깔고 텍스트를 위에 배치하고 싶었으나, 마음에 드는 영상자료를 찾는것도 쉽지 않았고, 이미지를 넣어도 어울리지 않아서 결국 배경컬러 위에 텍스트 애니메이션을 배치하였다.
타이틀 화면을 제작하면서 가장 처음에 한 작업은 키 컬러와 핵심 폰트를 정하는 일이었다. 키 컬러와 폰트를 찾은 사이트는 하단의 사이트이며, 이전 직장에서 디자인 관련 업무를 하였을 때 애용했던 사이트 중 하나였다.
- 컬러 조합 사이트
- 폰트 사이트
먼저 컬러를 정하였다. 따듯한 색감을 찾고 있었던 나는 사이트에서 마음에 드는 색 조합을 발견하였고, 해당 조합으로 작업하고자 하였다. 내가 정한 색상 조합은 #FFF4E0, #FFBF9B, #B46060, #4D4D4D 이고, 이 색상에 어울리는 분위기를 찾다가 고딕보다는 명조체가 어울릴 것 같다는 생각이 들었고, 폰트는 명조체인 '가나초콜릿체'로 제작하였다. 하지만 해당 폰트는 굵기가 굵어 타이틀이나 포인트 부분에 주기 적합했으나, 포트폴리오의 모든 텍스트를 이 폰트로 제작할 수는 없었다. 포트폴리오 안에 들어갈 내용부분의 폰트를 따로 정하기로 하였고, 가독성을 생각하여 내부 텍스트는 고딕체로 정하였다. 고딕체로 고른 텍스트는 '나눔스퀘어 네오'이다.
이제 폰트와 키 컬러가 정해졌으니, 마저 타이틀 화면을 꾸밀 차례였다. 이제 Nav바를 제작할 차례였는데, 이 단계에서 한가지의 고민이 있었다. 상단에도 화면에 fixd 되어있는 nav 바가 있는데 우측에 또 nav바가 있는건 비효율적이라는 생각이 들었고, contact 영역이 별도로 하단에 지정되어 있는데 굳이 넣을 필요가 없다는 생각이 들었다. 따라서 우측의 nav바는 빼고 작업하기로 결정하였고, 상단의 nav바 작업을 진행하였다.
상단 nav바는 예시로 작업을 진행한 경험이 있어 작업에 어려움이 있지는 않았다. 다만 내 홈페이지만의 로고가 있으면 좋다는 생각이 들어, 조사했던 키 컬러를 참고하여 포트폴리오 nav바에 넣을 간단한 로고를 제작하였고, 아래의 이미지가 그 로고이다.
nav바의 좌측에는 로고와 '_Portfoilo' 텍스트가 위치하고, 우측에는 포트폴리오 영역들을 나열하여 하나의 div로 묶고 display: flex로 배치를 조절하였다. 우측에 들어간 내용들은 'About, Skills, Project, Contact'로 4가지의 텍스트이고 해당 텍스트들은 a태그로 제작하여, 각 영역의 최 상단에 id값을 주고 a태그로 해당 id값을 받아와서 이동을 시킬 것이다.
그리고 가장 마지막에 title영역을 채울 내용을 정하였고 텍스트 애니메이션 효과를 주기로 하였다. 해당 애니메이션효과는 블로그에서 가져와서 조금 수정하여 사용하였다.
바로 수정해서 쓸 수 있는 텍스트 애니메이션 모음 (tistory.com)
about
해당 영역에는 자기소개를 할 수 있는 공간이다. 해당 부분도 스케치를 했던 것과 다르게 진행되었고, 해당 부분은 아주 간단한 애니메이션이 동작하도록 하였다. 우선 해당 영역 내의 배치는 프로필과 사진영역은 스케치와 동일하게 진행하였으나, 경력, 학력,기타 사항 부분이 가로 영역을 3등분 하기에는 영역이 너무 좁다고 느껴져서 한 줄에 하나의 사항을 기입할 수 있도록 변경하였다. (기타사항은 빼고 진행하였다.) 때문에 기획 때 보다는 about 영역의 heigth가 증가하였다.
애니메이션 효과는 각 영역의 타이틀 글씨와 about의 프로필, 학력, 경력 부분의 색상 바에 효과를 주었다. 각 영역의 타이틀은 아래에서 텍스트가 튕겨나오는 듯한 효과를 주었고, 색상 바에는 우측에서 나타나서 좌측으로 이동하는 효과를 주었다. 모두 스크롤 이벤트를 사용해서 일정 부분까지 스크롤이 내려가면 진행될 수 있도록 제작하였다.
skills
사실 유일하게 스케치대로 작업이 진행되었던 영역이며, 가장 애니메이션을 넣기 까다로운 부분이었다. 각 9개의 스킬들이 작은 상태로 있다가 사이즈를 조절하여 커져야 하고, 위치도 조절이 들어가야 했으니 말이다... 심지어 각 영역별로, 컬러라던지 등등의 설정을 다르게 주어야 했으므로 classname도 전부 달라서 css부분에서 꽤 많은 작업을 거쳐야만 했다.
project
해당 부분은 이전에 수업시간에 만들어 보았던 스와이퍼를 사용하여 스와이퍼를 이용해 각 프로젝트마자 영역을 만들어 노출하고자 하였다. 그래서 이전에 만든 스와이퍼를 가져와서 사이즈만 조절하여 사용하였다.
contact
유일하게 애니메이션 기능이 없는 부분이다. 사실 깃주소, 블로그주소, 연락처 등이 담기면 되는 곳이라 별도의 애니메이션 기능을 주지는 않았지만 추후 적절한 애니메이션이 생각나면 추가할 생각이 있는 영역이다.
가로를 4구역으로 나눠 좌측부터 깃허브, 티스토리, 연락처, 이메일 주소 순으로 나열하였고, 깃허브와 티스토리는 a태그를 사용하여 텍스트를 클릭하면 해당 사이트로 이동할 수 있도록 제작하였다.
결과물
intro
title
about
skills
project
contact
nav
'프로젝트 > 개인 프로젝트' 카테고리의 다른 글
| 230711~230714_Toy project_React를 이용한 게시판 페이지 제작 (0) | 2023.07.16 |
|---|---|
| 230509~230511_Toy project_MVC 패턴을 이용한 게시판 페이지 제작 (1) | 2023.05.14 |
