밝은 홈페이지와 어두운 홈페이지 중 무엇이 더 좋은지 하나로 고르기는 어렵다. 나는 서비스 소개 작업을 다시 보며 같은 페이지 안에서도 구간의 역할과 읽을 양에 따라 서로 다른 배경을 사용할 수 있다는 기준을 정리했다. 색상을 고르는 일은 브랜드 분위기를 만드는 일과 내용을 읽게 하는 일을 함께 다룬다.
확인한 작업 지침에는 큰 이미지형 첫 화면, 어두운 서비스 구간, 밝은 사례와 콘텐츠 구간, 어두운 문의 구간의 리듬이 있었다. 실제 소스에도 밝고 어두운 기본 클래스와 문의 구간의 색상이 있다. 이 흐름은 그 프로젝트의 방향이며 내가 모든 홈페이지에서 밝은 색이나 어두운 색 하나만 선호한다는 뜻은 아니다.
배경을 바꾸기 전에 구간의 질문을 적는다
어떤 일을 하는지 소개하는 구간과 여러 자료를 비교하는 구간은 읽는 목적이 다르다. 나는 먼저 이 영역에서 무엇을 이해해야 하는지, 어떤 내용이 함께 비교되어야 하는지 적는다. 그 답이 있어야 색상 변화가 정보의 구분인지 단순한 장식인지 판단할 수 있다.
서비스 소개 소스에는 업무 과정과 서비스 범위, 매체 설명, 사례 성격의 콘텐츠, 칼럼, 문의가 서로 다른 구간에 있다. 밝고 어두운 흐름을 만들더라도 같은 내용을 다시 늘어놓지 않는다. 배경 변화는 새로운 판단 구간의 시작을 알리는 데 쓸 수 있고, 그 구간 안에서는 내용의 관계를 유지해야 한다.
긴 자료를 읽는 구간은 본문의 조건을 따로 본다
큰 제목이 잘 보인다고 작은 설명도 잘 읽히는 것은 아니다. 긴 문장과 표, 카드의 부가 설명은 글자 크기와 줄 간격, 실제 배경 위의 대비를 따로 확인해야 한다. 특히 옅은 회색과 반투명 흰색은 같은 이름으로 적혀 있어도 배경에 따라 결과가 달라진다.
현재 서비스 CSS의 밝은 기본 구간은 흰 배경과 어두운 글자이고 어두운 기본 구간은 어두운 배경과 흰 글자다. 그 아래 설명에는 다른 색이나 투명도를 쓰는 규칙도 있다. 따라서 기본 조합 하나를 계산했다고 모든 하위 문장과 버튼을 검수한 것으로 처리할 수 없다. 실제 읽을 항목의 조건을 확인한다.
사진 위의 글자는 사진이 바뀌어도 확인한다
첫 화면의 사진 위에 글자를 놓으면 사진의 밝은 부분과 어두운 부분이 글자 뒤로 들어온다. 사진을 교체할 때 같은 흰 글자를 유지해도 읽는 조건이 달라질 수 있다. 서비스 소스에는 첫 화면 이미지와 별도의 음영 레이어가 있다. 이런 레이어는 구성 요소이며 효과를 적용했다고 모든 사진에서 읽힌다는 보장은 아니다.
나는 배경 이미지가 들어가는 구간을 단색 배경과 구별해 검토한다. 실제 크롭과 제목 위치, 모바일에서 잘린 부분, 음영의 범위까지 확인할 필요가 있다. 중요한 제목과 행동 연결은 특정 사진의 우연한 어두운 자리 하나에만 기대지 않도록 설계한다. 새 이미지의 실화면 검토를 수행하지 않았다면 그 상태도 남긴다.
문의 구간은 대비와 행동을 함께 정리한다
페이지 끝의 문의 구간은 앞선 설명을 읽고 다음 일을 정하는 곳이다. 확인한 서비스 소스에는 어두운 배경과 밝은 제목, 별도의 문의 영역이 있다. 그 시각적 구분을 문의가 더 많이 왔다는 결과로 바로 연결하지 않는다. 독자가 연락 방법과 요청할 내용을 찾을 수 있게 하려는 구성으로 설명한다.
이번 홈페이지의 연락은 이메일 작성 링크다. 배경이 달라도 링크의 이름과 실제 하는 일이 맞아야 하고, 키보드 초점과 눌리는 상태도 확인해야 한다. 색상은 행동을 강조할 수 있지만 접수나 전달 기능을 만들어주지는 않는다. 배경과 버튼의 대비, 실제 연결, 처리 상태를 각각 확인한다.
기본 색 두 조합을 계산한 범위
이번에는 현재 CSS의 단색 기본 조합 두 개를 읽어 상대 밝기의 대비를 계산했다. 어두운 기본 배경과 흰 기본 글자, 밝은 기본 배경과 어두운 기본 글자를 대상으로 했다. 계산 함수는 검정과 흰색의 대비, 같은 색의 대비도 확인했다. 원본 서비스 프로젝트의 색상을 변경하지 않았다.
이 계산은 정확히 선택한 두 불투명 조합의 숫자다. 반투명 설명, 사진 위 글자, 하위 색상 덮어쓰기, 초점과 호버 상태는 포함하지 않는다. 큰 제목과 보통 본문은 검토할 조건도 다르다. 숫자를 확인한 뒤 실제 요소의 색과 배경, 크기를 연결해야 하며 두 조합의 결과를 사이트 전체의 접근성 통과로 넓히지 않는다.
한 프로젝트의 방향을 모든 취향으로 확대하지 않는다
이번 글은 관련 지침과 현재 섹션·CSS 소스, 기본 조합의 계산을 바탕으로 작성했다. 기존 작업의 시각적 참고는 원래 출처의 구성으로 구별하며 그 업체의 실적이나 자산을 내 제작 성과로 옮기지 않는다. 방문자의 이해도와 문의 증가를 측정한 결과도 없다.
내가 다음 홈페이지에 남길 기준은 하나의 색상 취향보다 내용의 역할과 읽는 조건이다. 먼저 설명과 비교, 사용과 문의의 목적을 정하고 실제 자료 위에서 검토한다. 새 PC·모바일 화면은 이번에 열어 확인하지 않았으므로 코드와 계산의 범위를 넘는 검수 완료로 보고하지 않는다.