마음을 위한 편안한 사용 경험, 국립정신건강센터 마음프로그램 웹·앱 제작 사례
안녕하세요, 잡오브브라더스입니다.
이번에 소개할 프로젝트는 국립정신건강센터의 마음프로그램 웹·앱입니다.
마음프로그램은 트라우마를 경험한 후 심리적 어려움을 겪는 사용자가 관련 정보를 이해하고, 안정화 기법을 학습할 수 있도록 구성된 서비스입니다.
잡오브브라더스는 이러한 콘텐츠를 모바일에서도 편안하게 읽고 이용할 수 있도록 화면과 사용 흐름을 설계했습니다.
이번 프로젝트에서 중요하게 생각한 것은 사용자가 화면을 이용하는 과정에서 불필요한 부담을 느끼지 않도록 하는 것이었습니다.
필요한 콘텐츠를 쉽게 찾는 첫 화면
서비스에 처음 들어온 사용자는 무엇부터 살펴봐야 할지 고민할 수 있습니다.
마음프로그램의 첫 화면에서는 다음 세 가지 주요 콘텐츠를 구분해 보여줍니다.
- 서비스의 목적과 이용 방법을 소개하는 마음프로그램이란?
- 관련 정보를 살펴보는 심리교육
- 구체적인 방법을 학습하는 안정화 기법
각 영역에는 제목과 짧은 설명, 내용을 떠올릴 수 있는 일러스트를 함께 배치했습니다. 사용자가 긴 안내문을 먼저 읽지 않아도 필요한 콘텐츠를 선택할 수 있도록 구성한 것입니다.
별도의 사용가이드도 마련해 서비스를 이용하는 방법을 확인할 수 있게 했습니다.
한 번에 많이 보여주기보다 단계별로 안내합니다
모바일 화면에 긴 내용을 한꺼번에 담으면 사용자는 어디까지 읽었는지, 다음에 무엇을 해야 하는지 놓치기 쉽습니다.
이번 프로젝트에서는 안내와 학습 콘텐츠를 여러 화면으로 나누고, 각 단계의 핵심 내용을 중심으로 구성했습니다.
현재 위치를 보여주는 진행 표시와 이전·다음 이동, 필요한 화면의 건너뛰기 기능을 통해 사용자가 흐름을 파악할 수 있도록 했습니다.
예를 들어 프로그램 소개 화면에서는 현재 단계와 전체 단계 수를 함께 확인할 수 있습니다. 안정화 기법에서는 동작이나 설명을 순서대로 따라가도록 화면을 구성했습니다.
내용을 전달하는 순서와 화면을 이동하는 순서를 함께 설계한 점이 이번 프로젝트의 중요한 부분입니다.
설명을 이해하기 쉽게 돕는 시각 요소
마음프로그램에는 자신의 불편감을 점수로 살펴보는 안내 화면이 있습니다.
이 화면에서는 설명 문장과 함께 세로 눈금, 점수별 상태 설명을 배치했습니다. 숫자와 문장 사이의 관계를 한눈에 살펴볼 수 있도록 구성한 것입니다.
심리교육 화면에서도 일러스트와 항목별 설명을 함께 사용했습니다. 수면 위생처럼 여러 내용을 안내해야 하는 경우에는 항목을 나누고 제목과 본문을 구분해 읽는 순서를 정리했습니다.
다만 모든 화면에 많은 그래픽을 넣지는 않았습니다. 설명을 이해하는 데 필요한 위치에 시각 요소를 배치하고, 글과 이미지 사이에 충분한 여백을 확보했습니다.
읽기에서 학습으로 이어지는 안정화 기법 화면
안정화 기법은 방법을 읽고 이해하는 과정뿐 아니라, 순서에 따라 살펴보는 흐름도 중요합니다.
포트폴리오 화면에서는 복식호흡법과 착지연습, 자원강화 등의 콘텐츠를 확인할 수 있습니다.
복식호흡법 화면은 소개와 설명을 읽은 뒤 설명 영상이나 기법 실행으로 이동할 수 있도록 구성했습니다. 착지연습 화면에서는 단계 표시와 동작 일러스트를 통해 현재 살펴보는 내용을 구분했습니다.
호흡마음챙김명상 화면에는 재생 상태와 시간을 확인할 수 있는 미디어 화면을 적용했습니다.
콘텐츠의 성격에 따라 설명, 이미지, 단계 이동, 미디어 재생을 구분해 배치했습니다.
어디서든 주요 콘텐츠로 이동할 수 있도록
학습 화면을 여러 단계로 나누면 전체 메뉴로 돌아가는 방법도 명확해야 합니다.
모바일 화면 하단에는 마음프로그램 안내, 심리교육, 안정화 기법으로 이동하는 메뉴를 고정했습니다.
사용자는 화면 위로 다시 올라가 메뉴를 찾지 않아도 주요 콘텐츠에 접근할 수 있습니다. 반복해서 나타나는 메뉴와 버튼의 위치도 일관되게 유지했습니다.
한 손으로 사용하는 상황을 고려해 터치할 영역과 버튼 크기를 정리하고, 다음 행동을 찾기 쉽게 구성했습니다.
차분한 색감과 일관된 글자 체계
전체 화면은 오프화이트를 바탕으로 그린·민트 계열의 색을 조합했습니다.
본문을 읽는 영역은 밝고 단정하게 구성하고, 주요 버튼과 메뉴에는 짙은 틸 계열을 사용했습니다. 자연 이미지와 부드러운 일러스트는 콘텐츠를 보조하는 요소로 활용했습니다.
서체는 프리텐다드와 마루부리를 활용하고, 제목과 본문, 강조 문구의 역할을 나눴습니다.
디자인의 목표는 장식적인 요소를 많이 보여주는 것보다 내용을 편안하게 읽고 다음 행동을 쉽게 찾을 수 있는 화면을 만드는 것이었습니다.
모바일을 중심으로, 다양한 화면에서도 이어지는 경험
이번 프로젝트는 모바일에서의 이용을 중심으로 구성하면서 PC와 태블릿에서도 콘텐츠의 순서와 사용 흐름이 이어지도록 반응형으로 설계했습니다.
화면 크기가 달라질 때는 내용을 단순히 확대하거나 축소하는 대신, 정보를 배치하는 방식과 글자 크기, 여백을 조정했습니다.
모바일에서는 한 화면의 핵심 내용을 분명하게 보여주고, 넓은 화면에서는 콘텐츠를 더 여유 있게 살펴볼 수 있도록 구성했습니다.
서비스의 목적에 맞는 화면을 만듭니다
마음프로그램 프로젝트는 콘텐츠의 특성과 사용자의 이용 상황을 함께 고려한 웹·앱 제작 사례입니다.
필요한 정보를 찾는 첫 화면부터 단계별 학습, 고정 메뉴, 미디어 콘텐츠까지 하나의 사용 흐름으로 연결했습니다.
잡오브브라더스는 앞으로도 서비스가 전달해야 할 내용과 사용자가 실제로 이용하는 과정을 함께 살피며, 목적에 맞는 디지털 경험을 만들어가겠습니다.
※ 이 글은 웹·앱의 화면 구성과 사용 경험을 소개하는 제작 사례이며, 프로그램의 임상적 효과를 설명하는 자료는 아닙니다.