뱅카우 웹 리뉴얼 1탄: 반응형 디자인에서 배운 3가지 핵심 인사이트
안녕하세요, 뱅카우 프로덕트 디자이너 윤현우입니다.
2025년 1월 12일, 뱅카우 웹사이트 www.bankcow.co.kr이 새로운 모습으로 재탄생했습니다.
이번 웹 리뉴얼 프로젝트에서 디자인 팀은 다음 3가지 핵심 문제를 해결하는 데 집중했습니다.
- 중요한 공지사항을 쉽게 확인할 수 있도록 정보 전달 방식 개선
- 고객 문의가 더 빠르게 해결될 수 있도록 프로세스 최적화
- 한우 투자 결정을 돕는 콘텐츠의 신뢰도를 높일 수 있도록 새로운 장치 도입
뱅카우 디자인팀이 위 핵심 문제들을 해결하는 과정에서 시도한 다양한 디자인적 접근과 그 과정에서 얻은 인사이트를 공유하려 합니다. 이번 아티클에서는 그중 첫 번째 주제로 반응형 디자인에 대해 집중적으로 이야기해보겠습니다.
뱅카우 웹사이트 보러 가기
뱅카우 | 송아지 키우며 자산을 늘려요
국내 최초 한우 투자 뱅카우와 함께 송아지로 자산을 늘리는 투자를 경험해보세요.
www.bankcow.co.kr
#00 | 배경
뱅카우 웹 리뉴얼 프로젝트는 총 4가지 배경을 바탕으로 진행되었습니다.
1. 게스트 및 신규 사용자의 접근성 강화
기존에는 뱅카우에 대해 자세히 알아보려면 Android 또는 iOS 앱을 다운로드하고 회원가입해야 했습니다. 하지만 최근에는 앱을 설치하지 않고도 한우 투자 정보를 먼저 확인하고 싶어 하는 사용자들이 많아졌습니다. 그러나 리뉴얼 전 웹사이트는 제공하는 정보가 부족해, 결국 앱을 설치해야만 투자 과정을 제대로 파악할 수 있었습니다.
2. 비즈니스 확장성
뱅카우는 NH농협은행과 신한투자증권을 통해 뱅카우 회원의 예치금 및 투자금을 관리하고 있습니다. 이에 따라, 두 금융사의 서비스 및 MTS 시스템 내 배너와 임베디드 위젯을 활용하여 뱅카우를 더욱 효과적으로 알릴 수 있도록, 연동이 쉬운 웹 서비스 디자인이 필요했습니다.
3. 검색 엔진 최적화를 통한 유입 증대
현재 뱅카우는 네이버나 구글과 같은 포털 사이트에서 검색 엔진 최적화(SEO)가 충분히 이루어지지 않아, 관련 검색어에서 상위 노출이 어려운 상황이었습니다. 이에 따라 더 많은 고객에게 뱅카우를 효과적으로 알리기 위해 SEO 전략을 강화하고, 검색 노출을 개선하는 작업이 필요했습니다.
4. 배포 및 업데이트의 유연함
리뉴얼 전 뱅카우 웹사이트는 다양한 기능과 콘텐츠를 신속하게 반영하기 어려운 구조였습니다. 이에 업데이트나 배포 시 앱스토어 심사를 거칠 필요 없고, 정책의 제약 없이 유연하게 변경할 수 있는 웹의 장점을 살리기 위해서 리뉴얼을 진행하기로 결정했습니다.
이러한 4가지의 배경을 바탕으로 뱅카우는 기존의 웹을 새롭게 리뉴얼하는 프로젝트를 진행하였습니다.
#01 | 모바일 웹과 데스크톱 웹
최근에는 데스크톱 환경을 제외하고 모바일 환경에만 최적화된 웹 서비스를 제공하는 사례가 증가하고 있습니다. 모바일 중심의 웹만 운영하는 이유는 대표적으로 두 가지입니다.
첫째, 운영 리소스 증가 문제입니다. 운영 채널이 많아질수록, 새로운 기능을 추가할 때 필요한 리소스도 함께 증가합니다. 일반적으로 앱 서비스는 다양한 환경을 고려해 디자인해야 합니다.
- Android
- iOS
- 모바일
- 데스크톱
추가로 각 디바이스나 OS 환경에 맞춰 디자인을 최적화해야 하므로, 추가적인 개발 및 유지보수 리소스가 필요합니다.
둘째, 모바일은 언제 어디서나 접속할 수 있어, 대부분의 서비스에서 모바일 트래픽이 데스크톱 웹 트래픽을 넘어섭니다. 이에 따라 많은 서비스가 데스크톱 웹보다 모바일 웹에 집중하는 전략을 선택하고 있습니다.
그렇다면, 데스크톱 웹 서비스까지 제공하지 않는것이 최선일까요? 이는 제공하는 서비스의 방향성에 따라 달라진다고 생각합니다.
뱅카우의 경우, 사용자를 설득하는 과정이 매우 중요한 과제입니다. 특히, 사용자가 자신의 소중한 자산을 한우 투자 서비스에 투자하기로 결정하는 것은 쉽지 않은 일이며, 높은 신뢰 없이는 이루어지기 어렵습니다.
이를 위해 충분한 정보 제공이 필수적이며, 뱅카우는 아직 많은 사용자들에게 잘 알려지지 않은 서비스입니다. 방대한 정보를 효과적으로 전달하고 탐색하는 데 있어, 데스크톱 환경이 모바일보다 더 직관적이고 상세한 정보를 제공하는 데 유리하다고 판단했습니다.
위와 같은 배경과 이유로 모바일 웹부터 데스크톱 웹까지 지원하는 뱅카우 웹 리뉴얼 프로젝트를 진행하게 되었습니다. 그 과정에서 디자이너로서 제가 얻은 핵심 인사이트 세 가지를 이제부터 알아보도록 하겠습니다.
#02 | 첫 번째, 반응형 디자인은 ‘물’과 같다
물은 컵, 병, 바다 등 담는 그릇에 따라 모양이 달라지지만, 본질적으로 여전히 같은 물입니다. 반응형 디자인도 마찬가지입니다. 화면 크기나 디바이스에 따라 형태를 바뀌지만 사용자에게 제공해야 하는 디자인 경험은 일관되어야 합니다.
하나의 예시를 살펴보자면 위처럼 카드 형태의 2열 레이아웃을 만든 경우 반응형 디자인에서는 해당 디자인은 하나의 형태만 존재하지 않고 사이즈에 따라 일관된 디자인 경험을 제공하기 위해서 사용자의 환경에 따라 변형되어야 합니다.
위 이미지에서는 4개의 디자인이 존재하지만 사실상 2개의 레이아웃으로 구성되어 있습니다. 1번 2번 디자인은 2열 레이아웃으로, 가로가 길 때와 좁을 때의 형태를 보여주고 있으며, 3번 4번 디자인은 1열 레이아웃으로, 가로가 길 때와 좁을 때의 형태를 보여줍니다.
특정 사이즈에서 사용자에게 일관된 디자인 경험을 제공할 수 있다면, 모든 브레이크 포인트에서 레이아웃을 변경할 필요는 없습니다. 그러나 가로 폭이 너무 좁아져 이미지나 글이 넘치거나, 일관된 사용자 경험을 제공하지 못한다고 판단되면, 그에 맞는 레이아웃으로 변경하는 것이 필요합니다.
결론적으로, 디자이너는 하나의 기능을 다양한 사이즈에서 사용자에게 일관된 경험을 제공하는 목표로, 물처럼 사이즈에 따라 자연스럽게 변화하는 레이아웃을 이해하고, 각 브레이크 포인트에 맞춰 최적의 형태를 디자인하여 사용자에게 제공해야 합니다.
#03 | 두 번째, 반응형 디자인은 모든 사이즈에 대응할 수 있을까?
최적의 반응형 디자인은 다양한 화면 사이즈에서 사용자에게 일관된 디자인 경험을 제공해야 합니다. 그러나 최근 등장한 디바이스들, 예를 들어 삼성의 폴드처럼 가로가 320px 정도밖에 되지 않거나, 그보다 더 다양한 사이즈를 자랑하는 기기들이 많아졌습니다. 이로 인해 디자이너가 모든 화면 크기에 대응하려고 할 때, 특정 사이즈에서는 레이아웃을 완벽하게 구현하는 데 어려움이 있습니다.
뱅카우의 가축투자하기 페이지에는 '경매 TOP100'이라는 송아지 경매 정보를 보여주는 레이아웃이 있습니다. 이 부분은 정보가 많고 세로로 긴 형태여서, 가로가 매우 좁아질 경우 레이아웃이 크게 변형되는 문제가 발생했습니다.
이를 해결하기 위해, 해당 레이아웃에는 예외로 320px에서 브레이크포인트를 추가하여 콘텐츠를 간소화하고, 나머지 내용은 생략한 채 1개만 제공하도록 했습니다. 이렇게 함으로써 레이아웃 변형 문제를 해결했습니다.
실제로, 너무 작은 화면이나 매우 특수한 화면 비율을 가진 디바이스에서는 레이아웃이 지나치게 압축되거나, 중요한 정보가 잘리거나 겹쳐 보일 수 있습니다. 이런 상황에서는 디자인을 최적화하기 위해 레이아웃의 조정이나 일부 요소를 생략해야 하는 결정이 필요한 경우가 분명히 존재한다고 생각합니다.
#04 | 세 번째, 디자이너의 감각이 필요하다
반응형 디자인은 디자이너의 감각이 중요한 작업입니다. 웹사이트의 레이아웃은 수천, 수만 가지 형태로 변할 수 있으며, 그 가능성은 사실상 무한합니다. 그렇기 때문에 특정 사이즈에서 어떻게 레이아웃이 변하고 보일지에 대한 고민은 디자이너가 최적의 형태를 고려하여 디자인해야 하는 중요한 과제입니다.
이 과정이 중요한 이유는, 정보에 맞지 않는 반응형 레이아웃은 사용자 경험이 크게 저하될 수 있기 때문입니다. 정보가 효과적으로 전달되지 않으면 서비스 신뢰도에도 영향을 미칠 수 있습니다. 따라서 디자이너는 다양한 환경에서 최적의 경험을 제공할 수 있도록 신중한 판단과 조율이 필요합니다.
예를 들어, 뱅카우 서비스 소개 페이지의 최상단에는 기본 컨테이너 사이즈 960px보다 큰 1600px 크기의 16:9 영상이 배치되어 있습니다. 이는 텍스트보다는 시각적인 정보, 즉 영상과 이미지를 통해 사용자가 더 빠르게 정보를 습득할 수 있도록 디자이너가 의도한 설계입니다.
이처럼 반응형 디자인에서는 단순히 화면 크기에 맞춰 요소를 배치하는 것이 아니라, 다양한 해상도와 기기에서 최적의 사용자 경험을 제공하기 위해 디자이너의 감각적 판단이 필수적입니다. 작은 변화 하나가 사용자 경험에 큰 영향을 줄 수 있기 때문에, 디자이너는 각 화면에서 가장 효과적인 레이아웃을 고민하고 조율하는 능력이 중요합니다.
#05 | 회고
- 피그마로 모든 사이즈 확인하기
- 브레이크 포인트 레이아웃 규칙 만들기
- 사전에 레이아웃 상상해 보기
첫째, 피그마의 오토 레이아웃 기능을 활용하면 프레임을 가로로 줄였을 때 모든 사이즈에서 레이아웃이 어떻게 변형되는지 확인할 수 있습니다. 이를 통해 사전에 레이아웃 변형을 파악하고, 개발 과정을 단축시키며 추후 발생할 수 있는 이슈를 줄일 것입니다.
둘째, 디자인 작업에 들어가기 전에 브레이크 포인트를 설정하고, 모든 화면에 적용될 공통 규칙을 정의해야 합니다. 이렇게 하면 디자인 작업이 효율적으로 진행되며, 변경 시에도 일관성을 유지할 수 있습니다. 또한, 개발자와의 소통에서 수정 범위를 명확히 파악할 것입니다.
셋째, 레이아웃을 사전에 상상해 보는 것입니다. 반응형 디자인에서는 웹 또는 모바일 중 하나를 기준으로 레이아웃을 구성하는 경우가 많습니다. 하지만 이렇게 하면 막상 나중에 브레이크포인트마다 레이아웃이 어색하거나 적용이 어려울 수 있습니다. 이를 방지하려면, 모든 화면에서 일관된 디자인 경험을 제공할 수 있는지 미리 상상하며 고려하는 것이 중요합니다.
이번 글에서는 뱅카우 웹사이트 리뉴얼 시리즈의 첫 번째 주제인 반응형 디자인에 대해 살펴보았습니다. 다음번에는 다른 주제로 찾아뵙겠습니다. 긴 글을 읽어 주셔서 감사드립니다.
뱅카우 웹사이트 보러 가기
뱅카우 | 송아지 키우며 자산을 늘려요
국내 최초 한우 투자 뱅카우와 함께 송아지로 자산을 늘리는 투자를 경험해보세요.
www.bankcow.co.kr
