Labs 홈: 실험실을 완성된 회사처럼 보이지 않게

첫 화면의 주어를 실험으로 바꿨어요

참고 사이트의 큰 제목과 밝은 바탕만 옮기면 비슷한 분위기는 금방 나와요. 하지만 그 자리를 우리에게 없는 성과나 자료로 채우면 첫 화면이 지킬 수 없는 말을 하게 돼요. 그래서 가져온 것은 콘텐츠를 읽는 순서였어요. 실험마다 이미지와 제목, 목적과 현재 상태를 묶고, 그 뒤로 관찰 장면과 작업 방식, 기록이 이어지게 했어요. 목적과 그림만 있는 카드는 완성된 서비스 소개처럼 읽히기 쉬워서, 무엇을 보고 있고 다음에 무엇을 확인할지를 카드 안에 넣었어요.

처음에는 참고 화면의 특징을 설명하는 문서가 있었는데, 실제 화면에서는 그 특징이 잘 드러나지 않는 부분이 있었어요. 속성만 옮기고 이미지와 정보의 관계를 놓친 거예요. 같은 크기의 화면을 나란히 놓고 다시 보면서, 설명 문장이 먼저 가득 나오던 배치를 이미지에서 아래 정보로 내려가는 구조로 바꿨어요. 큰 화면에서는 실험들을 나란히 비교하고, 휴대폰에서는 한 열로 내려 읽게 했어요.

과거 화면은 지우지 않고 남겼어요. 이전 회사 소개 페이지와 다른 서비스의 입구를 보존한 채 Labs를 별도 역할로 세웠고, 새 디자인을 다른 운영 화면까지 넓히지 않았어요. 현재 소개와 과거 기록은 다른 자리에 두되, 이전 기록에 담긴 당시의 판단과 흔적은 그대로 두었어요. 같은 날 이름과 로고, 상단과 하단의 작은 조작도 여러 차례 고쳤는데, 모두 홈페이지가 지금의 역할을 설명하도록 맞추는 한 흐름이었어요. 제목과 로고, 메뉴를 각각의 작업으로 떼어 보면 방문자가 이해할 이야기가 잘게 흩어져요. 준비한 시안과 기준 문서, 실제 화면과 배포는 단계를 나눠 남겼어요.

이미지마다 증명하는 범위를 정했어요

대표 이미지가 어색하다는 문제에서 시작했지만, 더 세련된 사진을 고르는 것으로는 풀리지 않았어요. 실제 서비스 화면은 무엇을 만들었는지 보여 주고, 사람이 협업하는 장면은 작업의 분위기를 전해요. 생성한 협업 장면이 실제 고객이나 현장 기록처럼 읽히면 페이지 전체가 다른 사실을 약속하게 돼요. 그래서 첫 장면에는 실제 서비스 화면을, 다른 영역에는 분위기를 전하는 장면을 두고 각 장면을 어떤 근거로 읽어야 하는지 구분했어요.

참고 사이트의 사진은 가져오지 않고, 이미지를 몇 장으로 나눠 글과 어떤 순서로 잇는지라는 구조만 참고했어요. 우리에게 있는 자료와 임시로 자리를 맡은 이미지를 나눠 두어 나중에 실제 자료로 바꿀 수 있게 했어요. 같은 화면도 위치에 따라 의미가 달라져서, 뒤쪽에서 예시로 읽히던 운영 화면이 맨 앞에 크게 놓이면 사이트의 대표 약속처럼 보일 수 있다는 점도 함께 따졌어요. 이미지 옆 문장도 같은 기준으로 맞춰, 생성한 장면 옆에는 실제 현장 경험처럼 읽히는 설명을 붙이지 않았어요.

글자와 배치도 장면의 의미를 지켜야 했어요

이미지 주변의 보조 이름과 큰 제목, 버튼 글자도 역할을 나눴어요. 모든 글자를 같은 방식으로 맞추면 상단의 작은 유틸리티까지 대표 장면처럼 강조되기 때문이에요. 언어를 바꿀 때는 글자 길이와 줄바꿈에 따라 이미지 옆에서 읽는 순서가 달라졌고, 작은 화면에서는 설명이 이미지에서 멀어지거나 다음 영역의 문장과 섞이지 않는지 살폈어요. 여백과 줄바꿈을 다듬은 것도 설명이 제자리를 지키게 하려는 일이었어요.

기록에는 데스크톱과 작은 화면의 배치, 실제 연결과 운영 반영, 로컬에서 여러 폭의 화면과 메뉴 이동을 확인한 과정이 남아 있어요. 다만 당시 일부 시각자료는 임시였고, 공개 주소의 접속 문제는 별도 후속 작업으로 남은 시점도 있었어요. 생성한 협업 장면은 실제 운영 성과의 증거가 될 수 없어서, 사용 허가된 현장 자료를 확보하면 교체하는 일을 후속으로 남겼어요. 방문자가 내용을 더 신뢰하게 됐는지는 실험하지 않았으므로 이 변화를 성과로 말할 근거는 없어요.