자기소개 페이지 만들기 Review #2

'HTML/CSS'로 자기소개 페이지 만들면서 새로 배운 것들, 여전히 해결하지 못한 부분, 앞으로 개선점을 정리해보려한다!

페이지 소스코드
페이지 링크

---

구현하고자 했던 기능

DOM 구조의 활용

DOM 요소를 어떻게 컨트롤하고 이벤트를 받을지 고민했던거 같네요. 처음 과제를 받았을 때 생각난 기능은 생활코딩에서 배웠던 토글 및 스타일 변경 기능을 활용한 야간모드였습니다.

선택자를 우선적으로 다루면서, 아직까지 DOM의 활용에 대해서 많이 미숙함을 느꼈습니다. 대상을 선택할 때 querySelector, querySelectorAll[index]를 활용하여 대상을 선택하고 바꾸는 걸 적용하였는데요.

비록 CSS 컨트롤이었지만, 생각보다 내용적인 요소 / 배경적인 요소를 사전에 잘 구분하여 시작하는 것이 이 후 기능 추가에 있어서 얼마나 중요한지 알게 되었어요.

또한, 색상이나 디자인적인 부분에서도 고려할 사항이 꽤나 많다는 점에서 UI를 어떻게 구상해야 사용자가 편리할 지 계속 고려해야 한다는 점은 늘 유의해야겠더라구요. 전체적인 사이트를 구상하면서 최대한 눈에 띄지는 않지만 자연스럽게 기능을 적용하는 것에 초점을 맞추었습니다.

• 소스코드

  var Body = {
    setBackgroundColor: function (color) {
      document.querySelector('body').style.backgroundColor = color; 
    }
  }
  var homefoot = {
    setColor:function (color){
      var alist = document.querySelectorAll('.home-footnote span');
      var i = 0;
      while(i < alist.length) {
        alist[i].style.color = color;
        i = i + 1;
      }
    }
  }
  var scrambleText = {
    setColor: function(color) {
      document.querySelector('.text').style.color = color;
    }
  }
  function nightDayHandler(self) {
    if (self.value === 'Night') {
      Body.setBackgroundColor('#37373d');
      self.value = 'Day';
      homefoot.setColor('white');
      scrambleText.setColor('white')
    } else {
      Body.setBackgroundColor('#efefef');
      self.value = 'Night';
      homefoot.setColor('#333');
      scrambleText.setColor('#333')
    }
  }

---

스크롤 이벤트

최근의 사이트들을 들어가보면 최대한 자연스럽고 속히 말해 튀지않도록 내용이 떠오르는 페이드 인 및 부가기능을 스크롤 이벤트와 함께 사용하는 걸 봤습니다. 그래서 구현해보고 싶었던 기능은 두 가지였습니다.

첫 번째는 콘텐츠가 나눠 놓은 div별로 부드럽게 떠오르는 페이드 인 효과 였습니다. 검색을 통하여 찾아보니 굉장히 다양한 효과들이 있더라구요. 최대한 구현할 수 있는 범위 내에서 수준에 맞는 걸로 우선 방법을 배웠습니다.

이걸 구현하면서 윈도우 창과 콘텐츠의 높이 그 차이를 계산해서 떠오르게 하는 방법과 창 자체에서 화면 아래 요소를 확인하고 떠오르게 하는 방법을 모두 생각하게 되었습니다. 하지만, 단일 콘텐츠마다 적용하려고 하니 기존에 적용한 호버효과 등 CSS 효과에 간섭이 심할 거 같아서 우선은 전반적인 레이아웃을 대상으로 초점을 잡았습니다.

여기에 적용한 방법은 아래 요소를 확인하고 떠오르는 방법을 채택하였지만 이미지 리스트 등을 구성한다면 요소에만 적용하여 구현하는 것도 좋은 방법이라고 생각하게 되었어요.

▶ 스크롤 페이드 인

두 번째는 화면 메뉴바 이미지 영역 하단에 진행바를 구현하는 것이었습니다. 사실 긴 내용을 가진 단일 사이트에 많이 쓰이는 것 같긴했지만, 앞서 구성했던 스크롤 이벤트를 더 확장해서 적용해보고 싶었습니다. 그래서 좌측에 본래 윈도우 바는 가리고 상단에 진행 정도를 표시하면서 이를 보여주고 싶더라구요.

▶ 스크롤 프로그래스바

• 소스코드

  function isElementUnderBottom(elem, triggerDiff) {
    const { top } = elem.getBoundingClientRect();
    const { innerHeight } = window;
    return top > innerHeight + (triggerDiff || 0);
  }
  function handleScroll() {
    const elems = document.querySelectorAll('.up-on-scroll');
    elems.forEach(elem => {
      if (isElementUnderBottom(elem, -60)) {
        elem.style.opacity = "0";
        elem.style.transform = 'translateY(70px)';
      } else {
        elem.style.opacity = "1";
        elem.style.transform = 'translateY(0px)';
      }
    })
  }
  window.addEventListener('scroll', handleScroll);

  document.addEventListener(
    "scroll",
    function() {
      var scrollTop = window.pageYOffset;
      var scrollBottom = document.body.scrollHeight - document.documentElement.clientHeight;
      scrollPercent = scrollTop / scrollBottom * 100 + "%";    document.getElementById("_progress").style.setProperty("--scroll", scrollPercent);
    },
    { passive: true }
  );

두 가지 기능을 적용하면서 느꼇던 건 DOM 콘트롤에 있어서 '다양한 이벤트 리스너를 어떻게 하면 더 자연스럽게 활용할 수 있을까?' 라는 생각이 많이 들었습니다. 사실, 스크롤 뿐만 아니라 리사이징, 키보드 입력, 클릭, 온 마우스 등 여러 이벤트 리스닝이 있는데 이를 적용해서 어떤 방식으로 구현을 해보는게 좋을지 생각하게 되었구요. 그리고 모바일 기기로 넘어갔을 때 이벤트를 활용한 모달창, 벡터 애니메이션의 변화도 더 생각하게 되었네요. 아마 진행하면서 보았던 기사가 눈에 남아서 더 그랬던 거 같습니다.

▶ Toss UX 엔지니어 관련 기사

또한, 사용자에게 데이터를 받아서 처리하는 방식을 어떻게 활용할 수 있을지도 생각하게 되었습니다. 노마드 코더에서 To Do List를 진행하던 부분과 네이버 부스트 캠프에서 폼 요소를 통하여 구현한 부분을 생각해보니 어떻게 데이터를 받아서 이를 구분하여 처리를 하면 좋을까 상상하게 되더라구요. 아무래도 백엔드단에서 처리해야하는 데이터와 프론트엔드단에서도 처리할 수 있는 데이터가 있겠지만은 확실히 이를 어떻게 구분 지을지에 대해선 아직까지 모호한게 사실입니다. 공부를 더 진행하다보면 알게 되는 날이 오겠죠?

---

텍스트 스크램블

우선 이건 예전부터 영상편집을 하면서 글리치 효과와 함께 적용하면 무척이나 괜찮은 효과가 나온다는 걸 생각하여, 웹에서 어떻게 구현하면 좋을지 생각하다가 적용하게 되었습니다.

사실 구현을하면서 많이 모르는 부분이 있었지만 최대한 따라가기 위해서 한줄씩 해독하면서 클론을 했다는 게 맞겠네요.
하면서 시각적으로 구현하는데 있어서는 정말 한계가 없다는게 와닿았습니다.

그리고, ES6에서 나온 기능인 클래스를 구성하여 각 함수를 연결하여 이를 동작을 원할하게 하는걸 위주로 해당 코드가 작성되어 있었습니다. 아직까지 ES5의 기능을 주로 연습하고 공부를 하고 있다보니 답답한 부분이 있더라구요.

인터렉티브 디벨로퍼 클론 코딩을 할 때도 느낀거지만 함수형 프로그래밍에 있어서 정말 꼭 숙지해야할 사항으로 다가왔습니다. 각각의 메소드를 구성하고 연결하여 기능을 통합한다는 점을 볼 때, 남은 시간 JS 자체를 더 알아가야 겠다는 게 확실시 되는 부분이었습니다.

▶ 텍스트 스크램블

---

개선방안

1. 벡터 svg 및 canvas를 통한 데이터 시각화
2. 시계 구현
3. ES6 클래스 및 콜백함수 활용법 숙지
4. 알고리즘 연습
5. DOM 연습
6. AJAX를 사용한 Fetch API 활용