[Study] 자기소개 페이지 Chapter 2.

시점은 3.25(수요일) 일에 진행했던 이야기이다.

▶Code convention.

    코드는 전체적으로 통일성을 지켜야 하며, 다른 사람이 보기 쉬운 코드가 좋은 코드다.

1. 시작

◎ 자 이제 시작이야~ 전체 수정~

화요일에 했던 코드를 전체 수정할 계획이었다.

막막했다.. 내일이 발표인데..

아침 스탠드업을 끝나고 다시 템플릿을 찾기 시작했다.

템플릿을 하기 전 고려해야 할 점을 정리하였다.

 

• 자기소개 페이지는 보기 쉽게 구현해야 한다..(다른 사람들이 보기에 편해야 하며, 지나치게 화려하거나 많은 기능들이 있으면 오히려 독이 될 수 있다. 물론 내 생각이다.)

• 레이아웃 구성과 알맞은 css 사용

• 전체적인 통일감.(색, 폰트 등 통일성 있게 구현하기.)

• 카테고리를 어떻게 나눌지에 대한 고민

• 웹 접근성과 표준성을 고려하자.

한 번의 실수를 하였기 때문에 2시간 정도 기획하고 천천히 디자인도 찾았다.

2. 디자인

◎ 다시 디자인을 검색하여 찾아보고

 

이 디자인을 본 순간,

"그래!! 자기소개는 보기 쉽게 구현해야해"의 고려해야 할 사항과 일치하였다.

디자인을 분석하고 몇 가지 기능들을 정리하였다.

 

• 역시나 반응형으로 하고 싶었다.

• 페이지 이동은 없으나, 2~3개의 페이지를 추가하자.

• 모달 기능을 추가하자.

• 카테고리의 주제와 그에 맞는 내용을 잘 생각해보자.

3. 구현

3-1. 왼쪽 레이아웃에 대한 고민

◎ 디자인을 보고 왼쪽에 있는 이미지와 contact 정보를 html로 어떻게 해야 할지 고민하였다.

가장 큰 고민은 aside 태그의 사용 유무였다.

옆에 위치하기 때문에 aside 태그를 사용하고 싶었지만, aside태그의 의미와는 잘 맞지 않는다.

그래서 결국 div 태그를 사용하였다.

3-2. 오른쪽 레이아웃에 대한 고민

◎ 오른쪽 최상위 영역 태그를 main 태그를 처음에 사용하였다.

하지만 웹 접근성을 고려하면 main  태그는 IE를 지원 안 한다고 배웠기 때문에 바로 div 태그를 사용하였다.(html 공부할 때 작성한 블로그를 보고 바로 div 태그로 바꿈. 이래서 블로그를 하는 거 같다.)

3-2. 카테고리에 대한 고민

◎ 디자인에는 프로필, 경력사항, 위에 이미지에는 잘렸지만 밑에 성격에 대한 카테고리가 있었다.

성격에 대한 카테고리는 필요성을 못 느껴 나 같은 경우 프로필, 경력사항, 학력, 병역, 기술에 대한 카테고리로 나누었다.

3-3. 디자인

◎ 프로필 디자인을 수정하였다.

화요일에 했던 코드 중 하나라도 사용하고 싶어서 프로필 부분에 이력서와, 프로젝트를 모달로 띄어서 보여줄 수 있는 버튼을 재사용하였다.

나름 좋은 생각이라고 들었다.

3-4. 결과

※ 캡처를 하는 과정 중 화면이 잘려서 두 번 나눠서 캡처했기 때문에 가운데 여백은 신경 노노!

 

 

나름 잘 나왔다..ㅋㅋㅋㅋ나는 만족하지만 남들이 보기에는 부족할 수도 있다.

아직 메인 페이지만 작업하였고, 이력서와 프로젝트 페이지는 조금씩 채워나갈 생각이다.

4. 앞으로 해야 할 기능 및 문제점

• 왼쪽 레이아웃은 스크롤이 안되게 하고, 오른쪽 컨텐츠 부분만 스크롤을 할 수 있게 구현하기.(위의 결과 이미지를 보면 왼쪽 부분도 스크롤이 되는 점을 확인할 수 있다.)

• 프로필에 RESUME, PROJECT 버튼을 눌렀을 때 모달창으로 미리 보기 같이 구현하기.( navigation에 있는 건 상세!! 모달창에 상세페이지로 들어가는 버튼을 추가로 만들 예정)

• 역시나 반응형.. 반응형을 생각하여 만들었는데 잘 안된다.. 무조건 반응형이 되게 구현하기.

• 이미지 크기가 전부 다르다.. css로 똑같은 사이즈로 설정해도 이미지 자체의 크기는 다르므로 이 점은 어떻게 해야 할지 찾아봐야겠다.

5. 잘한 점

• 유지보수를 생각한 주석처리.

자기소개 페이지 html

각 영역별로 주석처리를 하여 수정할 사항이 있을 때 쉽게 찾을 수 있게 하였다.

 물론 내 생각이지만 잘한 거 같다.

(코드의 양이 많아 자세한 코드는 git에서 확인하면 된다. 물론 css도 같은 방법으로 주석 처리함.)

 

• 공통으로 사용하는 css는 common.css 파일을 따로 만들어 관리한 것.

자기소개 페이지 common.css

작업을 하다 보면 css가 공통으로 사용되는 경우를 봐서 어디서든 재사용할 수 있게 분리하였다.(물론 html 클래스도 같다.)

 

6. 느낀 점

• CSS의 Flex에 대해 공부하고 flex가 얼마나 편하고 좋은 속성인지 알게 되었다. 하지만 Flex를 남용해도 되는지 궁금증이 생겼다. 작업하면서 Flex를 많이 사용했기 때문에 이에 따른 문제가 발생할 수 있다는 생각이 들었다.

• 예제를 보면서 따라 치는 것보다 직접 웹페이지를 만들어 보는 게 더 효과적인 공부방법이라고 생각한다.

※  참조

• http://blog.naver.com/PostView.nhn?blogId=mangoboard&logNo=221365251947

합격을 부르는 자기소개서(자소서)PPT 템플릿/인포그래픽 양식

• https://developer.mozilla.org/ko/

MDN Web Docs

• https://www.w3schools.com/

W3Schools Online Web Tutorials