Project - Introduction page

위코드 12기 사전 스터디 기간 중 첫 번째 프로젝트인 자기소개 페이지 만들기를 해봤다.

처음에는 하루 이틀이면 쉽게 만들 수 있을 거라 생각했지만 마음처럼 쉽지 않았다.

html, css를 중점적으로 이용하여 제작했고 javascript는 game menu 한 곳만 포함시켰다.

아직 개선해야 할 사항들이 많지만 우선 '페이지 구현' 자체에 중점을 두고 만들었다.

---

자기소개 페이지 : https://moon-sangho.github.io/introduction-page/

github : https://github.com/Moon-Sangho

---

후기 & 개선해야할 사항

1. border-bottom 효과 적용

우선 스크롤을 내릴 때마다 스크롤의 위치에 따라 navigation menu 밑에 border-bottom을

적용시키려 했다.

html 페이지를 여러개로 만들었다면 css만으로도 구현하기 참 쉬웠을텐데.. 생각보다 어려웠다.

구글링을 하며 어거지로 구현시켜보긴 했으나 스스로 생각해봐도

어디 내놓기도 부끄럽게 느껴질 정도의 코드였다.

그래도 밑밥을 깔고 현 개발자로 일하고 있는 친구에게 보여줬더니 쌍욕이 돌아왔다. 🤣

내가 적용해봤던 방법은

window.scrollY 메서드를 사용하여 스크롤의 Y값 범위를 구하고, 해당 범위마다 menu의

border-bottom이 각각의 위치들에 맞게 적용시키는 방식이었다.

하지만 내가 생각해봤을 때 이것의 문제점은 미친 중복, 리소스 문제, 사용자의 모니터화면에

따라 상대적으로 달라지는 Y값 등등 문제 천지였다. 그래서 우선은 주석 처리를 해두고

작동되지 않도록 했다. 추후 scrollSpy 기능을 이용하여 다시 업데이트할 예정이다.

2. URL

각 section마다 id값을 주고, 해당 메뉴를 클릭했을 때 그 section으로 이동하도록

설정했다. (ex. href=#section--home)

그런데 메뉴를 클릭할 때마다 주소창에 내가 부여했던 id값이 그대로 노출되어버렸다.

그리고 home menu를 눌렀을 때 페이지가 완전히 위로 올라가지지 않는 현상도 발견했다.

또 페이지는 한 페이지인데도 불구하고 뒤로가기를 눌렀을 때 이전에 눌렀던 menu url로 이동되었다.

이 부분도 추후 javascript를 이용해서 다시 업데이트할 예정이다.

3. 화면 버벅거림

또 하나 걸림돌이 되었던 부분은 페이지를 스크롤할 때의 버벅거림이었다.

전체적으로 parallax 효과를 적용한 부분 때문인 것 같은데 데스크탑에서는 그리 심하지 않지만

안드로이드 핸드폰에서 접속했을 때 버벅거림이 엄청 심하게 나타났다.

문제해결을 위해 계속 구글링을 해보았으나 이부분은 아직 해결하지 못했다.

4. 최적화

parallax 효과를 전체적으로 적용하다 보니, 웹 페이지를 보는 환경에 따라

각 section의 background 범위 설정을 달리 했어야 했다.

또 각 환경별로 본문이 출력되는 위치도 달라져서 이것을 다루는 것이 꽤 까다로웠다.

우선 현재 내가 보고 있는 27인치 모니터, 맥북 프로 15인치, 안드로이드 핸드폰

기준으로 media query를 이용해 각각 달리 적용시켜 두었다.

내 기준으로 만들다보니 이 부분이 계속 거슬린다.

애초에 html 페이지를 여러개로 만들어서 쉽게 갈걸 그랬나 하는 생각도 들었다.