현재 사용법 (2026-09-10, 6fbaee7f): 공개 랜딩·데모·상담 신청 · 기능 마스터. 아래는 작성 당시의 변경 설명이며 현재 전체 동작·재측정 결과를 뜻하지 않습니다.

랜딩 푸터 — 사용 가이드·패밀리 사이트 진입점 추가

한 줄 요약

랜딩 페이지 맨 아래 푸터에 hereby 사이트로 가는 링크가 새로 생기고, 「사용 가이드」가 독립 항목으로 올라오며, hereby Works 앱 다운로드가 두 줄에서 한 줄로 줄어듭니다.

왜 세 가지가 한 변경에 묶이는가

세 변경의 근본 원인은 동일합니다. 링크가 「서비스 바로가기」라는 한 단에 세로로만 쌓이는 구조여서, 항목을 더할 자리가 없었습니다. 진입점을 하나 더하려면 단을 나누는 일이 먼저였습니다.

배경 / 지금 동작

이 앱(apps/landing)은 hereby Medical 서비스 소개 페이지입니다. hereby는 서비스 이름이 붙지 않는 마스터 브랜드이고, hereby Medical·hereby Sign·hereby Works가 그 아래의 패밀리 브랜드입니다. 지금까지 푸터에는 hereby Medical 자신의 문서와 hereby Works 앱으로 가는 길만 있었고, 마스터 브랜드 사이트(hereby.me)로 가는 길은 없었습니다.

푸터 마크업은 apps/landing/src/views/footer.html, 스타일은 apps/landing/src/styles/main.css의 「푸터 레이아웃」 구역에 있습니다. 바깥 격자 .footer-inner가 왼쪽에 정체성(BI 심볼·저작권·테마 토글), 오른쪽에 링크 묶음을 놓습니다. 그 오른쪽 링크 묶음이 .footer-cols이고, 이것이 2단 격자였습니다. 첫 단은 「약관·고지」, 둘째 단은 「서비스 바로가기」입니다.

둘째 단 하나에 네 줄이 세로로 쌓여 있었습니다. hereby 관리자(접속 안내), hereby Works(iOS), hereby Works(Android), 사용 가이드입니다. 여기에 마스터 사이트를 더하면 다섯 줄이 되고, 성격이 다른 링크가 한 제목 아래 섞입니다. 앱 스토어 링크 두 줄이 같은 이름을 두 번 반복하는 것도 자리를 그만큼 더 씁니다.

변경 전 / 변경 후

변경 전

변경 후

개념 흐름별 변경

링크를 3단으로 나눕니다

.footer-cols를 2단에서 3단으로 넓히고, 「사용 가이드」를 「서비스 바로가기」에서 떼어 자기 단으로 올렸습니다. 문서는 앱·관리자와 성격이 다르고, 링크 하나만으로도 제목을 가질 만한 항목입니다.

단 수를 정하는 방식이 바뀐 점을 함께 봅니다. 이전에는 .footer-cols의 CSS 규칙이 grid-template-columns: repeat(2, minmax(0, 1fr))로 단 수를 직접 잡았습니다. 지금은 그 선언을 규칙에서 지우고, 마크업의 Tailwind 유틸리티(grid-cols-1 md:grid-cols-3)가 잡습니다. 순서가 중요합니다. Tailwind v4의 유틸리티는 @layer utilities 안에 들어가고, 레이어 없는 CSS 규칙은 소스 순서와 무관하게 레이어보다 우선합니다. 따라서 .footer-cols에 grid-template-columns 선언을 남겨 둔 채 유틸리티를 붙였다면, 유틸리티는 조용히 무시되고 화면은 계속 2단으로 남았을 것입니다. 선언을 지우는 것이 이 변경의 필수 조건입니다.

한 단 안에서 성격이 다른 묶음을 가릅니다

「서비스 바로가기」 단은 이제 두 묶음을 담습니다. hereby Medical에 속한 것(관리자·앱)과 다른 도메인으로 나가는 것(마스터 사이트)입니다. 이를 위해 두 가지를 새로 만들었습니다. .footer-col__subhead는 단 제목 아래에 놓이는 한 단 작은 소제목이고, .footer-col__divider는 두 묶음 사이를 가르는 가로선입니다.

소제목을 쓰는 이유는 단을 하나 더 늘리지 않기 위해서입니다. 마스터 사이트 링크는 하나뿐이라 자기 단을 가질 만큼 무겁지 않지만, 관리자·앱과 같은 목록에 섞이면 같은 서비스의 일부로 읽힙니다.

앱 스토어 링크를 한 줄로 묶습니다

.footer-app-links를 새로 만들어 「hereby Works」라는 이름을 한 번만 쓰고, 그 뒤에 iOS와 Android 링크를 나란히 놓습니다. 이름은 링크가 아닌 일반 텍스트이고, 실제로 눌리는 것은 두 스토어 링크입니다. 두 링크에는 각각 aria-label을 붙여 화면 낭독기에서 「iOS」/「Android」만 읽히지 않고 무엇의 다운로드인지 들리게 했습니다. 사이의 슬래시는 aria-hidden으로 낭독에서 제외합니다.

반응형 기준을 두 지점으로 나눕니다

바깥 좌우 분할(.footer-inner)은 1280(xl)에서, 링크 3단(md:grid-cols-3)은 768(md)에서 일어납니다. 3단이 되려면 링크 묶음이 가로로 넓어야 하는데, 좌우 분할 상태에서는 오른쪽 절반만 쓰므로 1280 미만에서는 폭이 모자랍니다. 그래서 좌우 분할을 늦추고, 그 아래 구간에서는 정체성 블록이 위·링크 3단이 아래로 놓이게 했습니다.

리뷰에서 나온 보정 세 가지

구분선의 색이 --color-neutral-700이었습니다. 푸터 바탕이 neutral-900이라 두 값의 명도 차이가 거의 없어 1px 선이 보이지 않았습니다. 다크 모드에서도 같은 결과입니다. 푸터처럼 원래부터 어두운 구역은 [data-theme="dark"] .bg-neutral-900 규칙이 뉴트럴 값을 라이트 원본으로 되돌리기 때문에, 테마를 바꿔도 같은 두 색이 마주칩니다. 푸터 상단 구분선이 쓰는 --color-neutral-500보다 한 단 약한 --color-neutral-600으로 올렸습니다.

좌우 분할 미디어쿼리를 @media (width >= 80rem)으로 썼습니다. 기준값은 1280으로 맞지만, 이 범위 문법은 Safari 16.4 미만에서 유효하지 않아 쿼리 전체가 무시됩니다. 구형 iOS에서만 좌우 분할이 통째로 빠집니다. 같은 파일의 다른 미디어쿼리 세 개와 같은 @media (min-width: 1280px) 표기로 되돌렸습니다. 기준값이 같으므로 최신 브라우저의 동작은 변하지 않습니다.

.footer-app-links에 flex-wrap: wrap을 더했습니다. 이 줄은 white-space: nowrap이라 글자 단위로 쪼개지지 않는데, 768에서 3단이 되면 한 단의 폭이 약 208px이고 줄 내용이 약 190px이라 여유가 크지 않습니다. flex-wrap이 있으면 자리가 모자랄 때 글자가 잘리거나 넘치는 대신 조각째 다음 줄로 내려갑니다. 평소 폭에서 보이는 모습은 같습니다.