[CSS] 웹 앱의 사용성 높이기

서두

PWA 패키징을 적용한 <피클> 서비스를 개발하며,

모바일 환경에서의 사용성에 대한 고민을 하게 되었다

https://www.piickle.link/

내게 필요한 대화주제 추천, Piickle

 

🔗 Teo 님에게 멘토링 받은 사항들을 바탕으로,

생각보다 세심하게 보완할 수 있는 부분들이 많아 정리하고자 한다

 

모바일 환경이 주를 이루는 이 때에 웹 개발자로서

보다 더 네이티브 앱과 같은 사용감을 주기 위해 노력해보자

 

---

구현 사항

0. 모바일 테스트

우리 팀은 QA 테스트를 Android Chrome / iOS Safari / Kakao 인앱 브라우저 3가지로 두고 진행하였다

이외의 타겟 단말은 두지 않았고, 점유율이 높은 단말 위주로 개발을 진행하였다

 

git flow 전략을 이용하여 QA 버전의 배포 링크로 QA를 진행하거나

무선 LAN 어댑터 WiFi IPv4 주소를 통해 원활한 테스트를 진행하였다

 

모바일 테스트에 최적화된 LT Browser 를 도입할까 하였지만,

사용법을 숙지하는 데에 비용이 들 것 같아 기간이 정해져 있는 프로젝트에서 사용해보지는 못하였다

다음에 꼭 사용 해보고자 한다🤩🤩

 

1. hover ? active ?

hover 의 사용은 모바일에서 의미가 없기에, active 속성으로 치환하여 사용한다

 

2. 높이 100vh ?

iOS - Safari 에서의 100vh 문제는 webkit-fill-available 속성값을 min-height 속성으로 선언하여 해결하였다

 

여기서 webkit- 은 크롬, 사파리의 크로스 브라우징을 위한 접두어이다

표준이 아닌 CSS3 의 속성을 맞추기 위한 작업으로,

표준안에 대한 업데이트가 진행되는 중일 것이다

(stylelint 에는 표준 css 속성에 대한 접두어 제거 규칙이 있다) 

 

3. 클릭 시의 잔상 문제 ?

버튼을 터치할 때마다 생기는 사각형 잔상 문제는 callout 속성과 tap-highlighter-color 속성을 조정하여 해결할 수 있었다

hightligth color 를 rgba(0, 0, 0, 0) 으로 지정하여 터치했을 때 생기는 못생긴 테두리를 없애준다

 

이 외에도

- -webkit-touch-callout :: 화면을 길게 누르고 있을 떄 뜨는 팝업이나 액션시트를 제어한다

- -webkit-user-select :: 텍스트나 이미지를 선택할 수 있게 하는 여부를 제어한다

와 같은 제어 속성이 있다

 

4. 스와이핑과 스크롤 ?

<피클> 서비스는 아래와 같이 메인페이지에 슬라이더가 다수 포함되어 있다

 

피클 메인페이지

 

무엇보다도 스와이핑이 주 기능인 서비스이기 때문에 스와이핑 할 때의 사용감이 가장 중요했다

 

하지만 데모데이 시점에서, 몇 가지 문제점이 발견되었다

  1. (iOS) 좌우 스크롤이 잘 되지 않는 문제

  2. (iOS) 좌우 스와이핑을 진행할 때, 상하로 스크롤 되는 문제

 

여러 고민의 결과 다음과 같이 해결하였다

  1. scroll-snap 을 사용하여 더 자연스러운 좌우 스크롤이 되게끔 한다

  2. touch-action 을 사용한다. 좌우 스와이핑이 필요한 block 내에서 pan-x 속성값을 선언하여 상하 스크롤을 제한한다면, 상하로 스크롤 되는 문제를 원초적으로 해결할 수 있다

  3. body 에 manipulation 속성값을 선언하여 더블 탭과 같은 비표준 제스처를 비활성화 한다

 

---

글을 줄이며

이 외에도 사용자에게 보다 더 좋은 사용감을 선사할 다양한 기술들이 있을 것이 있을 것이라고 생각한다

'이거 어플 아니야?' 싶은 웹 서비스를 만들 때까지 ,, 개발자 간의 많은 소통이 있었으면 한다

 

참고

https://webclub.tistory.com/493

Mobile Web(모바일 웹) #2 - CSS, tech for Mobile Web

https://wit.nts-corp.com/2021/07/16/6397

CSS touch-action 한눈에 알아보기 | WIT블로그