choi
river

연락

사인팟 · 병원 사이트 20개

코드반응형인터랙션

모바일 시안이 없는 화면도 20개 사이트가 같은 기준으로 줄어들게 만들었습니다

문제
브레이크포인트는 디자이너와 처음부터 정했지만 일정상 모바일 시안이 늦거나 없는 섹션이 더 많았습니다. 그때그때 감으로 메우면 사이트마다 모바일 품질이 달라집니다.
결정
시안이 없을 때의 판단 기준을 문서로 정하고 화면 폭별 측정은 스크립트로 자동화하고 다른 병원에서 검증된 모바일 배치는 공용 컴포넌트 옵션으로 재사용.
결과
공유 패키지 9개 위에서 20개 사이트 운영. 모바일 FCP 2.4초 → 1.2초(자체 측정).
소속
사인팟 (Signpod) · 프론트엔드 개발자
기간
2026.03 — 현재
역할
모노레포 설계 · 운영 주도
범위
병원 사이트 20개 · 코드와 반응형 (디자인은 외부 시안이고 연세오케이는 인터랙션 기획부터)
도구
Turborepo · clamp() fluid 유틸 · 컨테이너 단위 · Storybook
새 창

녹화PC 폭(1440px)에서 실제 사이트를 녹화한 영상입니다.

같은 공유 패키지 위에서 돌아가는 실제 배포 사이트입니다. 기기를 바꿔 보면 모바일 · 태블릿까지 같은 기준으로 줄어드는 걸 볼 수 있습니다.

단면도 · 폭 전환

1440px14401024812390

  1. 문제

    사이트마다 따로 구현하면 수정 1건이 20번의 작업이 됩니다. 화면 구간(모바일 · 태블릿 768 · PC 992)은 디자이너와 처음부터 정해 공용 토큰에 넣었지만 일정상 모바일 시안이 늦거나 아예 없는 섹션이 더 많았습니다. 시안 없는 화면을 그때그때 감으로 메우면 같은 20개 사이트라도 사람과 날에 따라 모바일 품질이 달라집니다.

  2. 대안 검토

    • 화면마다 그때그때 판단빠르지만 기준이 사람마다 달라 사이트끼리 품질이 어긋납니다.
    • 판단 기준을 문서로 정하고 측정은 자동화 · 검증된 배치는 컴포넌트로 재사용시안이 없어도 같은 기준으로 만들고 숫자로 확인할 수 있습니다.선택

  3. 실행

    공통 토큰과 컴포넌트를 공유 패키지 9개로 나누고 앱에는 오버라이드만 남겼습니다.

    • 판단 기준 문서모바일 시안이 없을 때 볼 기준을 스킬 문서(figma-qa)로 정했습니다. 가로 스크롤 · 고정 UI와 겹침 · 44px 미만 버튼 · 12px 미만 글자 · 이미지 비율 어긋남 · 잘린 글자는 자동으로 잡고 가로 묶음이 세로로 쌓일 때 구분선이 폭을 채우는지 · hover 정보에 모바일에서도 닿는지 · 숨긴 블록이 의도인지는 사람이 봅니다.
    • 화면 폭별 측정 자동화스크립트(qa-capture)가 375 · 768 · 1440 폭에서 섹션을 재서 숫자로 보고합니다. 나중에 시안이 오면 차이를 버그와 판단이 필요한 항목으로 나눕니다.
    • 검증된 배치 재사용모바일 시안이 있던 병원(글로벌튼튼)의 3단 브레드크럼 배치를 공용 Breadcrumb의 stackOnMobile 옵션으로 올리고 모바일 시안이 없던 연세오케이에서 켜서 썼습니다. 디자인을 복사하지 않고 검증된 패턴을 공용 컴포넌트 옵션으로 만들었습니다.

    clamp() fluid 스케일과 컨테이너 단위로 타이포와 간격이 끊김 없이 줄어들게 했습니다. 모션 토큰(ease · duration · stagger · mask)과 스크롤 리빌 훅을 패키지로 묶고 43개 파일에서 prefers‑reduced‑motion에 대응했습니다.

  4. 병원마다 다른 글자 크기

    디자인 시스템으로 타이포 스케일을 맞춰 놔도 요구는 병원마다 달랐습니다. 어떤 원장님은 특정 화면 폭에서만 글자를 더 키워 달라고 했습니다. 공용 스케일은 고정 px라 앱마다 typo-title-3 · sm:typo-title-2 · lg:typo-title-1처럼 구간마다 단계를 손으로 바꿔 끼웠고 이렇게 구간에 붙은 타이포 클래스가 156개였습니다. 구간 경계에서는 글자가 계단처럼 튀고 요구 하나에 클래스 여러 개를 고쳐야 했습니다.

    • 값 쌍으로 선언피그마가 주는 모바일(390) 값과 PC(1440) 값만 fl-text-28/48처럼 적으면 그 사이 폭은 직선으로 자동 계산되고 양 끝 밖에서는 고정됩니다(clamp).
    • 오버라이드는 값만 바꾼다모바일에서만 키워 달라는 요구는 앞 숫자 하나(fl-text-34/48)로 끝나고 중간 폭은 다시 계산됩니다. 구간마다 클래스를 갈아 끼우지 않습니다.
    • 계산은 한 곳CSS 유틸과 TypeScript fluid(모바일, PC)가 같은 식을 쓰고 fluidAt()이 폭별 기대값을 내서 QA 기준으로 씁니다.
    • 컨테이너 단위뷰포트 대신 cqi로 계산해 공개 사이트 · 편집기 iframe · 미리보기 틀에서 같은 식 하나로 동작합니다.

    글자 크기 · 행간 · 여백 · 간격까지 같은 유틸로 만들어 홈페이지 빌더와 병원 앱에 적용했습니다. 글자 크기 유틸만 138곳입니다.

    3901440
    • 이전: 구간마다 단계 교체
    • 공용 28/48
    • 모바일만 크게 34/48
    fl-text-34/48

    건강한 하루를 위한 진료

    지금 폭
    820px
    계산된 크기
    39.7px
    이전 방식
    36px

    병원마다 값 쌍만 바꾸면 중간 폭은 같은 식으로 다시 계산됩니다. 도식의 숫자는 예시이고 식은 실제 코드(lib/fluid.ts)와 같습니다.

  5. 연세오케이: 인터랙션 기획 · 구현

    연세오케이병원은 디자인 시안을 받되 화면이 어떻게 움직일지는 제가 기획하고 구현했습니다.

    • 약속(Promise) 섹션: 이미지 8장을 화면 높이로 배치하고 스크롤하는 동안 섹션을 고정해 한 장씩 넘어가게 했습니다.
    • 수술 사례: 스크롤에 맞춰 큰 타이포그래피가 함께 움직이고 언론보도 영역은 지나갈 때 배경색이 바뀝니다.
    • 히어로: 제목이 떠오를 때 실적 구분선이 왼쪽에서 오른쪽으로 함께 그려집니다(GSAP).
    • 학회 활동은 연도 레일 hover 애니메이션과 연속 스크롤로 만들고 논문 표지는 dock처럼 커지는 hover로 만들었습니다.
    • 움직임 때문에 쓰기 불편해지지 않게 모바일 스크롤 떨림을 줄이고 스크롤 영역에 키보드 포커스와 이름을 붙였습니다.

  6. 성능

    LCP를 늦추던 1.68MB 팝업 이미지를 찾아 업로드할 때 webp로 압축하는 단계를 넣었습니다. 51MB 히어로 영상은 523KB 프리뷰를 먼저 띄우고 2.1MB 루프로 나중에 바꿔 끼웠습니다. 모바일 FCP 2.4초 → 1.2초 (자체 측정).

  7. 다시 한다면

    헤더 nav 개수가 병원마다 다른데 nav가 로고나 액션 버튼과 겹치기 직전에 헤더 스스로 접히는 공통 컴포넌트로 만들지 못했습니다. 다시 한다면 헤더를 콘텐츠 폭 기준으로 전환하는 컴포넌트로 먼저 설계하겠습니다.

    fluid 유틸을 빌더와 병원 앱에 같은 식으로 복사해 두었습니다. 다시 한다면 처음부터 공유 패키지에 넣어 20개 앱이 같은 유틸을 쓰게 하겠습니다.

    메인 안 이동은 부드럽게 다른 페이지에서는 즉시 이동하는 스크롤 규칙이나 '준비중' 메뉴 처리 같은 공통 UX 정책도 그때그때 추가했습니다. 정책을 먼저 목록으로 만들고 공통 패키지에 넣었어야 했습니다.