PC와 태블릿, iOS, android 그리고 PWA 등 다양한 디바이스 환경에서 균일한 UI와 앱처럼 편리한 UX를 제공하기 위해 적용한 것들을 공유한다.

viewport 설정

viewport란 웹페이지가 사용자에게 보여지는 영역을 말한다. 유저마다 다양한 크기의 디바이스에서 접속하다 보니, 그에 맞는 viewport를 지정해주어야 한다. html5 기본 snippet으로도 제공하는 meta 태그이다.

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

• meta name=”viewport”: viewport 선언
• content=”width=device-width”: 콘텐츠를 표현할 넓이를 디바이스 크기에 맞춘다
• initial-scale=1: 초기 크기 설정 (기본 꽉찬 화면)
• minimum-scale=1: 최소 크기 설정 (기본값: 0.25, 범위: 0~10.0)
• maximum-scale=1: 최대 크기 설정 (기본값: 0, 범위: 0~10.0)
• user-scalable=no: 사용자 단말의 확대기능 사용 유무 선언 (yes/no)

y축 스크롤 고정

이미지 캐러셀이 아닌 경우, 보통 y축으로만 스크롤 하기 때문에 x축은 화면의 크기를 넘어갈 경우가 거의 없다.

body {
    touch-action: pan-y
}

• touch-action : 어떤 요소 내에서 브라우저가 터치할 액션의 목록을 지정한다.
• pan-y: 특정 객체를 터치한 후, 수직 혹은 수평 방향으로만 스크롤의 범위를 제한한다. 이를 적용할 시, y축으로만 스크롤을 제한하여 세로로 스크롤 중에, x축으로 화면이 이동하는 것을 방지할 수 있다.

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

상태표시줄 색상 지정

meta name='theme-color' : 상태표시줄 색상을 지정하는 meta태그 중 한 종류이다.

<meta name='theme-color' content='YOUR_COLOR'/>

모달창을 띄울때 상태표시줄 색상만 튀기 때문에, 모달시 dim된 색상으로 meta 태그를 바꿔주도록 했다. (react-helmet 이용)

<meta name='theme-color' content={modalOpened ? '#7C7C7C' : 'THEME_COLOR'} />

iOS safari 주소 표시줄 색상 지정

일반 상황에서는 앞선 theme-color로 지정한 색상이 적용되지만, PWA에서 full-screen를 적용하기 위해 manifest full-screen으로 설정한 경우, 화면이 상태표시줄까지 꽉찬 사이즈로 적용되고, 이 때 상태표시줄의 색상을 지정하는 iOS 전용 meta태그이다.

manifest.json

{
    "name": "YOUR_APP",

            ...

    "display": "full-screen"
}

index.html

<meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">

더블클릭/터치시 글자 영역 선택 방지

PC에서 특정 element에 더블클릭을 하거나, 더블터치를 하게 되면, 다음과 같이 block이 생기는 걸 볼 수 있다. 이는 텍스트에서는 유용하지만, 연속적인 터치가 필요하거나 이미지인 경우 몰입감을 저해할 수 있어 보인다.

이는 user-select: none으로 간단하게 처리할 수 있다.

.your_img {
    user-select:none
}

iOS safari X 100vh

PC나 안드로이드 환경에서는 height에 100vh를 적용할 시, 화면 뷰포트에 꽉차게 적용된다. 하지만 iOS safari 특성상 상단바와 하단바까지 포함한 값으로, 상단바나 하단바가 켜져있을 경우 정확한 height를 나타낼 수 없다.

hook을 만들어, 화면 크기가 resize될 때마다 변경된 화면 높이의 크기 맞게 vh를 설정해주었다. 잦은 resize로 성능에 문제가 생길 수 있기 때문에 debounce 처리를 해주었다.

import { debounce } from 'lodash';
import { useEffect } from 'react';

const useScreenHeightResize = () => {
  const handleResize = debounce(() => {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  }, 500);

  useEffect(() => {
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
};

export default useScreenHeightResize;

이를 지원하지 않는 브라우저에서는 100vh를 적용하고, 지원하는 브라우저에서는 받아온 --vh로 height를 설정해준다.

.container {
    height: 100vh; // fallback
    height: calc(var(--vh) * 100);
}

참고: https://velog.io/@edie_ko/Tip-모바일-브라우저에서-100vh-적용-오류-해결-iosandroid

iOS select 태그 style reset

iOS에서 select 태그의 기본 설정이 적용되어 있어서, 스타일링을 해도 적용되지가 않는다. 다음과 같이 기본 select 태그의 기본 설정을 제거해 주어야 한다.

GloabalStyles.tsx

select {
    -webkit-appearance: none;
  -moz-appearance: none; 
  appearance: none;
}

참고: https://m.blog.naver.com/sudoku1/221413644751

iOS에서 터치 시 생기는 테두리 영역 제거

iOS에서 element를 터치할 시, 터치한 element의 영역에 회색 테두리가 생긴다. 이는 터치한 영역을 사용자에게 알려줄 수 있는 장점이 있긴 하지만, 필자는 앱처럼 자연스럽게 보이는 걸 목표로 하기 때문에 이를 제거해주었다.

* { 
    -webkit-tap-highlight-color:transparent;
}

모달창 열려있을 때 스크롤 방지

모달창이 열려있을 때, 외부로 스크롤이 되는 것을 방지하기 위해, 다음과 같이 modal_opened 클래스를 동적으로 추가하고 삭제해주도록 작성한다.

body {
  overflow: auto; 
}

body.modal_opened {
  overflow: hidden; // 스크롤 방지
  touch-action: none; // 확대, 축소 비활성화
}

이미지 드래그 방지(Ghost Drag)

이미지 위에서 드래그 및 터치를 할 시 드래그 잔상이 생긴다. 이는 특히 이미지 슬라이드에서 불편한 UX를 제공한다. 다음과 같이 간단하게 개선할 수 있다.

.your_img {
    -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

모바일 hover (CSS로 PC, 모바일 구분하기)

hover 이벤트는 PC 환경에서만 발동해야 한다(정확히는 마우스). 하지만 hover 이벤트가 없는 모바일 환경에서도터치를 하면 hover에 적용된 속성이 발동한다. 이는 다음과 같이 적용하면, CSS에서 PC와 모바일을 구분할 수 있고, 따라서 괄호 안에 포함되는 스타일은 모바일 환경에서만 적용되는 스타일로 생각하면 된다.

@media (hover: hover) and (pointer: fine) {
    button:hover {
      transform: scale(150%);
    }
  }

• hover:hover : 기본 포인팅 장치가 특정 엘리먼트 위로 쉽게 hover할 수 있는 경우를 나타낸다.
• pointer:fine : 마우스와 같은 포인팅 장치의 존재 여부를 판별하는데 사용된다.

참고: https://paperblock.tistory.com/164

느낀점

프로덕트에 애정을 가지고 개발하고, 사용자 레벨에서 사용하다 보면 사소한 것들도 눈에 띄곤 한다. 그러면서 눈에 띄는 것들을 하나하나 개선하게 된 것 같다.

특히 PC에서 개발자 도구로 디버깅 하다보면, 실제 모바일 환경과 다소 다른 점이 발견되어 적잖이 당황했다.

그 이후로는 사용하는 아이폰과 안드로이드 직접 연결하여 디버깅하는 것이 프로덕트의 UI와 UX를 향상하는 데에 많이 도움이 된 것 같다.

그리고 iOS는 너무 까다롭다

firestore에 특정 데이터가 등록될 시, slack으로 메시지가 전송되도록 자동화해보자

배경

기숙사생만 이용하는 커뮤니티 특성상, 기숙사생임을 인증하는 절차가 존재한다. 수많은 가입 인증 처리를 관리하기 위한 프로세스가 필요했다. 프로세스는 다음과 같다.

1. 사용자가 회원가입 인증용 이미지(이름표 사진)를 업로드한다.
2. 업로드한 이미지와 사용자 정보를 admin slack 계정으로 메시지를 보낸다.
3. 관리자 slack으로 전송된 사용자의 이미지와 사용자 정보가 일치함을 확인 후 회원가입을 승인한다.

Slack Webhook

먼저 slack webhook을 등록하고, webhook url을 복사한다 (참고)

slack url이 외부로 노출되는 걸 방지하기 위해, firebase functions:config:set을 통해 firebase에 url을 등록한다.

firebase functions:config:set slack.url="https://hooks.slack.com/services/[YOUR_ID]"

@slack/client npm 패키지를 설치한다.

npm install @slack/client

설치한 패키지를 불러오고, SlackWebhook을 선언한다.

// functions/src/index.ts

import SlackWebhook = require('@slack/client');
const IncomingWebhook = SlackWebhook.IncomingWebhook;
const config = functions.config();
const slackUrl = config.slack.url;
const Slack = new IncomingWebhook(slackUrl);

            ...

firestore-functions

users 컬렉션에 새로운 user 데이터가 생성될 때, firestore-functions의 onCreate 내부에 있는 동작이 트리거된다. Slack.send를 통해 원하는 메시지를 전송하도록 하였다.

// functions/src/index.ts

        ...

export const userCreated = functions
  .region('asia-northeast3')
  .firestore.document('users/{userId}')
  .onCreate((snapshot) => {
    const { email, name, resident_auth_image, uid } = snapshot.data();

    Slack.send({
      blocks: [
        {
          type: 'section',
          text: {
            type: 'mrkdwn',
            text: '새로운 사용자가 등록되었습니다.',
          },
        },
        {
          type: 'section',
          text: {
            type: 'mrkdwn',
            text: `*이름:*\n${name}\n*아이디:*\n${uid} ... 사진*:${resident_auth_image}\n`,
          },
                            ...
                }
            ]
        });
});

터미널에 다음 코드를 실행하여, 작성한 코드를 firebase에 배포한다.

firebase deploy --only "functions:userCreated"

데모

recoil의 selector를 이용하여 동일한 API의 요청에 대해서는 값을 캐싱을 하여, 불필요한 API 요청을 줄여보자.

selector

selector란 구독하고 있는 atom에 변화가 생길 때마다 새로운 값을 리턴해주는 순수 함수이다. 즉, get을 통해 가져온 값은 의존성을 갖고 있어, 구독하는 값이 변할 때마다 새로운 값을 갱신한다.

이를 단순히 get에 async와 await을 추가함으로서 비동기를 처리할 수 있는데, 여기서 중요한 점은 위와 반대로 구독하는 atom 값이 변하지 않을 경우, 동일한 값을 리턴한다는 점이다. 즉, 파라미터가 동일하다면, 캐시된 값을 리턴한다.

export const mySelector = selector({
  key: 'my_selector',
  get: async ({ get }) => {
    const user = get(userState);
    const posts = await getMyPosts(user.id);
    return posts;
  },
});

캐시 값 갱신

그렇다면 구독하는 atom과는 별개로, selector의 값을 필연적으로 갱신해줘야 할 경우에는 어떻게 해야 할까?

Version Parameter

가장 단순한 방법으로는, Date time stamp를 파라미터로 넣어서 의존성을 주입시키는 것이다. 참고로selectorFamily를 사용해서 selector에 원하는 파라미터를 넣을 수 있다. 마찬가지로 이 파라미터도 의존성을 갖기 때문에, 파라미터 값이 달라지면 그 값으로 갱신된다.

하지만 이 방식대로 하면, 매 API 요청 마다 새로운 API 요청으로 인식될텐데, 이는 캐싱을 사용하지 않던 기존 방식과 큰 차이가 없을 것이다.

// selector 정의부
export const productAsyncState = selectorFamily({
  key: 'productAsyncState',
  get:
    ({ ver }) =>
    async ({ get }) => {
      const idx = get(productIdxState);
      return await getProductDetail(idx, ver);
    },
});

// 호출부
const date = useRecoilValue(productAsyncState({ ver: Date.now() }));

useRecoilRefresher

따라서, 원하는 시기에 캐시를 강제로 갱신시켜주는 방법이 필요한데, recoil 0.50 버전부터 useRecoilRefresher라는 기능이 unstable 딱지를 달고 릴리즈되었다.

캐시를 갱신해줘야하는 경우에 이 함수를 호출하면, 기존 캐시를 제거하고 atom에 변화가 생기지 않더라도 새로운 값으로 갱신한다.

데이터 갱신이 필요한 곳 마다 사용할 것이기 때문에 hook으로 만들어주었다.

import { RecoilValue, useRecoilRefresher_UNSTABLE } from 'recoil';

const useRecoilCacheRefresh = (state: RecoilValue<any>) => {
  const refresher = useRecoilRefresher_UNSTABLE(state);
  return refresher;
};

export default useRecoilCacheRefresh;

const myPostsCacheRefresher = useRecoilCacheRefresh(myPostsState);

적용

위의 내용을 토대로 실 상황에 적용해보자.

게시글을 올렸을 때, 내 작성글 페이지에 갱신되어야 하는 상황이다. 게시글을 삭제했을 때도 마찬가지로, 값이 갱신되어 내 작성글에서 제거되어야 한다.

이 두 상황을 제외하면 항상 같은 데이터를 가질 것이기 때문에, 여기에 selector를 이용하여 값을 캐싱한다.

selector

get으로 로그인한 사용자 정보를 가져와 의존성을 주입시킨다. 가져온 사용자의 id를 토대로, 내 작성글을 불러와 리턴해준다.

export const myPostsState = selector({
  key: 'posts/myPosts',
  get: async ({ get }) => {
    const loginUser = get(loginUserState);
    const posts = await getMyPosts(loginUser.uid);
    return posts;
  },
});

게시글 등록 및 삭제 시 값 갱신

위에서 만든 userRecoilCacheRefresh를 통해, 강제 캐시값 갱신이 필요한 컴포넌트에서 사용해준다.

// 내 작성글 값에 변화가 이루어지는 컴포넌트

const myPostsCacheRefresher = useRecoilCacheRefresh(myPostsState);

...

const onUploadPost = async () =>{
    await uploadPost( ); // 내 작성글 업로드
    myPostsCacheRefresher();
}

...

const onDeletePost = async (id) =>{
    await deletePost(id); // 내 작성글 삭제
    myPostsCacheRefresher();
}

사용 부분

selector를 사용하면, 해당 값이 사용되는 컴포넌트를 React.suspense 로 감싸서 사용해야한다. 혹은 useRecoilValueLoadable를 사용해서, selector의 state에 맞게 분기 처리해서 사용해줘도 된다.

필자는 state가 loading일 때는 skeleton ui를 보여주고, state가 불러와졌을 때는 값을 꺼내서 사용해주었다.

// MyPosts.tsx 내 작성글 페이지

const MyPosts = () => {
  const postsLoadable = useRecoilValueLoadable(myPostsState);

  return (
    <S.Container>
      {postsLoadable.state === 'loading' ? (
        <S.PostCardSkeleton />
      ) : (
        <CardContainer posts={postsLoadable.contents} />
      )}
    </S.Container>
  );
};

결과

이처럼, 데이터가 변경되는 상황이 적고 예측이 가능한 경우에, 평상시엔 값을 캐싱하여 캐시된 값을 리턴해주고, 데이터가 변경되는 시점에는 강제로 캐시를 갱신해주는 방식으로 사용하면 불필요한 API 호출양도 줄이고, 빠른 속도로 데이터를 제공할 수 있기에 시도해보기 좋은 방법 같다.

적용 전

적용 후

참고

https://velog.io/@yiyb0603/Selector를-이용하여-데이터-값-캐싱하기 https://www.youtube.com/watch?v=0-UaleJZOw8 https://recoiljs.org/ko/docs/api-reference/core/useRecoilRefresher

따분한 로딩창 말고, 사용자 친화적인 Skeleton UI로 사용자 이탈율을 줄여보자.

1. Skeleton UI란?

스켈레톤 UI는 실제 데이터가 렌더링 되기 전에 보이게 될 화면의 윤곽을 먼저 그려주는 로딩 애니메이션이다. 사용자의 이탈을 막고, ‘어떤 것들이 보여질 것이다’라고 미리 알려주는 효과를 준다. 기존 Spinner에 비해 훨씬 사용자 친화적이고, 사용자 이탈율도 실제로 적다고 한다.

2. 구현

Skeleton Item

먼저 Skeleton UI를 적용할 컨텐츠에 공통적으로 사용되는 Item을 정의한다. CSS animation을 이용하여, 일정한 시간동안, 배경색의 투명도가 반복적으로 바뀌도록 한다.

import styled from 'styled-components';

const SkeletonItem = styled.div`
  width: 100%;
  height: 30px;
  background-color: #f2f2f2;
  position: relative;
  overflow: hidden;
  border-radius: 4px;

  @keyframes skeleton-gradient {
    0% {
      background-color: rgba(165, 165, 165, 0.1);
    }
    50% {
      background-color: rgba(165, 165, 165, 0.3);
    }
    100% {
      background-color: rgba(165, 165, 165, 0.1);
    }
  }

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: skeleton-gradient 1.5s infinite ease-in-out;
  }
`;

export default SkeletonItem;

Card Skeleton

앞서 정의한 Skeleton Item을 활용하여, 게시물 카드의 Skeleton UI를 구현한다.

import styled from 'styled-components';
import SkeletonItem from './components/SkeletonItem';

interface Props {}

const CardSkeleton = (props: Props) => {
  return (
    <Wrapper>
      {new Array(6).fill('').map((_, i) => (
        <Card key={i}>
          <Title />
          <Content />
          <Bottom>
            <Circle />
            <Title />
          </Bottom>
        </Card>
      ))}
    </Wrapper>
  );
};

const Wrapper = styled.ul`
  ...
`;

const Card = styled.li`
  ...
`;

const Title = styled(SkeletonItem)``;

const Content = styled(SkeletonItem)`
  height: 130px;
`;

const Bottom = styled.div`
  display: flex;
  gap: 12px;
`;

const Circle = styled(SkeletonItem)`
  width: 35px;
  height: 30px;
  border-radius: 50%;
  background-color: #f2f2f2;
  position: relative;
  overflow: hidden;
`;

export default CardSkeleton;

기존 컴포넌트의 Layout 재사용

Skeleton UI는 적용하고자 할 컴포넌트와 가능한 비슷한 것이 좋은 사용자 경험을 제공할 수 있다. 그런데 만약, 기존 컴포넌트의 디자인이 수정된다면, 매번 Skeleton UI를 수정해야한다.

이를 개선하기 위해 PostCard와 공통적으로 사용하는 레이아웃을 모듈화한 Layouts을 import하여 필요한 컴포넌트를 재사용하는 방식으로 리팩토링하였다.

import styled from 'styled-components';
import SkeletonItem from './components/SkeletonItem';
import { Layouts as S } from 'components/common/PostCard/Layouts';

interface Props {}

const PostCardSkeleton = (props: Props) => {
  return (
    <S.Wrapper>
      {new Array(6).fill('').map((_, i) => (
        <CardSkeleton key={i}>
          <Title />
          <Content />
          <Bottom>
            <Circle />
            <Title />
          </Bottom>
        </CardSkeleton>
      ))}
    </S.Wrapper>
  );
};

const CardSkeleton = styled(S.PostCard)`
  gap: 20px;
  cursor: default;
`;

const Title = styled(SkeletonItem)``;

const Content = styled(SkeletonItem)`
  height: 130px;
`;

const Bottom = styled.div`
  display: flex;
  gap: 12px;
`;

const Circle = styled(SkeletonItem)`
  width: 35px;
  height: 30px;
  border-radius: 50%;
  background-color: #f2f2f2;
  position: relative;
  overflow: hidden;
`;

export default PostCardSkeleton;

3. 결과

렌더링 될 컨텐츠를 미리 그려줌으로써, 사용자는 현재 로딩중임을 인지하고 로딩 시간을 보다 친화적으로 받아들일 수 있을 것이다.

참고

https://ui.toast.com/weekly-pick/ko_20201110

CSS 단 두 줄로, 부드러운 스크롤의 carousel을 만들 수 있다!

• scroll-snap은 사용자가 터치 혹은 스크롤 조작을 하였을 때 offset을 설정할 수 있는 속성이다.
• 이를 통해 스와이프 하거나, 스크롤 할 때 자연스러운 효과를 낼 수 있다.

scroll-snap-type

• 축과 엄격도를 선언해주는 속성
• 부모 컨테이너에 지정
• proximity : 기본값, 축에 따라서 자동으로 맞추어져 스냅
• madatory : 항상 스냅

.parent-container{
    scroll-snap-type: x mandatory; // x축으로 항상 스냅
    scroll-snap-type: y mandatory; // y축으로 항상 스냅
}

scroll-snap-align

• 스냅이 되었을 때 정렬해주는 속성
• 자식 요소에 지정
• 스크롤시 지정해준 속성의 위치로 곧바로 이동한다

.item {
    scroll-snap-align: start;
    scroll-snap-align: center;
    scroll-snap-align: end;
}

💡 flex: none

부모에서 display: flex 를 지정하고, 자식에서 flex: none 을 지정하지 않을 시, 부모 크기에 맞춰 자식 요소들이 수축될 수 있다.

💡 &::-webkit-scrollbar

이를 display:none 으로 설정할 시, 해당요소(&)의 스크롤바를 제거할 수 있다.

예시

!codepen[taekhun/embed/MWmXpXK?default-tab=result]