로고를 키웠는데도 여전히 작다는 지적을 받았다. 어떤 로고는 흰 사각 배경이 남아 있었고, 어떤 것은 검게 바꾸니 이상해졌다는 답도 돌아왔다. 크기와 배경과 색을 한꺼번에 고치면 각각의 문제가 섞인다. 내가 확인해야 할 것은 이미지 파일 전체의 너비뿐 아니라 실제 문양이 차지한 영역이었다.
작업 기록의 크기 계산 코드는 투명 이미지의 알파 영역을 읽고, 경우에 따라 단색 배경과의 차이를 이용해 문양 범위를 찾는다. 원본 로고를 다시 그리는 대신 표시용 기하 정보를 남기는 방식이다. 그렇다고 모든 로고의 실제 문양을 완벽하게 찾아낸 자동 검수라고 설명할 수는 없다. 파일마다 적용 가능한 조건이 있었다.
이미지 상자와 보이는 문양을 구별한다
너비가 같은 두 파일이라도 하나는 가장자리까지 문양이 있고 다른 하나는 넓은 빈 공간 가운데 작은 글자가 있을 수 있다. CSS가 파일 상자 전체를 같은 크기로 맞추면 화면의 브랜드 크기는 달라진다. 파일 용량이나 픽셀 수만 늘리는 일도 이 관계를 바꾸지 않는다. 실제 문양이 차지하는 비율을 먼저 알아야 한다.
크기 계산 소스는 캔버스와 문양 영역의 비율, 위치 이동 값을 따로 기록해 표시용 CSS를 만든다. 화면에서 빈 공간을 제외해 맞추되 원본 파일을 수정하지 않는 방향이다. 나는 원본 자산과 표시 조건을 나누어 보존하는 이 경계를 중요하게 읽었다. 나중에 다른 화면에서 원본 전체가 필요할 수도 있기 때문이다.
투명 배경과 단색 배경은 같은 검사가 아니다
투명 이미지에서는 알파가 있는 영역을 문양의 단서로 삼을 수 있다. 소스는 불투명한 이미지라면 모서리 색이 서로 비슷한지를 먼저 보고, 그 배경과 다른 부분의 범위를 찾는다. 이는 적용 조건이 있는 추정이다. 배경이 복잡하거나 문양 색이 배경과 가까우면 필요한 부분을 놓칠 수 있다.
흰 상자가 눈에 띈다는 요청도 모든 흰색을 지우라는 지시가 아니다. 로고 자체의 흰 글자나 심볼이 있을 수 있다. 내가 제거할 것은 불필요한 주변 바탕인지, 보존할 브랜드 요소인지 먼저 구별해야 한다. 배경 제거와 크기 측정을 같은 자동 결과로 처리하지 않고 원본과 표시를 비교한다.
SVG는 파일의 표시 범위와 글꼴 조건도 확인한다
당시 계산기는 일부 글자 중심 SVG에 대해 글꼴 치수를 읽지만, 벡터 경로가 있거나 다른 구조라면 전체 viewBox를 범위로 쓰는 갈래도 있다. 모든 경로의 실제 윤곽을 계산하는 코드가 아니다. 외부 글꼴이나 변환이 달라지면 글자의 보이는 범위도 달라질 수 있다. 자동 측정이라는 이름보다 어떤 방법을 썼는지가 중요하다.
나는 측정 방법과 남은 확인을 같이 기록하는 편이 좋다고 본다. 큰 viewBox 속 작은 문양이라면 전체 범위를 쓰는 결과는 여전히 작게 보일 수 있다. 이런 경우에는 원본의 표시 구조와 실제 렌더링을 더 살펴야 한다. 한 가지 파일에서 나온 성공을 모든 SVG와 모든 브랜드에 확대하지 않는다.
크기를 고치면서 원래 색을 잃지 않는다
사용자는 로고가 검게 바뀌니 이상하다고 지적하고 기존 색을 유지하자고 정했다. 최종 공통 CSS에도 로고 이미지의 필터를 없애는 규칙이 남아 있다. 크기를 맞추기 위해 색까지 바꿀 필요는 없다. 밝거나 어두운 배경에서 읽히는지는 원래 로고와 주변 배경의 관계로 다시 살핀다.
헤더에는 메뉴와 연락 요소도 함께 있으므로 로고만 최대한 키우면 다른 조작부가 밀릴 수 있다. PC에서의 제한 너비와 높이, 작은 화면에서 남길 공간을 함께 정한다. 세로형과 가로형의 비율도 다르다. 이 글은 당시 고객 전화 설정을 공유하는 것이 아니라, 문양과 주변 UI가 차지하는 자리를 설명하는 제작기다.
커졌다는 결과는 실제 화면에서 마무리한다
이번에는 크기 계산 코드 전체와 공통 CSS의 관련 규칙, 반복된 사용자 지적을 읽었다. 원래 로고 픽셀이 포함되지 않은 자료 묶음에서 모든 로고의 투명화와 실제 크기 검수를 새로 했다고 쓰지 않는다. 계산된 범위와 실제 브랜드가 읽히는 크기는 연결되어 있지만 같은 증거는 아니다.
적용할 때는 로고 문양을 보면서 화면 폭을 바꾸고 메뉴와의 간격을 확인한다. 색을 보존했는지, 작은 화면에서 잘리지 않는지, 원본의 필요한 가장자리를 잃지 않았는지도 함께 본다. 홈페이지를 맡기는 사람은 로고 파일은 큰데 화면에서 작다는 문제를 말할 수 있다. 제작자는 파일 상자의 숫자보다 눈에 보이는 문양을 기준으로 답해야 한다.