[내일 배움 캠프] 54일차

오늘은 단순히 화면을 예쁘게 만드는 데서 끝나지 않고, 레퍼런스를 분석한 뒤 그것을 실제 결과물로 옮기는 과정을 경험한 하루였다. 먼저 디자인 카타에서는 디자이너스 토픽 82의 키워드 랭킹 A/B 구조를 보면서, 같은 정보라도 어떤 방식으로 노출하느냐에 따라 사용자 경험이 달라질 수 있다는 점을 정리했다. A안은 상위 키워드를 더 강하게 강조하며 관심과 전환을 유도하는 방식이고, B안은 여러 키워드를 한 번에 훑어볼 수 있게 해 가독성과 비교에 강점이 있는 구조라고 이해했다.

이후에는 이 카타를 국내 서비스 관점에서도 바라보려고 했다. 단순히 “예쁜 UI”를 고르는 게 아니라, 실제 한국 앱에서는 어떤 식으로 인기 키워드나 탐색 요소를 보여주는지 떠올려보면서, 정보를 강조하는 방식과 사용자가 빠르게 훑어보는 방식 사이의 차이를 더 구체적으로 생각해볼 수 있었다. 이 과정에서 화면 구성은 결국 취향의 문제가 아니라, 무엇을 먼저 보게 하고 어디로 이어지게 할 것인가를 설계하는 문제라는 점을 다시 느꼈다.

오늘은 Framer로 스토브리그 소개 웹페이지를 직접 구현했다. 확인해보니 페이지에는 상단 내비게이션과 함께 소개, 등장인물, 스토리, 리뷰, 명장면 같은 섹션이 구성되어 있었고, 작품의 핵심 카피와 등장인물 소개, 줄거리, 감상 포인트, 명장면, 명대사, 그리고 외부로 연결되는 감상 버튼까지 포함되어 있었다. 단순 정보 나열이 아니라, 사용자가 위에서 아래로 읽어 내려가며 작품에 흥미를 느끼도록 흐름을 설계한 점이 인상적이었다.

오늘 작업에서 가장 의미 있었던 점은, 레퍼런스를 분석한 내용이 실제 제작으로 이어졌다는 것이다. 카타를 보며 정리했던 주목도, 정보 배열, 탐색 흐름에 대한 생각이 웹페이지를 만들 때도 그대로 연결됐다. 어떤 문장을 먼저 보여줄지, 어떤 장면을 강조할지, 각 섹션을 어떤 순서로 배치할지 고민하면서 화면은 결국 시각 요소만이 아니라 콘텐츠를 전달하는 구조라는 점을 더 분명히 배웠다. 특히 오늘 만든 페이지는 한 작품을 소개하는 사이트였기 때문에, 사용자가 단순히 정보를 읽는 것이 아니라 작품의 분위기와 매력을 따라가도록 만드는 서사적 구성이 중요하다는 것도 느꼈다.

결국 오늘은 레퍼런스를 해석하는 시선과 직접 구현하는 손을 함께 쓴 날이었다. 카타를 통해 화면 패턴의 장단점을 분석했고, 국내 사례를 떠올리며 실제 서비스 맥락을 연결했으며, 마지막에는 Framer로 하나의 완성된 웹페이지까지 만들었다. 오늘 작업을 통해 나는 좋은 화면은 단지 보기 좋은 화면이 아니라, 사용자가 무엇을 보고 어떤 감정을 느끼며 다음 행동으로 이어질지를 설계한 결과물이라는 점을 다시 배웠다.