Responsively 사용기
프로젝트에서 반응형 웹 디자인을 구현할 때 항상 불편했던 점이 있다. 바로 CSS 코드를 적용하고 나서 페이지 디자인 변경을 확인하기 위해 화면 기기의 해상도를 직접 변경해가며 확인해야 하는 부분이다. 이로 인해 에디터와 브라우저의 개발자 모드를 왔다갔다하면서 작업 흐름이 중단되고, 가끔은 특정 해상도에서의 디자인이 제대로 적용되었는지 확인하지 못하고 그대로 넘어가는 경우도 발생했다.
이러한 불편함을 해결하기 위해 진행 중인 프로젝트에 responsively라는 툴을 도입하였고 약간의 불편함도 있지만 팀원 모두 만족하면서 사용하고 있다.
Responsively?
responsively는 여러가지 기기 해상도에서 페이지 렌더링을 한 눈에 확인할 수 있도록 도와주는 툴이다. 하나의 화면에서 다양한 기기의 해상도에 렌더링되는 페이지를 한 눈에 확인할 수 있다.
23년 12월 현재는 다양한 OS에서 무료로 사용할 수 있으며 Github star가 2만개가 넘어갈 정도로 많은 관심을 받고 있다.
Responsively 사용법
Responsively의 사용법은 간단하다. 쉽게 생각해서 크롬, 사파리처럼 평소 사용하는 브라우저를 사용하는데 거기에 웹 개발에 특화된 기능들이 추가되었다고 생각하면 될 것 같다.
- 한 페이지에서 발생한 이벤트를 모든 페이지가 공유
하나의 화면에서 수행한 동작들이 실시간으로 모든 화면과 공유가 되며 이를 통해 모든 기기 해상도에서 동작을 쉽게 확인할 수 있다.
- 사용자 히스토리 데이터 삭제
주소 입력창 오른쪽에 위치한 3개의 버튼을 통해 사용자 히스토리 파일을 삭제할 수 있습니다. 각각 스토리지, 쿠키, 캐쉬 삭제 기능을 제공한다.
- Inspect Element 및 dev tools 제공
크롬과 동일하게 요소 검사와 개발 도구를 제공한다.
- 다양한 해상도 지원
프로젝트를 확인하고 싶은 해상도를 이미 만들어진 프로필을 통해 선택하여 추가하거나 해상도를 직접 커스텀이 가능하다.
여러 프로젝트를 진행하고 있는데 프로젝트마다 원하는 해상도가 다르다면 Suite를 미리 등록해두어 바로바로 변경이 가능하다.
- 한번에 여러 해상도 화면 캡처
여러 해상도 화면을 한번에 캡처하는 기능을 제공한다. 버튼을 클릭하면 현재 사용자가 선택한 해상도 개수에 맞게 모든 화면이 캡처되어 저장된다. 개인적으로는 UI 개발 완료 후 PR 내용에 프로젝트에서 지원하는 해상도들의 화면을 남길 때 유용하게 사용했다.
Responsively 단점
responsively를 한 달 넘게 사용해보니 단점도 존재했다. 특정 상황에서 이벤트가 공유되지 않는 버그가 발생하거나, suite에 등록해둔 해상도가 많은 상황에서 작은 화면에서 작업 시 한 해상도의 크기를 따로 지정할 수 없어 잘리는 화면을 확인하기 위해 스크롤을 해야하는 불편함이 있었다.
하지만 해상도를 직접 변경해가며 디자인 적용을 확인하는 번거로움에서 벗어나 한 눈에 다양한 해상도를 확인할 수 있다는 responsively의 장점이 너무 편리하게 다가오기 때문에 반응형 웹 페이지를 제작해야하는 프로젝트에서는 가장 먼저 찾는 툴이 될 것은 분명하다.