iPad 클론코딩

클론 코딩이 개발 실력을 키위기 위해 자주 활용되는 방법이지만, 지금 내 상황에서 정말 필요한지 고민이 많이 되었다. 그럼에도 불구하고 시멘틱한 코드를 작성을 연습하기 위해서는 클론 코딩만큼 효과적인 방법도 드물다고 생각한다. 

 

이미 존재하는 홈페이지를 따라 만드는 것이기 때문에 UI 디자인에 대한 고민을 덜 수 있고, 코드 작성과 기술적인 구현에 집중할 수 있다. 이번 클론 코딩으로는 iPad 홈페이지를 선택했고, 제한 사항으로 React와 같은 라이브러리 없이 HTML, CSS, Vanilla JavaScript만 사용하려고 한다. 

 

또 다른 장점으로는 시간이 오래 걸리지 않는다. 모바일까지 작업을 한다면 모르겠지만 굳이 모바일은 작업하지 않을 것이기 때문에 금방 작업이 끝났다. 

 

position fixed의 발견 

웹페이지를 개발하다 보면 특정 버튼을 눌렀을 때, 화면이 고정되고 스크롤이 되지 않도록 처리해야하는 경우가 종종 있다.

예를 들어, 검색창이 활성화되거나 햄버거 메뉴를 열었을 때 화면이 고정되는기능이 이에 해당된다. 

 

그동안 이런 기능을 구현하기 위해서 JavaScript의 scroll 이벤트를 막거나, overflow 속성을 활용해 왔지만, 이 방법이 정말 최선일까? 하는 고민이 늘 있었다. 그러던 중 더 좋은 방법을 찾게 되었는데, 바로 position fixed를 활용하는 방법이다. 

 

position fixed로 화면 고정 처리하기

fixed 속성은 요소를 화면에 고정시켜 스크롤과 관계없이 항상 특정 위치에 유지시킨다. 이 속성을 html 태그에 적용하면 body 태그의 스크롤을 간단히 비활성화 시킬 수 있다.  

html.fixed {
  position: fixed;

  width: 100%;
  overflow-y: scroll;
}

• position: fixed : 화면에 고정되어 스크롤이 발생하지 않음
• width: 100% : fixed 요소가 기본적으로 최소 크기를 가지려고 하기 때문에, 화면 전체를 차지하도록 설정
• overflow-y: scroll : 선택사항으로, 원래 스크롤바가 있었음을 유지하기 위해 추가

이 설정을 사용하면 특정 이벤트가 발생했을 때, 스크롤을 비활성화 시킬 수 있다. 

 

Image Sprite 기법

아이콘 애니메이션 기능을 구현하기 위해서 어떤 방법을 사용할지 고민하다가 Image Sprite를 사용해서 처리한 것을 확인할 수 있었다. 

여러 곳에서 사용하고 있는 기법으로, 웹 페이지의 HTTP 요청수를 줄여 서버 부하를 줄이고, 단일 이미지만 로드하기 때문에 페이지 로딩 시간을 단축하는 등 성능 향상이 가능하다. 

 

사용하기 위해서는 계산이 필요하지만

 

주로 로고, 작은 버튼, 아이콘 등의 반복적으로 사용되는 작은 이미지에서 사용하는 기법이고, 위와 같이 애니메이션을 구성하기 위해서 필요한 프레임 단위 이미지가 필요하다.