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

화요일(3.24)에 시작했던 자기소개 페이지를 하면서 느낀 점을 좀 뒤늦게 작성한다.

(친구들과 약속도 있었고.. 나름 바빠서..? 물론 핑계다.)

▶ 기획의 중요성!

    기획을 제대로 안 하면 결국 제 자리 걸음. 더 악화될 경우 작업 전체 수정

1. 시작

◎ 자기소개 페이지를 어떤 식으로 구현할지 고민을 많이 했다.

스터디를 시작하고 처음으로 발표를 해야 하는 과제이기 때문에 완성도 높은 페이지를 구현하고 싶었다.

노트에다 어떤 식으로 디자인을 하고, 어떠한 기능들이 있으며, 구조를 어떤 식으로 해야 할지 직접 그려보았다.

하지만.. 역시 디자인과 그림은 부족하다.. 너무 엉망이었다.

그래서 스케치 앱을 찾아봤는데 유료 스케치 앱과 무료로 며칠 쓰는 거밖에 없었기 때문에 방법을 바꿨다.

자기소개 페이지 템플릿을 검색해보고 클론 코딩 개념으로 하기로 하였다.

2. 디자인

◎ 자기소개 페이지 템플릿을 검색하였고,

템플릿

솔직히 이 템플릿 보다 더 이쁜 템플릿은 많았지만 이상하게 끌렸다ㅋㅋㅋㅋㅋ 아직 내 수준을 고려했을 때, 

엄청난 애니메이션 효과가 들어간 템플릿은 자신이 없었다..(물론 애니메이션 공부를 할 예정이고, 공부를 하고 애니메이션 효과를 넣어 다른 페이지도 구현할 예정이다!!)

결정한 페이지를 분석하고 난 뒤 기능을 몇 개 정리해 보았다.

 

• 반응형 고려

• 메인 페이지 포함 총 4개의 페이지 이동

• mouse hover 효과

엄청 대단한 기능은 없었지만, 자기소개 페이지로 딱 보기 좋게 되어있어서 괜찮았다.

그래서 바로 작업 시작

3. 구현

디자인을 정한 후 바로 구현을 하였다.

보기에는 간단해 보이지만 직접 해보니까 막히는 부분이 많았다.

 

• 전체적으로 가운데 정렬로 되어있다.

• header, container, footer 영역을 어떻게 잡아야 할지

잠깐 구현했던 화면을 보자면,

 

자기소개 페이지 test

이런 상황이다...ㅋㅋㅋ막상 보니까 너무 없어 보인다.. 물론 템플릿은 훌륭하지만 내가 없어 보이게 구현하였다..

이 화면을 보고 내 모습은..

안본 눈 삽니다.

정말 실망스럽다..

곧 발표를 해야 되는데.. 창피하다는 생각이 들었다..

다른 페이지 작업은 안 하고 메인 페이지만 작업을 하였는데.. 더 늦기 전에 디자인을 바꾸고 싶다는 생각이 들어

과감히 코드를 날려버렸다.

오늘(3.26) 시점으로 이 작업은 3.24(화)에 진행을 하였고.. 막힌 부분과 배울 점에 대해 기록을 못했다ㅠㅜ

반성해라!!

4. 반성

• 프로토타입 설계를 잘하자 (기획이 완벽해야 좋은 결과가 나온다.)

• 작업 진행 과정에서 막히는 부분, 배울 점은 그때그때 기록하자(똑같은 실수의 반복을 줄이기 위한 습관.)

• 레이아웃 잡는 작업에 시간을 너무 많이 투자한다. (계속 연습하여 시간을 줄이자.)

• html 작업과 css 작업의 순서를 지키자.(html으로 레이아웃을 구현하고 css를 입히는 습관을 들이면 속도가 단축된다.)

• 반응형에 대해 더 학습이 필요하다..(아직까지 이해를 잘못함.)

※ 참조

• https://ko.wix.com/

홈페이지 제작 | 무료 홈페이지 만들기 | Wix.com