프로젝트 후기

주제 : 다양한 기기 및 OS 그리고 브라우저 맞추기

• OS : window, Mac
• 기기 : 윈도마우스, 매직마우스, 키보드, 트랙패드..
• 브라우저 : 크롬, FF, IE 11

들어가기 앞서..

아래 정리한 내용들은 제가 진행하면서 느낀점을 정리한 것입니다.
그러니 100% 옳지 않을 수 있습니다. 그렇기 때문에 ‘비판적인 시선’으로 읽어주시기 바랍니다.
의견이 다르거나 아래 내용처럼 생각하지 않으신다면 그리고 보다 더 좋은 방법을 알고 계신다면 공유 부탁드리겠습니다.
저 또한 앞으로 아래내용과 다르게 더 좋은 내용과 방법들을 알게되면 바로바로 공유하도록 하겠습니다.

첫번째 키워드 : 통일성

특정 이벤트에 의해 발생하는 인터렉션들이 일정하다면각종 기기를 맞추는데 큰 문제는 없습니다.
예를 들어 특정 페이지의 scroll Event에 걸리는 인터렉션 효과 중 하나가 페럴렉스이고 이 scroll Event에 걸려있는 다른 효과들이 페럴렉스에 영향을 안주는 아예 별개의 모션들이라면 모든 기기를 맞추는 것은 별 문제가 안됩니다.

하지만 이번 XX 프로젝트는 그러지 않았습니다.
특정 구간에선 스크롤이 멈춰있어야 했고, 특정 구간에선 페럴렉스 효과가 있어야 했습니다. 여기서부터 각종 기기와 브라우저, OS를 맞추는데 다양한 에러사항들이 생기기 시작했습니다.

두번째 키워드 : 강제

강제적으로 어떤 ‘특징’을 제어하려고들면 문제가 발생합니다. (이 또한 통일성이 없을 때 발생하는 문제입니다.)
예를 들면, ‘관성 스크롤’은 트랙패드와 매직마우스 그리고 터치스크린의 ‘특징’입니다.그리고 ‘바운스 현상’은 iOS의 ‘특징’입니다.
이러한 ‘특징’을 인정해주지 않고 강제로 이런 ‘특징’을 억제해야되는 모션이 들어간다면 (해당 페이지 전체 구간에 그런 ‘특징’을 억제해야되는 모션이 통일성있게 들어간다면 그나마 괜찮습니다.) 그때부터 예측할 수 없는 에러들이 발생하기 시작합니다.

세번째 키워드 : Event

JavaScript 는 Event 기반 언어입니다.
이 말은 어떤 필요한 기능들을 특정 Event 들을 활용해 제어한다는 뜻입니다.
예를 들면 어떤 버튼을 click 했을 때 A 기능(콜백함수)이 발생하도록 코드를 작성합니다.

이는 JavaScript의 특징입니다.
그렇기 때문에 Event 가 감지되는 행위를 중요하게 여겨야됩니다.

XX 프로젝트에서 많이 쓰인 ‘scroll, mousewheel, touchmove’ 와 같은 Event 들은 ‘순식간에 많이’발생하는 대표적인 이벤트입니다.
마우스 휠을 한번 돌리면 세게 돌리느냐 약하게 돌리느냐에따라 차이는 있지만 순식간에 평균 적게는 6번에서 많게는 15번 이상 Event가 중첩이 됩니다.
즉 이 말은 그 짧은 순간에 콜백함수가 6~15개 이상이 쌓인다는 것입니다.
이것이 트랙패드 및 매직마우스 그리고 터치스크린이라면 순식간에 60~150개 많게는 200개의 Event가 발생하게 됩니다.
그러면 그 짧은 시간에 60~200개의 콜백펑션이 쌓이겠죠..
이는 브라우저에 큰 과부하를 끼칩니다. 때문에 해당 페이지의 성능을 현저하게 떨어트립니다.
그 페이지가 다른 개발 요소들이 별로 없는 ‘정적 페이지’에 가깝다면 그나마 괜찮겠지만 다른 데이터를 불러오고 기능이 많이 들어가있는 ‘동적 페이지’라면 문제는 커질 것입니다.
실제로 2011년도에 트위터에서 이러한 이슈로인해 트위터 기능이 현저하게 떨어진 적이 있었습니다. https://johnresig.com/blog/learning-from-twitter/

즉 scroll 과 같은 값비싼 Event 를 제어할 땐 다음과 같은 개념을 사용해야됩니다.

• Throttle / Debounce

위와 같은 개념을 모든 경우에 적용할 수는 없지만, (예를 들면 scrollTop 위치에 따라 각 메뉴들의 활성 비활성이 계속 변해야한다면, 이는 실시간으로 scrollTop 값을 읽어야되기 때문에 위와 같은 개념을 사용할 수 없습니다. ) 되도록이면 이러한 개념들을 적용해야됩니다.

마지막.. 반드시 해답은 있다.

평소 이쪽일을 할때 제가 가지고 있는 생각(?)입니다.
해결이 불가능한 미션은 없다고 생각합니다.
다만 제 자신이 부족할뿐이라고 생각합니다.
컴퓨터 사이언스는 수학이나 물리학과는 다른점이 ‘공리’가 없다는 점이라고 합니다.
어떤 현상을 설명하기위해 대전제로 깔아놓고 들어가는 ‘공리’가 없기 때문에 컴퓨터에서 발생하는 어떠한 현상에는 반드시 ‘원인’이 명백하게 있다고 합니다.

즉 그 ‘원인’만 파악을 잘 하면 해결을 못하는 문제는 없다는 뜻이겠죠..

이번 XX 프로젝트를 할 때도 이 생각을 하면서 임했습니다.
하지만 그럼에도불구하고 완벽하게 해결 못한점들이 너무 많기에 아쉬움이 컸습니다.
다음번에는 이러한 아쉬움을 조금이나마 더 줄일 수 있도록 더 발전하도록 하겠습니다.