AI와 홈페이지를 작업하면서 비슷한 피드백을 여러 번 했다. 너무 텍스트만 나열돼 있다거나, 요소가 화면 가장자리에 몰려 있다거나, 모바일에서는 중요한 그림이 안 보인다는 내용이었다.
처음 화면을 받았을 때는 많은 것이 갖춰져 보여도, 실제로 읽고 눌러보면 손볼 부분이 남았다. 이번에는 작업하면서 자주 짚었던 것을 모아봤다.
박스가 많다고 정리가 되는 것은 아니었다
여러 내용을 카드로 나누면 일단 구분은 된다. 하지만 모든 섹션이 같은 크기의 박스로 이어지면 무엇을 먼저 봐야 할지 흐려졌다. 설명의 중요도가 다른데 화면에서는 비슷한 무게로 보이기 때문이다.
회사 홈페이지에서는 텍스트 나열처럼 보이는 구간을 다시 다듬었다. 리뉴얼 전후 화면이나 콘텐츠가 만들어지는 과정처럼, 설명만 읽는 것보다 구체적인 예시가 필요한 부분도 있었다.
모든 내용을 짧게 쪼개는 것도 답은 아니었다. 한 문장으로 읽히는 게 자연스러운 내용을 여러 줄로 나누면 오히려 흐름이 끊겼다. 문구를 줄이는 일과 화면에서 문장을 나누는 일은 따로 판단해야 했다.
이미지가 있어도 제대로 보이지 않을 때
이미지를 넣었다는 사실만으로 비주얼이 해결되지는 않았다. 화면 사이드에 놓인 그림이 모바일에서는 보이지 않는 문제가 있었고, 섹션의 내용을 설명하기보다 빈 곳을 채우는 것처럼 느껴지는 경우도 있었다.
이미지를 교체할지 고민하다가 현재 이미지 자체는 괜찮다고 본 경우도 있었다. 문제는 모션을 적용했을 때 화면이 깨지는 쪽이었다. 이때는 이미지를 다시 만드는 것보다 움직임과 배치를 먼저 봐야 했다.
그래서 이미지가 마음에 들지 않을 때도 소재, 크기, 위치, 동작 중 무엇이 문제인지 나눠서 보게 됐다. 전부 바꾸면 오히려 괜찮았던 부분까지 잃을 수 있었다.
섹션의 경계와 여백도 다시 봤다
서로 다른 내용인데 배경색이 비슷해서 한 섹션처럼 보이는 곳이 있었다. 반대로 강조 요소가 너무 많으면 어디서 쉬어 읽어야 할지 애매했다.
배경색과 여백은 장식이 아니라 내용을 묶고 나누는 데 쓰였다. 제목과 본문 사이, 섹션과 섹션 사이의 간격이 모두 비슷하면 정보의 단계도 흐려졌다.
이런 차이는 코드가 정상인지 확인하는 과정에서는 잡히지 않는다. 실제 화면을 보고 스크롤하면서 판단해야 했다. 그래서 수정 요청에도 어느 구간에서 어떻게 읽히는지를 같이 설명하려고 했다.
수정한 곳 외에도 확인할 것이 있었다
새 수정본을 받으면 요청한 부분부터 보게 된다. 그런데 그곳이 바뀌는 동안 다른 기능이 빠지거나, 모바일의 배치가 달라질 수도 있었다. 이전 작업에서는 스크립트를 되돌리거나 다시 복원하는 과정도 있었다.
다음 검수에서는 우선 요청한 변경이 반영됐는지 보고, 그 주변과 공통 영역을 함께 확인하려고 한다. 특히 메뉴와 문의 버튼, 모바일 첫 화면처럼 자주 사용하는 부분은 다시 눌러보는 편이 낫겠다.
결국 내가 확인하는 것은 방문자가 보는 화면
AI가 어떤 방식으로 코드를 만들었는지도 중요하지만, 마지막에는 방문자가 읽고 사용할 수 있는지가 남았다. 필요한 내용이 잘 보이는지, 눌러야 할 곳이 분명한지, 다음으로 자연스럽게 넘어갈 수 있는지를 보는 것이다.
AI를 쓴다고 디자이너가 할 일이 없어지지는 않았다. 내 경우에는 빠르게 만들어진 결과물에서 어색한 부분을 찾고, 수정 방향을 정하는 일이 많아졌다. 그 판단을 덜 반복하려면 다음 작업에서는 처음 요청할 때부터 기준을 더 구체적으로 전달해야겠다.