현재 사용법 (2026-09-10, 6fbaee7f): 공통 화면·디자인 시스템 · 기능 마스터. 아래는 작성 당시의 변경 설명이며 현재 전체 동작·재측정 결과를 뜻하지 않습니다.

LNB 브랜드 자리 재배치와 로고 삭제 미반영 수정

병원 로고를 등록한 조직은 관리자 화면 왼쪽 위 로고 자리에 자기 병원 로고가 뜨고, hereby 로고는 사이드바 맨 아래로 내려갑니다. 그리고 로고를 지우고 저장하면 실제로 지워집니다 — 지금까지는 지워지지 않고 그대로 남아 있었습니다.

브랜드 자리를 옮기는 한 갈래가 나머지를 끌고 왔습니다. 로고를 심볼 자리에 넣으니 hereby 가 갈 곳이 필요했고, 그 자리에 브랜드 자산을 놓으려니 디자인 시스템의 최소 높이 규칙에 걸렸습니다. 로고 삭제 버그는 이 화면을 실측으로 검증하다 드러났습니다.

배경 — 이 화면이 무엇이고 지금 어떻게 동작했습니까

관리자 앱(admin, 개발 포트 4001)의 왼쪽 세로 메뉴를 LNB(Left Navigation Bar)라고 부릅니다. 펼쳤을 때 폭이 208px, 접으면 68px 아이콘 레일이 됩니다. 그 맨 위 영역이 브랜드 영역(.ws-brand)이고, 여기에 hereby Medical 심볼 하나와 「hereby Medical / 조직명」 두 줄 텍스트가 들어갑니다.

락업(lockup) 은 심볼과 글자를 한 덩어리로 그린 브랜드 자산을 가리킵니다. 비율이 865×130 으로 고정이라 높이를 정하면 폭이 따라옵니다. 심볼만 쓰는 구성과는 별개의 자산입니다.

2026-08-04(609eb73f)에 조직 설정에 「병원 로고」 업로드 필드가 생기면서, 브랜드 영역이 hereby 심볼과 병원 로고를 × 로 나란히 잇는 방식이 됐습니다. 이 표기를 코브랜딩이라고 부릅니다.

문제는 폭입니다. .ws-brand 안쪽에 쓸 수 있는 폭은 136px 인데, 심볼 24 + 간격 8 + 코브랜딩 블록 약 75를 빼면 텍스트에 29px 만 남습니다. 그래서 로고를 등록한 조직에서만 브랜드 텍스트가 「hereby Me…」 / 「히얼바이 …」로 잘렸습니다.

변경 전	변경 후

브랜드 자리 — 변경 전과 변경 후

변경 전

변경 후

로고 삭제 — 변경 전과 변경 후

변경 전

변경 후

개념별 변경

심볼 자리를 병원 로고에 내줍니다

dashboard.html 의 .ws-brand 에서 코브랜딩 블록과 × 구분자를 걷어내고, 로고를 등록한 조직은 심볼 자리 자체를 병원 로고가 차지하도록 했습니다. 크기는 hereby 심볼과 같은 24px 정사각이라 헤더 높이와 텍스트 시작점이 흔들리지 않습니다. 업로드본은 비율이 제각각이므로 object-fit: contain 으로 맞추고 잘라내지 않습니다(.ws-brand__org-logo). 로고가 없는 조직은 종전대로 패밀리 심볼이 나옵니다.

hereby 를 LNB 하단으로 옮깁니다

심볼 자리를 로고가 가져가면 화면에서 hereby 가 사라집니다. 그래서 LNB 맨 아래에 브랜드 마크(.ds-lnb__brandmark)를 두었습니다. 영문 outline 락업을 높이 18px · 불투명도 30% · 가운데 정렬로 깔고, 장식이므로 aria-hidden 과 pointer-events: none 으로 클릭·포커스 대상에서 제외했습니다.

outline 은 그라디언트 없이 워드마크와 같은 한 색으로 그리는 심볼 케이스입니다. 색이 배경에서 갈리므로 자산 이름에 배경이 붙습니다 — 이번에 등록한 것은 다크 배경용 흰색본 두 개(logo-lockup-hereby-medical-outline-on-dark, logo-hereby-medical-outline-on-dark)이고, 브랜드 데모의 정본 좌표에서 그대로 파생했습니다.

접힘 레일은 안쪽 폭이 44px 뿐이라 락업이 들어가지 않습니다. 이때는 마크업이 같은 outline 심볼로 바꿔 끼웁니다.

메뉴가 세로로 다 들어가지 않는 화면에서는 마크를 숨겨 메뉴에 자리를 돌려줍니다. 판정은 반드시 마크가 보이는 레이아웃에서 재고 나서 합니다. 숨긴 상태로 재면 scrollHeight 가 clientHeight 로 잘려 「다시 보여도 된다」는 조건이 성립하지 않고, 한 번 숨은 마크가 돌아오지 않습니다. 같은 이유로 레이아웃이 잡히기 전(clientHeight === 0)에는 판단을 미룹니다.

로고 등록 · 펼침	접힘 레일	로고 미등록

락업 최소 높이 규칙을 24px 에서 16px 로 내립니다

브랜드 규칙은 락업을 높이 24px 아래로 쓰지 않도록 정하고 있었고, 그보다 작아야 하면 워드마크를 떼고 심볼만 쓰도록 했습니다. 하단 마크를 18px 로 쓰려면 이 규칙에 걸립니다.

심볼만 쓰는 선택지를 먼저 검토했으나 채택하지 않았습니다. 그렇게 하면 하단에서 hereby 워드마크가 사라져, 심볼 자리를 병원 로고에 내준 화면에 브랜드 글자가 한 곳도 남지 않습니다. 이 자리를 만든 이유가 없어집니다.

그래서 규칙의 경계선 자체를 내렸습니다. 「그보다 작으면 심볼만」이라는 판단은 그대로이고 숫자만 바뀝니다. 같은 수치가 흩어져 있던 7곳을 한 번에 맞췄고, 라이브 데모의 MIN_H 도 16으로 내렸습니다. 데모의 높이 슬라이더 하한이 마침 16이라 그대로 두면 「최소 크기 미만」 경고를 한 번도 볼 수 없게 되므로, 슬라이더를 10까지 열었습니다.

부수 효과가 하나 있습니다. LNB 헤더에 락업을 쓰지 못하던 근거가 「최소 높이 규칙 위반」이었는데(132px 폭에 넣으면 높이가 19.8px 로 떨어집니다), 하한이 16px 이 되면서 규칙상으로는 가능해졌습니다. 화면은 종전대로 심볼과 텍스트를 유지하되, 이제 규칙 문제가 아니라 디자인 판단이라는 점을 문서에 적었습니다.

로고·직인 삭제가 저장되지 않던 것을 고칩니다

조직 설정에서 병원 로고나 직인을 지우고 저장해도 값이 그대로 남았습니다. 저장 루프가 빈 값을 undefined 로 바꾸는데, undefined 는 JSON 직렬화에서 키째 사라집니다. 서버 organization.update 는 Object.assign 으로 병합하므로 없는 키는 덮어쓰지 않습니다. 삭제가 서버에 전달되지 않았고, 오류도 나지 않았습니다.

모든 빈 값을 null 로 보내는 단순한 수정은 채택할 수 없습니다. 그러면 사용자가 손대지 않은 빈 필드까지 지워지고, name 처럼 null 을 받지 않는 필드는 저장 전체가 거부됩니다. 그래서 지울 수 있는 두 필드(logo, sealImage)만 null 로 보내고 나머지 빈 값은 종전대로 「안 건드림」으로 둡니다. updateOrganizationSchema 도 그 두 필드에 한해 null 을 받도록 넓혔습니다. 두 컬럼 모두 nullable 이라 데이터베이스는 그대로 받습니다.

이 규칙은 조용히 깨지므로 회귀 테스트로 고정했습니다(app-org-settings.test.ts, 5건). 네트워크 경계만 대체하고 페이로드를 만드는 로직은 실제 컴포넌트를 그대로 태웁니다. 수정 전 코드로 되돌려 5건 중 3건이 실패하는 것을 확인했습니다.

조직 정보를 앱 부팅 시 불러옵니다

브랜드 영역은 조직 정보(orgInfo)의 로고를 읽는데, 이 값을 설정 탭 로더에서만 불러왔습니다. 그래서 설정을 한 번도 열지 않은 화면에서는 로고가 등록돼 있어도 나오지 않았습니다. 코브랜딩 시절부터 있던 문제입니다. 부팅 시 한 번 불러오도록 했고, 실패해도 hereby 심볼로 물러나므로 대시보드를 막지 않습니다.

로그인 첫 진입 데이터 로드를 인증 이후로 미룹니다

앞의 갈래와 별개입니다. Alpine 은 컴포넌트를 만들 때 init() 을 자동으로 호출하는데, 이것이 로그인 화면에서도 실행됩니다. 기존 코드는 스토어 부팅 완료만 기다렸으므로 토큰 없이 데이터를 요청해 401 로 끝났고, 로그인 후 다시 호출하는 경로가 없어 화면이 「데이터 없음」 상태로 유지됐습니다. 공용 헬퍼 whenAuthenticated 로 인증까지 기다리게 하고, init() 이 두 번 호출되는 것은 booted 가드로 막았습니다. 총무·재고·경영 대시보드·팀 관리 네 앱에 적용했습니다.

.env 백업 파일을 ignore 대상에 넣습니다

작업 중 .env.bak.20260825 가 ignore 대상이 아닌 것을 확인했습니다. .env 규칙은 이 이름을 잡지 못하고, 해당 파일에는 시크릿 계열 변수가 9개 들어 있습니다. git add -A 한 번으로 커밋될 수 있는 상태였습니다. .env.bak* 계열과 개발 스택 로그(.dev.log)를 .gitignore 에 추가했습니다.

검증

개발 환경(admin 4001)에서 Playwright 로 실측했습니다. 로고 등록 후 새로고침하면 심볼 자리가 24×24 병원 로고로 바뀌고, 삭제 후 새로고침하면 hereby 심볼로 돌아옵니다. 하단 마크는 펼침에서 락업 159.7×18, 접힘 레일에서 심볼 18×18 이며 좌우 여백이 같습니다. 브랜드 마크 좌표의 클릭 대상은 마크가 아니라 aside 입니다.

반응형은 375(모바일 드로어) · 768(레일) · 1280(펼침) 세 폭에서 확인했습니다. 세 폭 모두 병원 로고가 24px 로 들어가고 가로 스크롤이 발생하지 않습니다.

위 「변경 전」 화면은 합성이 아니라 develop 의 마크업을 잠시 되돌려 실제로 렌더한 것입니다.