작업 기간: 2026.07.24–08.03
2026년 7월 말부터 8월 초까지 회사 팀 사이트의 공개 페이지를 하나씩 손봤어요. 화면마다 따로 고치다 보면 페이지를 옮길 때마다 읽는 법이 달라질 수 있어서, 사이트 안에 이미 있던 읽기 순서를 기준으로 삼았어요. 그 기준이 가장 분명해진 순간은 처음 제안한 새 갤러리 화면이 채택되지 않았을 때였어요.
DS는 회사 팀 사이트로, 외부 소개 화면과 구성원 작업 공간, 관리 화면이 함께 있어요. Root는 DS에서 외부 방문자에게 공개하는 영역이에요. Notes는 Root 안에서 작업 기록을 보여주는 글 공간이고, Labs는 회사의 실험 작업을 소개하는 별도 사이트예요. Root에는 Notes 말고도 컴포넌트 예시를 보여주는 Components와 이미지 자료를 모은 Images가 있는데, 같은 사이트 안에서도 페이지마다 처음 보이는 것이 제각각이었어요.
공개 화면과 내부 작업의 경계부터 정했어요
Root를 외부에 보여주는 화면으로 다듬기 시작하자, 새 첫인상을 만드는 일이 기존 작업 공간까지 바꾸는 요청으로 넓어질 수 있었어요. 그래서 상단 메뉴 구조는 그대로 두고 공개 메뉴와 콘텐츠의 역할부터 바꾸기로 했고, Root는 공개 기준과 자료를 읽는 곳, Labs는 실험의 맥락을 보여주는 별도 연결로 나눴어요. 준비되지 않은 이미지나 연결은 임의로 채우지 않고, 있는 표식과 텍스트로 시작했어요.
Images는 원래 자산 관리 기능에 가까워서, 이미지를 보러 온 방문자가 권한과 업로드 상태 설명부터 읽어야 했어요. 공개 화면을 따로 복제하면 같은 이미지를 두 곳에서 맞춰야 하니, 기존 자료를 읽는 기능과 서버의 공개 범위 판단은 그대로 두고 진입 경로와 표시 순서, 빈 목록의 안내 문구만 바꿨어요. 예전 작업 공간 주소로 들어와도 새 입구로 이어지게 했고요.
Components 페이지에는 원칙을 설명하는 문장만 있어서, 방문자가 설명과 실제 모습을 스스로 이어 붙여야 했어요. 큰 카탈로그를 채우는 대신 실제 공개 화면에서 쓰는 링크와 안내 같은 소수 요소를 카탈로그와 문서에서 똑같이 쓰고, 예시 링크가 실제 문서로 이어지는지 눌러 보며 확인했어요.
새로 제안한 갤러리 시안은 채택되지 않았어요
Images는 검색과 필터, 상세 보기, 내려받기까지 갖췄지만 다른 공개 페이지 옆에 두면 혼자 과거의 관리 콘솔처럼 보였어요. 처음에는 큰 제목과 다른 바탕색, 새 카드 구성을 붙인 공개 아카이브를 제안했는데, Notes와 Components에 이미 공개 콘텐츠를 읽는 방식이 있다는 피드백을 받았어요. 처음 제안한 새 화면이 채택되지 않았다는 점이 이번 작업의 핵심이에요.
그래서 출발점을 기존 공개 페이지로 돌렸어요. Notes에서는 이미지와 제목을 읽는 순서를, Components에서는 탐색과 상태를 보여주는 방식을 가져와 갤러리에서도 이미지와 날짜, 종류, 제목이 먼저 보이게 했어요. 업로드와 검색, 권한 판단, 내려받기는 기존 흐름을 그대로 썼어요. 방문자가 페이지를 옮길 때마다 읽는 법을 새로 배우지 않게 하는 것이 기준이었어요.
홈과 상단은 보는 순간에 맞춰 역할을 나눴어요
Root 홈의 상단 메뉴는 처음부터 끝까지 같은 틀이었어요. 이를 첫 장면 위에 놓이는 상태와 내용을 읽을 때 떠 있는 상태로 나누고, 전환 기준은 스크롤한 거리 대신 첫 장면이 아직 보이는지에 맞췄어요. 익숙한 메뉴가 안정적으로 남아야 하는 관리 화면에는 이 변화를 넣지 않았어요.
푸터에서는 왼쪽 문구의 시작 위치를 고치려다 정보 영역 전체의 최대 폭과 가운데 정렬까지 풀린 상태를 발견했어요. 링크를 읽는 영역의 정렬은 되돌리고, 큰 브랜드 표식이 놓이는 무대에는 다른 폭 기준을 쓰도록 나눴어요.
홈 본문에는 상단과 하단에 이미 있는 목적지가 카드로 한 번 더 나와서, 그 영역을 덜어내고 팀의 방향에서 소개와 작업 기준을 지나 Notes로 이어지게 했어요. 헤더의 작은 팀 표기와 겹쳐 읽히던 첫 장면의 설명은 큰 표식 위로 옮겼어요. 로그인 뒤 이름 첫 글자만 보이던 계정 표시는 이름과 팀·역할을 함께 읽는 요약으로 바꿨고, 앞에 붙인 원형 표식이 이름과 경쟁해서 후속 수정에서 덜어냈어요.
브라우저 탭의 작은 아이콘도 같은 정체성을 알려야 했어요. DS에서는 준비돼 있던 아이콘을 페이지가 실제로 읽도록 연결하고, Labs에서는 기존 표식을 새 정체성에 맞게 바꾼 뒤, 두 사이트 모두 운영에서 내려오는 이미지가 준비한 파일과 같은지 대조했어요. 이미 열린 탭에 남은 예전 표시는 교체 실패와 구분해 기록했어요.
확인한 범위는 수정마다 달랐어요. 헤더 전환과 푸터 정렬은 코드와 운영 화면의 구조까지 확인했지만, 실제 스크롤 장면의 농도와 간격, 큰 화면과 휴대폰에서의 최종 균형은 사람이 승인하지 않았어요. Images의 공개 목록은 확인 당시 비어 있어 이미지가 여러 건 쌓인 화면은 보지 못했고, 갤러리를 바꾼 뒤 방문자가 이미지를 더 쉽게 골랐는지는 측정하지 않았어요. 계정 표시는 여러 실제 계정의 긴 이름과 좁은 화면까지 확인하지 않았고, 홈 설명의 이동은 로컬 화면만 봤어요. Components는 소수 요소만 담았고 공개 패키지와 설치 안내는 제공하지 않았으며, 탭 아이콘이 다시 찾는 시간을 줄였는지도 조사하지 않았어요.