Framer: 접속되는 웹사이트 5분만에 만들 수 있는 툴

요즘 여러 회사가 웹 기반 서비스를 이용해 흥미로운 설문 조사나 미니 게임을 만들어 배포합니다. 이전보다 기술이 발달하고 웹 환경이 좋아지면서 여러 웹 제품을 만들어 소통하는 것이 자연스러워졌는데요, 웹과 앱으로 제공하는 본 서비스와 독립적으로 작동하는 웹사이트를 만드는 경우도 늘었습니다.

프레이머 Framer 는 이런 상황에 요긴한 툴입니다. 크리에이터를 위한 웹 빌더로 디자인한 그대로 웹사이트를 손 쉽게 만들 수 있습니다. 웹을 디자인하고 버튼 한번만 누르면 웹사이트가 만들어지죠. 프레이머 웹에 접속해 피그마에서 하듯이 GUI를 설계하고, 웹 배포를 위한 몇가지를 설정하고 배포를 누르면 누구나 접속할 수 있는 웹사이트가 만들어집니다.

모바일 디자인 툴의 패러다임 변화는 극적이었습니다. 포토샵을 이용해 모바일 화면을 디자인하다 더 가벼운 GUI 툴인 스케치로 옮겼고, 온라인 협업 기반의 디자인 툴인 피그마로 넘어갔습니다. 프레이머는 그래픽 디자인 결과물이 실제 동작하는 웹으로 전환하는 과정에 집중한 툴입니다. 과연 프레이머는 새로운 패러다임이 될 수 있을지 기대되네요.

더 보기 및 출처

비슷한 글

Find in page: 피그마에서 레이어와 텍스트 검색하기

Find in page: 피그마에서 레이어와 텍스트 검색하기

피그마를 사용하다보면 수없이 많은 레이어나 컴포넌트 중에서 원하는 것을 찾아 이동하기 쉽지…

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage는 이미지 압축 프로그램입니다. Tinypng.com이라는 유명한 이미지 압축 웹사이트로 피그마 플러그인도 지원합니다.…

Framer: 접속되는 웹사이트 5분만에 만들 수 있는 툴

Framer: 접속되는 웹사이트 5분만에 만들 수 있는 툴

요즘 여러 회사가 웹 기반 서비스를 이용해 흥미로운 설문 조사나 미니 게임을…

Figmotion: 가볍게 모션 만져보기

Figmotion: 가볍게 모션 만져보기

살아있는 인상을 전하는 모션은 이제 디지털 프로덕트에서 필수 요소가 되었습니다. 하지만 모션을…

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch는 각종 전세계 브랜드의 로고, 심볼을 사용할 수 있는 플러그인입니다. 내가 원하는…

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

가끔 로고나 단순한 이미지의 벡터가 필요할 때가 있는데요. 피그마로 작업하다 다른 툴을…

피그마 플러그인

피그마 플러그인

유용하게 사용하고 있는 피그마 플러그인입니다. 3707

더 보기

G메일 디자인 업데이트

G메일을 디자인이 머티리얼 3의 디자인 언어에 맞게 업데이트됐습니다. 태블릿 사용자를 위해 G메일을 개선하고 이모티콘을 지원하는 등 여러 업데이트를 계획하고 있다고 합니다. 가장 눈에 띄게는 색이 크게 바뀌었습니다. 계층을 구분하는 방식과 버튼을 표현하는 방식에 사용한 그래픽 기법이 이전보다 대비가 크게 낮아졌습니다. 기존에 부가 기능으로 이동하는 정도로 표현되었던 채팅, 스페이스, 회의가 최상위 계층으로 가장 왼쪽에 메인 메뉴로 표현됐습니다.

아쉬움이 많은 업데이트입니다. 기존에 사용하는 요소와 새롭게 추가된 요소의 미세한 차이가 구분하기가 어렵습니다. 메일을 쓰는 버튼, 왼쪽 사이드바의 활성화 된 탭, 리스트에서 체크한 메일 등 여러 요소들에 쓰이는 강조 색의 색조가 미묘하게 다릅니다. 같은 색조를 사용해 통일하지도 않고 구분되는 색조로 명확하게 대비를 주지도 않는 방식으로 목적이 무엇인지 알기 어려웠습니다. 배경 색의 회색톤과 강조 색의 색조가 다르니 다양한 인터랙션도 자연스럽게 연결되지 않습니다. 검색 창과 읽은 메일의 색은 배경색과 구분이 되는듯 되지 않아 눈을 흐리게 뜨게 됩니다.

더 보기 및 출처

https://blog.google/products/gmail/gmail-design-update/

좋은 UI를 위한 움직임

모바일 디자인이 등장하기 전 웹 디자인에서 움직임은 금기였습니다. 속도를 느리게 하고 사용자가 보고 싶어하지 않는 정보에 강제로 집중하게 만드는 장치였습니다. 공급자가 보여주고 싶은 정보를 보게하는 용도로 많이 쓰였습니다. 모바일 시대로 들어서면서 인터넷이 불안정하고 기기 성능이 떨어졌기 때문에 움직임은 거의 사용되지 않았습니다. 이제는 모바일 관련 기술이 발달하면서 서비스에 움직임을 적용하는 난이도도 낮아졌습니다. 여전히 보여주고 싶은 정보를 강조하는데 쓰이고 있지만, 사용자를 위한 적절한 움직임을 제공하려는 노력이 점차 늘고 있습니다.

청각 언어, 시각 언어와 마찬가지로 움직임 역시 언어의 한 종류입니다. 한정된 공간에 다양한 정보를 전할 수 있어 정적인 요소로 전하기 어려운 내용을 쉽게 전할 수 있습니다. 또한 우리가 경험하는 실제 세계에는 ‘가만히 있는’ 것은 절대 없기 때문에 움직임으로 자연스러움 한 스푼을 더해줄 수 있습니다. 평면 스크린에서 자연스러움을 묘사하는 마지막 조각이라 볼 수도 있습니다. 여기에 더해 나의 행동에 따라 반응한다면 추상적인 시각 요소가 물리적인 세계에 정말로 존재한다는 느낌을 전합니다.

움직임의 용도

주목하고 기다리기

움직임은 사용자가 집중하게 만듭니다. 다른 시각 기법들보다 움직이는 요소에 가장 먼저 눈길이 갑니다. 정적인 요소는 눈과 뇌가 정보를 처리하는 속도가 빠르지만, 동적인 요소는 집중력이 떨어질 때까지 시선이 머무는 편입니다. 움직임 정보를 처리하는 동안 시간을 느끼지 못해 기다리는 시간을 짧게 느끼게 도울 수도 있습니다.

가상의 공간 상상하기

움직임은 서비스를 구조를 쉽게 이해할 수 있게 돕습니다. 평면의 모바일 스크린은 추상적인 공간입니다. 추상적인 공간에 구체적인 구조를 떠올릴 수 있도록 애니메이션을 활용합니다. 한정된 화면에 공간과 구조를 떠올릴 수 있도록 화면이 전환될 때 어디서 등장하는지 알려줍니다. 오른쪽에서 등장하는 애니메이션은 왼쪽에서 오른쪽으로 진행되는 구조를 상상할 수 있으며, 아래에서 튀어나왔다 작업을 마무리하고 사라지는 구조로 일시적인 작업은 아래에서 위로 잠깐 나타나는 구조를 상상할 수 있습니다.

많은 정보 순차적으로 이해하기

움직임은 적은 공간에 여러 정보를 전달하기 좋습니다. 고정되어 있을 경우 한번 표시된 정보는 특정 공간을 점유하게 됩니다. 이 때 움직임을 이용해 보이는 정보를 교체하면 짦은 시간에 여러 정보를 전할 수 있습니다. 눈이 한번에 받아들이는 정보량을 줄이고 고객이 터치나 스크롤 액션을 하지 않고 다양한 정보를 확인할 수 있는 기법입니다. 기다리지 않으면 무슨 내용이 나올지 알 수 없기 때문에 시작부터 끝까지 요소의 맥락이 연결되는 것이 좋습니다.

직관적이고 빠른 피드백 받기

움직임은 직관적으로 예측할 수 있는 피드백을 전할 수도 있습니다. 글, 사진, 이미지 시각 요소가 추가될 때마다 사용자는 정보를 해석해야 합니다. 특정 요소에서 일어나는 변화를 따로 설명하지 않고 요소 자체의 움직임만으로 전달할 수도 있습니다. 예를 들어 특정 요소를 삭제하려고 할 때, ‘실패했습니다’ ‘성공했습니다’를 텍스트나 아이콘을 추가해 정보를 전달할 수 있습니다. 하지만 여기서 시각 요소를 추가하지 않고 삭제하려는 대상에 움직임을 추가해 사용자가 시각 요소를 해석할 필요 없이 직관적으로 이해할 수 있게 도울 수 있습니다. 실패했을 때는 고개를 흔들듯 좌우로 움직이고, 성공하면 기분이 좋은듯 살짝 점프하는 것이죠.

움직임의 요소

속도

속도와 지속 시간은 상대적입니다. 1초(1,000ms) 모바일 환경을 기준으로 0.2초(200ms) ~ 0.5초(500ms)에서 시작하는 것이 좋습니다. 이 숫자는 Neilson Norman GroupModel Human Processor에서 기반합니다. 0.1초(100ms)가 순간으로 지각되고 1초(1,000ms)가 생각할 수 있는 상한선이라고합니다. Model Human Processor 에서는 너무 짧으면 인지가 되지 않고 너무 길면 지루합니다. 웹은 실행과 연관된 애니메이션은 속도가 더 빨라야 합니다. 웹이 정상적으로 작동하지 않는다고 생각할 수도 있기 때문입니다. 또한 요소의 크기가 클수록 빨리 움직여야 합니다. 동일한 면적에서 움직여야 하는 거리가 다르기 때문입니다.

반복되는 움직임은 가속도를 주는 것이 자연스럽습니다. 같은 속도로 움직이는 것은 존재하기 어렵기 때문에 자연스럽게 느껴지지 않습니다. 빠르게 시작하고 끝에 닿을수록 서서히 느려지는 움직임이 자연스럽습니다.

등장과 퇴장 움직임은 상황에 따라 다릅니다. 요소가 등장할 때는 사용자가 기다리지 않도록 최대한 빨리 표시하는 것이 좋습니다. 퇴장할 때는 요소가 움직인다는 사실을 전한 뒤에는 최대한 빨리 사라지는 것이 좋기 때문에 사라지는 속도가 점점 빨라지는 가속도로 표현하는 것이 좋습니다.

동선

디지털 프로덕트에서 요소가 표시되는 환경과 동선을 고려해야 합니다. 움직임이 사용자의 경험 단계에서 어떤 문제를 해결해주는지 명확하게 정의하고 사용자의 목표를 달성하는 여정에 도움을 줄 수 있는 맥락을 찾아 움직임을 적용합니다. 여러 요소가 움직여 혼란스럽지 않게 우선 순위를 명확하게 하고 인지 부하가 없도록 설계합니다.

사용자가 행동하는 위치에서 움직임이 시작되는 것이 좋습니다. 예를 들어 사용자가 오른쪽에서 화면을 쓸면, 새로운 창이 오른쪽에서 등장해야 합니다. 사용자가 팝업을 띄우는 버튼을 누르면 상세한 내용을 선택하는 창이 누른 버튼에서부터 시작해서 확장되어 등장하는 것이 자연스럽습니다.

요소 등장하는 순서는 맥락에 따라 다릅니다. 모든 요소들이 순차적으로 움직임이 진행될 필요는 없으며 가급적 움직임의 량과 시간이 적을수록 좋습니다. 정보의 시작과 끝을 표현하기 위해 모든 정보를 동시에 표시하지 않을 때에도 최대한 움직이는 요소를 그룹으로 묶어 사용자가 눈으로 쫓는 동선을 최소화해야합니다.

UI 디자인 가이드

좋은 UI를 위한 움직임

좋은 UI를 위한 움직임

모바일 디자인이 등장하기 전 웹 디자인에서 움직임은 금기였습니다. 속도를 느리게 하고 사용자가…

좋은 UI를 위해 꼭 확인해야 하는 20가지 경우의 수

좋은 UI를 위해 꼭 확인해야 하는 20가지 경우의 수

인터페이스를 디자인할 때 종종 개발자 분께서 ‘앗 그것도 정의해주셔야 해요’라고 말씀하실 때가…

좋은 UI를 위한 알림

좋은 UI를 위한 알림

알림은 애플리케이션에서 발생한 일에 대해 알려주는 것입니다. 시스템 변경사항이나 다양한 커뮤니케이션에 대한…

UI를 위한 글쓰기

UI를 위한 글쓰기

UX 글쓰기(UX Writing)는 제품과 고객의 대화를 디자인합니다. 웹사이트, 앱과 같은 다양한 디지털 환경에서…

패턴

패턴

패턴은 사용자가 디바이스를 조작해 행동하는 일반적인 과정을 뜻합니다. 컴포넌트와 다양한 시각 요소를…

컴포넌트

컴포넌트

컴포넌트는 사용자와 상호작용하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의…

더 보기

Kubota Future Cube: 지속 가능한 미래를 위한 기술

쿠보타의 비전을 담은 웹사이트입니다. 1904년 사람들을 위해 상수관을 설치한 이례로 미션은 변하지 않았다고합니다. 농업 기술, 공기 정화, 리사이클과 같이 지루할 수 있는 기술 소개를 매력적인 일러스트레이션과 화려한 화면 전환으로 풀었습니다. 점점 깊이가 있는 복합적인 공간감을 표현하는 경험이 많아지는 것 같습니다.

더 보기

유튜브 타로카드: 내 운명을 알려주는 유튜버들

유튜브에서 만든 타로카드 보기 웹사이트입니다. Love,Wellness, Fortune을 주제로 점을 볼 수 있습니다. 주제를 선택하면 당연하게도 유튜브 크리에이터인 점성가가 등장해 타로에 대해 설명합니다. 카드를 고르고 생년월일을 입력하면 내게 맞는 이야기를 해줍니다.

각 카드는 유튜브 크리에이터들을 테마로 디자인했습니다. 할시, 아삽사이언스, 블랙핑크 처럼 익숙한 이름도 보입니다. 사용자가 흥미롭게 참여하고 자연스럽게 크리에이터를 만날 수 있는 방식이 영리하네요.

출처 및 더 보기

ORE: 프리미엄 비스포크 악세사리

ORE는 결혼식과 같은 특별한 순간을 위한 보석을 만드는 곳입니다. 미국의 랩퍼 드레이크, 88 라이징의 리치 브라이언 같은 세계적인 아티스트와 다양한 협업을 했습니다.

불가리가 떠오르는 화려함과 오프화이트가 떠오르는 트렌디한 감각에서 묘한 밸런스가 느껴집니다. 섬세하게 번지는 빛을 표현한 보석 사진이 빈티지한 느낌을 한층 더 강화합니다. 단단하면서 트렌디한 가로로 긴 서체가 인상적입니다. 화려한 필기체 서체와의 페어링도 묘한 느낌을 줍니다.

방문하기

https://ore.co/

Ruska: 더 나은 견식을 위한 그릇

Ruska bowl은 강아지가 구운 고기 냄새를 맡고 건강한 사료를 먹을 수 있게 돕는 용기입니다. 웹사이트를 로딩할 때 등장하는 강아지 일러스트레이션이 매력적입니다. 높은 채도의 색을 보색으로 조절해 강렬한 인상을 줍니다. 배경도 원색을 사용해 섹션의 구분을 명확하게 하면서 밝고 경쾌한 소리가 들리는 것 같은 느낌을 줍니다.

더 자세한 내용은 https://ruska.com.br 에서 확인하세요

피그마 대규모 업데이트: 올인원 툴의 꿈

피그마 하나로 모든 것을 처리할 수 있을까요? 요즘 피그마의 행보를 보면 정말 가능할 수도 있겠다는 생각이 듭니다. 피그마가 대규모 업데이트를 했습니다. 위젯이 추가되었는데요, 위젯은 플러그인과 다르게 피그마 파일에서 바로 찾아 사용할 수 있습니다. 깃헙, 아사나, 지라, 노트, 투표 등 협업에 필요한 다양한 기능을 사용할 수 있습니다. 피그마 파일내에서 바로 커뮤니티에 접근할 수 있습니다.오픈 플랫폼으로 앞으로 얼마나 더 다양한 도구가 추가될지 기대되네요.

웹사이트

https://www.figma.com/blog/whats-new-in-figma-june-2022/

춘식이의 일기: 라이언은 하루종일 뭘 할까?

춘식이가 라이언을 따라다니며 왜 월요일을 싫어하는지 찾아다니는 사이트에요. 춘식이 시점으로 3d로 표현된 라이언의 하루를 경험할 수 있습니다. 딱히 카카오 서비스와 연결 짓지 않고 순수하게 직장인의 하루를 표현한 것이 재밋네요. 규모가 작지 않아 보이는데 모바일에서도 매끄러운 인터랙션을 경험할 수 있습니다.

https://www.choonsikdiary.com