토스에서 모바일 요금제 서비스의 오픈 알림을 열었습니다. 오픈 알림을 신청하면 토스모바일을 더 빨리 만날 수 있습니다. 총 4가지 타입을 제공하며 오픈 시 가격, 데이터 제공량, 요금제 종류, 혜택 조건, 통신망 등 자세한 내용을 공개합니다.
토스답게 가입과 변경이 쉽고 토스 앱에서 관리할 수 있습니다. 거기에 더해 캐시백을 강력한 무기로 삼았습니다. 7GB부터 100GB까지 무제한으로 사용할 수 있으며 데이터를 적게 쓰면 요금을 돌려받습니다. 가맹점에서 토스페이로 사용한 금액의 10% 캐시백도 받습니다.
토스 앱 > 전체 > 토스모바일 휴대폰 요금제에서 오픈 알림을 받을 수 있습니다. 1월 말부터 순차적으로 오픈합니다.
Odio는 Volst, Joon Kwak, MAx Frimout가 만든 애플의 공간 오디오를 활용한 AR 사운드 스케이프입니다. 소리 공해를 피해 휴식을 취하고 깊은 잠에 들기 위한 편안한 소리 경험을 제공합니다. 전 세계 아티스트의 매력적인 음악을 경험할 수 있습니다.
다양한 소리로 직접 공간을 설계할 수 있습니다. 내 뒤 먼 곳에 폭포 소리를 배치하거나 내 왼편에 새 소리를 배치할 수도 있습니다. 눈을 감으면 자연 속에 있는 듯한 착각을 불러일으킵니다. 월 구독을 하면 다양한 아티스트의 사운드 스케이프 라이브러리를 사용할 수 있습니다.
미래적인 인상의 그래픽 아트워크가 인상적입니다. 소리를 배치하는 인터페이스도 직관적입니다. 최근 ai와 같은 신기술을 표현하는 데 많이 쓰이는 서체도 독특합니다. 공식 홈페이지의 매끄럽고 명쾌한 설명도 매력적입니다.
*Apple 디바이스에서만 사용할 수 있습니다.
이제 마이리얼트립에서 60만이 넘는 해외 숙소를 직접 예약할 수 있습니다.다양한 플랫폼을 통해 숙소를 예약할 때와는 다르게 마이리얼트립에서 제공하는 포인트나 쿠폰을 사용할 수 있습니다. 조금씩 여행자가 마이리얼트립을 써야만하는 이유가 늘고 있네요.
홈 화면이 크게 변했습니다. 여행에 꼭 필요한 종류인 항공, 숙소, 투어티켓, 여행편의 상품이 이미지 카드로 크게 강조됩니다. 부가적으로 렌터카, 패키지, 키즈, 할인처럼 레벨이 낮은 요소는 톤 다운해 전달합니다. 다양한 배너가 스크롤해야 나오는 것이 놀랍네요. 탐색의 시작점 중에 어떤 것을 넣고 뺄지 고르는 것이 쉽지 않은데 구조가 직관적이라는 생각이 들었습니다.
새로운 디자인 언어도 적용되고 있습니다. 여행 상품 카드가 개선되어 큰 사진으로 탐색이 쉬워졌습니다. 상품을 비교하는데 필요한 다양한 정보도계층에 맞게 정돈되었습니다. 좌우 여백 없이 가득 채운 곡률이 높은 카드 디자인 형태가 독특합니다. 홈, 프로모션, 마이페이지 등 새롭게 개편되는 페이지에는 새로운 비주얼 언어가 적용되고 있습니다.
지난 달 브런치가 앱을 리뉴얼했습니다. 가장 영향력이 큰 탭과 메인이 바뀌었습니다. 브런치 홈, 브런치 나우, 브런치 책방, 글 읽는 서재, 피드에서 홈, 발견, 구독, 내 서랍으로 바뀌었습니다.
사용자 입장에서 훨씬 직관적으로 바뀌었습니다. 브런치 나우가 지금 라이브를 한다는 것인지, 책방과 서재의 차이는 무엇인지, 홈과 피드의 차이는 무엇인지. 이전 탭에서는 사용자가 예측하기 어려운 이름이었습니다. 이제 탭이 어떤 내용을 담고 있는지 어느 누가 보아도 바로 이해할 수 있게 바뀌었습니다.
‘홈’은 브런치가 추천하는 작가와 작품을 포커스합니다. 주로 새로운 작가, 브런치 북, 글을 보여줍니다.역대 브런치 북 수상 작가, 인기 글, 완독률 높은 브런치 북, 구독자 급등 작가 등 다양한 테마의 정보를 정보에 알맞는 UI로 보여줍니다. 이전보다 더 다양한 종류를 발견할 수 있게 되었습니다.
‘발견’은 다양한 내용을 검색할 수 있습니다. 초기화면에서는 글을 보여줍니다. 검색 결과에서는 글, 작품, 작가를 탭으로 나눠 보여줍니다. ‘구독’에서는 내가 구독하는 작가의 글, 매거진을 보여줍니다. ‘내 서랍’에는 나의 글쓰기와 연관된 메뉴와 ‘최근 본’ ‘라이킷’과 같은 여러 인터랙션에 대한 기록이 있습니다.
*웹은 아직 적용되지 않았습니다.
<play the 산수>는 오색빛닮, Jellypri, 이정연이 함께 만든 온라인 예술 프로젝트입니다. 산수화를 만드는 서비스로 미술과 음악을 전공하지 않은 사람도 아름다운 동양화 그림을 만들고 어울리는 음악을 들을 수 있습니다.
먼저 마음에 드는 테마를 고르고 다양한 요소를 배치하면서 음악을 들을 수 있습니다. 닉네임, 산수화 제목, 한줄 설명을 쓰고 저장하면 갤러리에 내 작품이 기록됩니다. 시각 경험이 청각 경험으로 어떻게 변하는지 느낄 수 있는 멋진 웹입니다. 시각적으로 만족스러운 성질과 청각적으로 만족스러운 성질이 서로 비슷하다는 것이 신기합니다.
오색빛닮은 서울대학교에서 그림을 전공한 작가 3명이 모여 만든 한국화 콘텐츠 메이커로 다양한 디자인 굿즈와 그림을 판매하며 조선의 지도, 조선의 궁궐 시리즈를 제공합니다.
최근 번개장터에서 ‘번개케어’를 공개했습니다. 중고 거래를 할 때 신경 써야 하는 정품 여부, 기능 동작 여부, 청결도에 대한 문제를 해결해주는 서비스를 제공합니다.
명품, 스니커즈를 거래할 때는 번개장터 정품 검수 센터 내 전문 검수팀이 인증합니다. 박스, 태그, 보증서가 없는 중고 물품도 가능하며 가품일 경우 300%를 보상합니다.
전자기기와 같이 사용하기 전에 고장 여부를 확인하기 어려운 17개 항목의 기능도 검수하며 무상으로 90일까지 보상합니다. 첫 이용은 100% 무료에 클리닝 옵션을 할인해준다고 합니다.
의류에 붙는 스티커 메타포가 바로 떠오르네요. 의미를 전달할 때 이런저런 시각 요소를 추가해 설명하는 것보다 최소한의 요소로 의미를 전달하는 것이 세련된 디자인이라는 인상을 받았습니다.
핵심 심볼은 차가우면서 은은한 그라데이션으로 번개장터 브랜드 컬러와 보색 대비를 이룹니다. 주로 사용한 녹색 크롬 시각 요소는 번개 장터 혹은 이벤트의 연결고리가 약하다는 인상을 받았습니다.
무엇을 하는지 모를 수 없게 인지가 잘 됩니다. 홈 배너, 팝업, 카테고리, 토스트, 여러 페이지에 걸쳐서 전달합니다. 페이지 제목과 상품에 사용했을 때 이질감 없으면서 시선을 끄는 표현이 매력적입니다.
상세에서 구매자와 판매자의 혜택을 나눠 표현한 것이 인상적이네요. 페이지 종류가 많아서 봐야할 내용이 많은 것이 조금 아쉽네요.
애플이 가사를 보며 노래를 따라 부를 수 있는 애플 뮤직 싱을 선보였습니다. 혼자 부르는 것 뿐만 아니라 다른 사람과 듀엣을 부르고 코러스를 넣을 수도 있습니다. 음악에서 아티스트의 볼륨을 조절해 내 목소리가 묻히게 할 수도 있습니다. 1억곡 이상 노래가 포함됐습니다.
애플은 사용자가 애플 뮤직에서 가사 보기를 자주 사용한다는 것을 발견했고 자연스럽게 ‘따라부른다’는 경험을 발견했습니다. 이미 하고 있던 사용자의 행동을 더 강화해주는 UX입니다. 기존 음악 서비스와는 다른 경험을 제공하는 것이 인상적입니다. 고음으로 올라갈 때는 글씨가 커지고 작아지는 섬세한 인터랙션이 역시 애플이다 싶습니다.아쉽게도 점수는 없네요.
웹플로우 Webflow가 2022년 리뷰를 공유했습니다. 웹플로우로 만들었습니다. 무려 300만개 이상의 웹사이트가 웹플로우로 만들어졌다고 합니다. 흥미로운 인터랙션의 웹사이트가 한가득입니다. 지난해 소개했던 웹사이트도 종종 보이네요. 바로 복사할 수 있는 테마를 제공하는 것이 편리합니다. 875명이 넘는 웹플로우 전문가를 만날 수도 있습니다. 차세대 피그마+워드프레스를 노리는 모양새네요. 웹플로우와 프레이머 모두 분발하고 있군요. 과연 차세대 디자인 툴이 또 등장할까요?
웹사이트 디자인 자체도 매력적입니다. 첫 화면의 형태가 변형된 검은색 2022 숫자가 강렬하게 시선을 사로잡습니다. 낮은 채도의 무지개빛 그라데이션을 배경에 깔았습니다. 선으로 콘텐츠를 구분합니다. 보통은 단정하게 정리하는 콘텐츠를 비정형으로 이리저리 겹친 것이 매력적입니다. 중채도와 선이 아직은 대세로 보이네요. 사이키델릭한 디스플레이 서체와 단단한 본문의 대비가 강합니다. 목록 영역에서 마우스 호버했을 때 원래 제목을 보면서 대략적인 인상을 볼 수 있는 인터랙션이 인상적입니다.
모바일 디자인이 등장하기 전 웹 디자인에서 움직임은 금기였습니다. 속도를 느리게 하고 사용자가 보고 싶어하지 않는 정보에 강제로 집중하게 만드는 장치였습니다. 공급자가 보여주고 싶은 정보를 보게하는 용도로 많이 쓰였습니다. 모바일 시대로 들어서면서 인터넷이 불안정하고 기기 성능이 떨어졌기 때문에 움직임은 거의 사용되지 않았습니다. 이제는 모바일 관련 기술이 발달하면서 서비스에 움직임을 적용하는 난이도도 낮아졌습니다. 여전히 보여주고 싶은 정보를 강조하는데 쓰이고 있지만, 사용자를 위한 적절한 움직임을 제공하려는 노력이 점차 늘고 있습니다.
청각 언어, 시각 언어와 마찬가지로 움직임 역시 언어의 한 종류입니다. 한정된 공간에 다양한 정보를 전할 수 있어 정적인 요소로 전하기 어려운 내용을 쉽게 전할 수 있습니다. 또한 우리가 경험하는 실제 세계에는 ‘가만히 있는’ 것은 절대 없기 때문에 움직임으로 자연스러움 한 스푼을 더해줄 수 있습니다. 평면 스크린에서 자연스러움을 묘사하는 마지막 조각이라 볼 수도 있습니다. 여기에 더해 나의 행동에 따라 반응한다면 추상적인 시각 요소가 물리적인 세계에 정말로 존재한다는 느낌을 전합니다.
움직임은 사용자가 집중하게 만듭니다. 다른 시각 기법들보다 움직이는 요소에 가장 먼저 눈길이 갑니다. 정적인 요소는 눈과 뇌가 정보를 처리하는 속도가 빠르지만, 동적인 요소는 집중력이 떨어질 때까지 시선이 머무는 편입니다. 움직임 정보를 처리하는 동안 시간을 느끼지 못해 기다리는 시간을 짧게 느끼게 도울 수도 있습니다.
움직임은 서비스를 구조를 쉽게 이해할 수 있게 돕습니다. 평면의 모바일 스크린은 추상적인 공간입니다. 추상적인 공간에 구체적인 구조를 떠올릴 수 있도록 애니메이션을 활용합니다. 한정된 화면에 공간과 구조를 떠올릴 수 있도록 화면이 전환될 때 어디서 등장하는지 알려줍니다. 오른쪽에서 등장하는 애니메이션은 왼쪽에서 오른쪽으로 진행되는 구조를 상상할 수 있으며, 아래에서 튀어나왔다 작업을 마무리하고 사라지는 구조로 일시적인 작업은 아래에서 위로 잠깐 나타나는 구조를 상상할 수 있습니다.
움직임은 적은 공간에 여러 정보를 전달하기 좋습니다. 고정되어 있을 경우 한번 표시된 정보는 특정 공간을 점유하게 됩니다. 이 때 움직임을 이용해 보이는 정보를 교체하면 짦은 시간에 여러 정보를 전할 수 있습니다. 눈이 한번에 받아들이는 정보량을 줄이고 고객이 터치나 스크롤 액션을 하지 않고 다양한 정보를 확인할 수 있는 기법입니다. 기다리지 않으면 무슨 내용이 나올지 알 수 없기 때문에 시작부터 끝까지 요소의 맥락이 연결되는 것이 좋습니다.
움직임은 직관적으로 예측할 수 있는 피드백을 전할 수도 있습니다. 글, 사진, 이미지 시각 요소가 추가될 때마다 사용자는 정보를 해석해야 합니다. 특정 요소에서 일어나는 변화를 따로 설명하지 않고 요소 자체의 움직임만으로 전달할 수도 있습니다. 예를 들어 특정 요소를 삭제하려고 할 때, ‘실패했습니다’ ‘성공했습니다’를 텍스트나 아이콘을 추가해 정보를 전달할 수 있습니다. 하지만 여기서 시각 요소를 추가하지 않고 삭제하려는 대상에 움직임을 추가해 사용자가 시각 요소를 해석할 필요 없이 직관적으로 이해할 수 있게 도울 수 있습니다. 실패했을 때는 고개를 흔들듯 좌우로 움직이고, 성공하면 기분이 좋은듯 살짝 점프하는 것이죠.
속도와 지속 시간은 상대적입니다. 1초(1,000ms) 모바일 환경을 기준으로 0.2초(200ms) ~ 0.5초(500ms)에서 시작하는 것이 좋습니다. 이 숫자는 Neilson Norman Group과 Model Human Processor에서 기반합니다. 0.1초(100ms)가 순간으로 지각되고 1초(1,000ms)가 생각할 수 있는 상한선이라고합니다. Model Human Processor 에서는 너무 짧으면 인지가 되지 않고 너무 길면 지루합니다. 웹은 실행과 연관된 애니메이션은 속도가 더 빨라야 합니다. 웹이 정상적으로 작동하지 않는다고 생각할 수도 있기 때문입니다. 또한 요소의 크기가 클수록 빨리 움직여야 합니다. 동일한 면적에서 움직여야 하는 거리가 다르기 때문입니다.
반복되는 움직임은 가속도를 주는 것이 자연스럽습니다. 같은 속도로 움직이는 것은 존재하기 어렵기 때문에 자연스럽게 느껴지지 않습니다. 빠르게 시작하고 끝에 닿을수록 서서히 느려지는 움직임이 자연스럽습니다.
등장과 퇴장 움직임은 상황에 따라 다릅니다. 요소가 등장할 때는 사용자가 기다리지 않도록 최대한 빨리 표시하는 것이 좋습니다. 퇴장할 때는 요소가 움직인다는 사실을 전한 뒤에는 최대한 빨리 사라지는 것이 좋기 때문에 사라지는 속도가 점점 빨라지는 가속도로 표현하는 것이 좋습니다.
디지털 프로덕트에서 요소가 표시되는 환경과 동선을 고려해야 합니다. 움직임이 사용자의 경험 단계에서 어떤 문제를 해결해주는지 명확하게 정의하고 사용자의 목표를 달성하는 여정에 도움을 줄 수 있는 맥락을 찾아 움직임을 적용합니다. 여러 요소가 움직여 혼란스럽지 않게 우선 순위를 명확하게 하고 인지 부하가 없도록 설계합니다.
사용자가 행동하는 위치에서 움직임이 시작되는 것이 좋습니다. 예를 들어 사용자가 오른쪽에서 화면을 쓸면, 새로운 창이 오른쪽에서 등장해야 합니다. 사용자가 팝업을 띄우는 버튼을 누르면 상세한 내용을 선택하는 창이 누른 버튼에서부터 시작해서 확장되어 등장하는 것이 자연스럽습니다.
요소 등장하는 순서는 맥락에 따라 다릅니다. 모든 요소들이 순차적으로 움직임이 진행될 필요는 없으며 가급적 움직임의 량과 시간이 적을수록 좋습니다. 정보의 시작과 끝을 표현하기 위해 모든 정보를 동시에 표시하지 않을 때에도 최대한 움직이는 요소를 그룹으로 묶어 사용자가 눈으로 쫓는 동선을 최소화해야합니다.
