매년, 우리는 멋져 보일 뿐만 아니라 다른 디자이너들에게 영향을 주어 트렌드를 "도둑질" 하도록 영향을 미치는 새로운 디자인 트렌드를 준비합니다.

좋든 싫든, 실제로 스마트하고 실용적인 디자인의 흐름이 있습니다. 이러한 흐름은 더 적은 공간에 더 많은 정보를 포함하는 것부터 사용자와 더 많은 상호 작용을 형성하는 것까지 다양할 수 있습니다.

계속해서 인터넷을 장악하고 있는 트렌드 중 일부를 살펴보겠습니다!

어린이 도시락으로 더할 나위 없는 — Bento Boxes

Bento box(이하 벤토)는 일본 도시락 문화의 필수품입니다.
음식을 체계적인 형식으로 보관(의역: 예쁘게 보관)하고 위생적으로 유지할 수 있도록 도와줍니다.

누가 이런 생각을 했는지는 알 수 없지만, 음식이 가득 차 있는 벤토는 디지털에 비유해 볼 수 있을 만큼 훌륭한 소재입니다.

벤토는 드리블(Dribbble)이나 비헨스(Behance)와 같은 플랫폼에서 시작된 또 다른 디자인 트렌드로, 수백만 명의 디자이너들이 차용할 정도로 큰 인기를 얻고 있습니다. 그러나 "모듈식" 디자인의 개념은 웹사이트 대시보드에서 시작되었습니다. 여기에는 PayPal과 같은 판매 및 재무 대시 보드, Google Ads와 같은 분석 및 기타 여러 가지가 포함됩니다.

Windows Phone과 Lumia를 기억하시나요? 그들이 사용한 UI는 본질적으로 벤토 디자인의 초기 형태를 반복한 것이었습니다. 나중에 Microsoft는 이 개념을 확장해 데스크톱 시작메뉴에도 적용했습니다.

이처럼 벤토 디자인은 업계 전반에서 사용되어 왔으나 Apple이 벤토 그리드를 사용하면서 폭발적인 인기를 끌게 됩니다. 가장 먼저 iPhone 랜딩 페이지에서 사용했고, 곧이어 Apple 이벤트 슬라이드와 프레젠테이션으로 확장되었습니다.

Apple은 메가트렌드를 이끄는 것으로 널리 알려져 있고 벤토도 그중 하나일 뿐입니다. 모든 디자이너와 그들의 선임들은 프레젠테이션, 웹사이트, 제품 출시 등에 벤토를 사용해오고 있었습니다.

기존 벤토 디자인과 새로운 트렌드의 가장 큰 차이점은 그리드의 각 섹션이 그룹의 일부가 아닌 독특한 공간을 나타낸다는 것입니다.

다른 UI 디자인 트렌드와는 달리 벤토는 실제로 단순한 레이아웃 스타일 그 이상으로 진화하고 있습니다. 이제는 시제품뿐만 아니라 다른 독특한 레이아웃이 더해져 새로운 시각적 디자인 콘셉트로 진화했습니다.

이것 좀 보세요:

위 예시는 diagram.com에서 가져온 것으로, AI 기반 디자인 도구로 무엇을 할 수 있는지 벤토 그리드를 사용하여 보여줌으로써 서비스를 훨씬 더 매력적으로 만들고 사용자로 하여금 친밀감 형성과 쉬운 이해를 돕습니다.

벤토 디자인을 사용하려 하는 디자이너들을 위해 특화된 몇 가지 웹사이트가 있습니다. 그중 하나는 bentogrids.com입니다. UI와 그래픽 디자인을 위한 벤토 그리드가 한 곳에 모여져 있습니다. 이 웹사이트를 만든 분들은 꽃길만 걷기를...

공간디자인 트렌드와 기술의 도약

한때 전 세계의 모든 기술과 디자인 애호가들이 체감했던 것처럼 2023년 6월 5일 아침, "중요한 이메일"을 확인하기 위해 화장실에서 핸드폰을 든 순간 당신의 피드는 완전히 애플의 새로운 비전 프로(Vision Pro)로 가득 찼습니다.

이후 몇 주 동안 기술분야에서는 이것이 전부였으며 모든 디자이너는 공간 디자인 기술을 익히려고 노력했습니다. 디자인 트렌드 외에도 다양한 AR/VR 스타트업이 주목을 받았으며 그들의 기술이 입소문을 타기도 했습니다. 이는 정말로 AR과 VR에 실질적인 힘이 되었습니다.

우수한 기술은 창의적인 디자인 가능성을 불러일으킵니다. 스마트워치부터 폴더블 폰까지, 디자이너들은 항상 진정한 적응력을 발휘해왔습니다. 공간 디자인도 마찬가지였습니다.

인기 있는 디자이너 중심의 툴 "Bezi"의 출시와 함께 이러한 변화가 시작되었습니다. 이 툴은 Figma나 Spline과 같은 디자인 도구와 매우 유사하지만 3차원 기능을 갖추고 있습니다. 디자이너들은 공간 디자인에 참여할 수 있으며, AR/VR 헤드셋을 연결하여 인터랙티브한 공간 경험을 만들 수 있습니다.

Bezi를 통해 우리가 만들 수 있는 것들을 살펴보겠습니다:

더 나은 AR/VR 경험에 큰 영향을 미치는 요소 중 하나는 더 나은 사용자 경험(UX)입니다. 아름다운 디자인 뒤에 있는 기술을 깊이 이해하고, 실제 VR 헤드셋을 사용하여 테스트하고, 공간 환경에서 물건들을 시험해 보는 것은 모두 사용자 경험의 일부가 될 것입니다. 우리가 앞으로 나아가면서 UX에 대한 현재의 이해에 새로운 교훈과 변화가 분명히 있을 것입니다. 하지만, 이것은 지금 습득하고 나중에 가능한 경우 미래에 활용할 수 있는 기술 중 하나입니다.

Apple의 넓은 상상력과 풍부한 자본 외에도 안경 착용에 완전히 새로운 경험을 선사하는 기술에 정통하지 않은 회사도 있습니다.

Google의 프로젝트 "Google Glasses"가 실제 대량 생산에 성공하지 못했더라도, 선글라스 회사인 레이밴(RayBan)은 새로운 메타 웨이페어(Meta Wayfarer)로 스마트 웨어러블 경쟁에 뛰어들었습니다.

일반적인 RayBan 디자인에 속지 마세요. 내장된 카메라와 스마트 기능을 통해 비디오/이미지를 저장하고 소셜 미디어에 라이브 스트리밍할 수 있습니다. 이는 사용자 경험과 고객 경험에 새로운 차원을 불어넣습니다. 아마도, 2025년의 트렌드가 될지도 모릅니다!

누구나 애니메이션을 만들 수 있습니다!

더 많은 사람들이 새로운 기술에 접근할 수 있게 되면 종종 새로운 트렌드가 탄생하곤 합니다.

이것은 LottieFiles가 가진 하나의 임무였습니다. 제가 에반젤리스트로 회사에 입사했을 때, 이미 어떤 도구나 UI에 간편하게 추가할 수 있는 애니메이션에 감탄했습니다. Lottie를 활용한 애니메이션에 대한 수요를 조사한 그들은 Figma용 플러그인도 출시했는데, 이 플러그인을 사용하면 Figma로 만든 애니메이션을 Lottie에 적용가능한 JSON 파일로 변환할 수 있습니다.

이 플러그인의 등장으로 인해 After Effects과 유사한 소프트웨어를 배워야 하는 큰 허들이 없어지게 되었고, 더 많은 디자이너들은 빠르게 애니메이션을 만들 수 있게 되었습니다.

요즘에는 모든 회사의 랜딩 페이지에서 매력적인 인터랙션을 발견할 수 있습니다. 이는 모두 웹 사이트 방문자의 경험의 차별화에 대한 필요성이 점점 커지고, 제품/서비스를 판매하는 도구로서 스토리텔링에 대한 수요가 높아진 덕분입니다.

다음 랜딩 페이지의 인터랙션을 예로 들어보겠습니다:

스크롤 애니메이션이 적용되면 방문자들은 여러분이 제시하는 내용에 몰입할 것입니다. 웹플로우(Webflow)와 프레이머(Framer)와 같이 코드가 필요없는(No-code) 도구들은 디자이너들에게 코드를 길게 쓰지 않고도 이러한 애니메이션 기능을 제공하기 위해 끊임없이 혁신하고 있습니다.

누군가는 여기서 라이딩이 끝난다고 생각할 수도 있습니다. 애니메이션이 정점에 이뤘고 더 이상 기대할 것이 없습니다. 하지만 다행히 기술 분야의 사람들은 항상 차세대 혁신을 찾고 있습니다. 또한, 끊임없이 발전하는 유능한 도구들로 인해 상상할 수 있는 모든 것이 가능해집니다.

이러한 가능성 중 하나는 새로운 "애니메이션 버튼 트렌드"입니다. 애니메이션 기술을 도입해 단순한 버튼에 활기를 불어넣는 새로운 UI 스타일입니다. 버튼 주위에 간단한 외곽선 애니메이션부터 마우스 hover시 버튼 내부에서 별이 움직이는 것과 같은 변화까지 다양합니다.

이러한 트렌드는 종종 도미노 효과에 의해 생성됩니다. 먼저 한 디자이너의 소셜 미디어 게시물이 인기를 얻고, 그 후에 다른 유명한 디자이너들이 따라오게 됩니다.

플랫(Flat) 디자인의 종말?

요즘 많은 디자이너들이 플랫 디자인(예: Medium에서 볼 수 있는 것과 같은)에서 시각적으로 현실적인 스타일로 이동하고 있다고 이야기하고 있습니다. 이러한 스타일에는 3D 그래픽, 깊이 효과, 뉴모피즘(neumorphism), 스큐어모피즘(skeuomorphism) 등이 포함됩니다.

최근에는 많은 기업들이 3D를 핵심 스타일로 채택했습니다. 현재 웹 및 앱 디자인에서는 직접적으로 나타나지 않을 수 있지만, 로고는 이 새로운 트렌드로 업데이트되고 있습니다.

다른 디자인 트렌드와 마찬가지로, 이러한 스타일을 채택하는 주요 이유 중 하나는 Spline 및 Vectary와 같은 "쉽게 사용할 수 있는" 온라인 웹 기반의 3D 도구들이 도입되었기 때문입니다. 이 도구들을 사용하면 웹 및 앱에 3D 에셋을 넣는 것이 매우 쉬워집니다. 또한, 이러한 도구들은 애니메이션을 사용하여 3D 에셋을 생생하게 만들며, 제가 경험한 것 중 가장 배우기 쉽습니다.

에어비앤비(Airbnb)는 항상 디자인과 트렌드를 주도해온 기업입니다. 그들은 간단하면서도 효과적인 앱 디자인과 인터랙션으로 널리 알려져 있습니다. 2023년에는 새로운 중요한 기능을 가져올 앱 업데이트를 발표했습니다.

그들은 12개 이상의 3D적인 시각적 요소를 통합했으며, 발표 비디오는 거의 모두 3D에 관한 것입니다.

아이소메트릭 비주얼, 3D 캐릭터와 애니메이션, 그리고 다양한 앱과의 상호 작용은 계속해서 보고 싶게 만듭니다. 플랫에서 3D로의 전환은 실제로 느리지만 꾸준하게 이뤄지고 있으며, 이것이 이 트렌드가 지속될 이유라고 생각합니다.

이 트렌드를 시작한 사람은 항상 베일에 가려지겠지만, 현실적이고 관련성이 높은 디자인에 대한 요구는 우리 자신의 창의성과 사용자를 위한 혁신을 불러 일으킵니다.

범람하는 A.I. 디자인 도구 - 아군 혹은 적?

인공지능은 지난 10년 동안 기술 분야에서 가장 많이 사용되고 인식되는 단어입니다. 일부 디자이너들은 미래에 자신의 직업에 대한 위협으로 받아들이지만, 대부분의 디자이너들은 이 기술을 사용하여 더 빠르고 퀄리티 높은 디자인을 만들고 있습니다.

"A.I. powered (인공지능으로 구현된)" 디자인 도구 세트는 다양한 수준에서 OpenAI API를 구현하려고 노력하고 있으며, 자체 인공지능 모델에도 작업 중입니다. 그러나 이러한 대부분의 인공지능 기능은 단순한 속임수에 불과합니다. 무작위로 UI를 디자인하거나 에셋을 섞어서 배치하고 심지어 어려운 문제에 기본적인 솔루션을 제공하기도 합니다. 이러한 것들은 많은 커뮤니티 회원들의 지지를 받고 있는 몇 가지 비판 중 일부에 불과합니다.

이런 복잡한 속임수 속에서도 구세주가 몇몇 있습니다. 그러한 영웅 중 하나는 팬들이 가장 좋아하는 Relume입니다. Webflow를 기반으로 한 이 회사는 Relume A.I.라는 강력한 와이어프레임 및 사이트 매핑 도구를 출시했습니다.

당신이 기본적으로 프로젝트 설명인 프롬프트를 입력하면, 완전하고 자세한 사이트 맵과 와이어프레임이 생성됩니다. 이 와이어프레임은 관련 데이터와 레이아웃으로 가득 차 있으며 빠르게 Figma나 Webflow로 복사할 수 있습니다.

저만 Chat-GPT가 인간의 창의성을 망치고 의존성만 증가시킨다고 생각하는 걸까요?

보다 세심하고 공감적인 사용자 경험(UX)

이 정도면 비주얼과 UI 디자인에 대한 이야기는 충분합니다. 최소한 사용자 경험(UX)은 발전해 왔으며, 이는 UX 연구원과 디자이너가 중점을 두는 내용으로 정당화할 수 있습니다. 이는 디자인을 접근 가능하고 포괄적으로 만들기 위해 프로세스를 간소화하는 것을 의미합니다.

많은 디자이너들이 시각 디자인보다는 사용성에 관심을 가지고 있습니다. 이로써 더욱 간결하고 실행 가능한 디자인이 중심에 올라왔습니다. 디자이너들은 지난 몇 년간 업계의 변화에도 불구하고 바퀴를 재발명하기보다는 효과적으로 작동하는 방법을 고수하고 있습니다.

위 Google 트렌드 그래프는 접근성이 뛰어난 디자인이 어떻게 산업 요구사항이 되었는지 보여줍니다.

이러한 접근성 기술은 색 대비, 가독성 있는 폰트, 인식 가능한 액션 요소부터 다양한 능력을 가진 사람들을 따라가는 것까지 다양합니다. 이를 통해 접근성에 초점을 맞춘 기능을 제공합니다.

왜 접근성이 필요한가요?

모든 연령층의 사람들을 위한 디자인이 필요하고 신체적 제약이 있기 때문에 접근성도 점점 더 강화되고 있습니다. 기업은 다양한 인구통계를 활용하고 모든 측면에서 포용성을 추구하고 있습니다. 점점 더 많은 사람들이 디지털 방식으로 전환함에 따라 디자이너가 접근 가능한 디자인을 중요시하는 것은 거의 필수입니다.

강좌와 부트캠프는 요구 사항을 멀리서도 감지하고 있으며, 학생들이 접근성 디자인에 대한 충분한 지식을 갖추고 디자인 분야에 진입할 수 있도록 준비하고 있습니다.

개인화

접근성 외에도, 개인화가 사람들을 앱이나 웹사이트에 묶어 두는 주요 요인입니다. 아마도 유튜브(Youtube)에서 이와 비슷한 메시지를 본 적이 있을 겁니다.

다양한 앱이 며칠 동안 새로운 기능을 실험하다가 사용들이 좋아하지 않아 철회하는 모습을 볼 수도 있습니다. 이는 UX 디자이너가 제품과 서비스의 미래를 어떻게 주도하고 있는지 직접적으로 보여줍니다.

현재 디자인 을 하는 서비스들은 국문(Korean), 영문(English), 일본어(Japanese)를 제공하고 있으며, 이를 모두 지원하는 글꼴 — Noto Sans (혹은 본고딕) CJK을 사용하고 있습니다.

Noto Sans는 오픈소스이며 7종의 다양한 무게가 있어 많은 곳에서 즐겨 찾는 글꼴이기도 합니다. 글꼴에 감정이 없고, 적당한 완성도와 안정감을 갖추고 있어 IT 서비스나 회사의 객관적인 내용을 전달하기에 적합합니다. (윤고딕700 시리즈가 힌팅이나 자폭이 넓어 개인적으로 더 선호하지만 유료…)

특히 CJK 판은 한·중·일(+라틴 알파벳)을 모두 지원하며 다국어를 섞어 짤 때 어우러짐이 좋고 편리한 것이 장점입니다. 앞서 국문, 영문, 일본어를 이 글꼴 하나로 모두 아우를 수 있으므로 서비스하는 디자인 시스템에서 본문용 글꼴로 사용해 오고 있었습니다.

본문은 NotoSans를, 제목용 영문과 큰 숫자는 Sofia를 사용해 오다 내부에서 영문 버전에서 외국 서비스의 느낌이 더 어우러졌으면 좋겠다는 의견이 나옵니다.

정확히 어떠한 점에서 글로벌 서비스처럼 안 느껴지는지, x height가 작다던가 특정 문자가 예쁘지 않다거나 하는 구체적인 명확한 이유가 있었으면 좋겠지만 모호한 “느낌” 으로 “우리 서비스도 외국 서비스처럼 세련된 타이포를 사용했으면 좋겠다”고 말하기 때문에 애매합니다.

디자이너와 개발자가 소통할 때 객관적으로 설득을 해야 한다 하지만, 반대로 요구하는 건 전혀 객관적이고 설득 적이지가 않…

서비스가 국문과 영문(혹은 영어권) 두 가지 언어만 지원한다면 상대적으로 쉽게 바꿀 수 있지만 세 가지 언어를 섞어 짤 때 모두 어우러지게 해야 하므로 어떻게 해야 하나 고민에 빠집니다.

가장 먼저 떠오른 글꼴들…

스포카 한 산스 (Spoqa Han Sans)

Noto Sans를 기반으로 커스한 글꼴이기 때문에 한·영·일에 사용하기 가장 적합한 글꼴입니다. 웹 폰트로 사용하기 적합하도록 글리프를 덜어내 용량을 줄였고, 라틴 알파벳 일부와 숫자를 커스텀해 심미성이 높습니다. (NotoSans의 숫자가 싫어 가격표기 부분에 따로 Sofia를 사용하곤 했습니다)

디자인 시스템을 개편하면서 초기에 스포카 한 산스를 사용했으나, Windows 환경에서 일부 글리프가 깨져서 나오는 문제가 있었기에 후보에서 제외합니다.

Univers, San Francisco + NotoSans 섞어짜기

5월달에 본 책 《2017 내가 쓴 한글 폰트》의 본고딕 파트에는 다음의 내용이 언급되어 있습니다.

부드러운 느낌의 로마자 산세리프 폰트를 그다지 선호하지 않다 보니 <Myriad>의 잔향이 있는 로마자가 아쉽다. 그 때문에 <Univers> 혹은 <San Francisco>와 함께 사용하는 경우가 많다.

한글활자연구회, 『2017 내가 쓴 한글 폰트』 (활자공간, 2019), 55p

완성도 있는 라틴알파벳을 조합해 실험해보고 서비스에 적용하고 싶었지만, Univers는 유료고, San Francisco는 타사에서 사용하는 것을 금지했기 때문에 눈물을 머금고 제외합니다.

다른 곳에선 어떻게 사용하고 있을까?

당장 떠오르는 국문(Korean)을 지원하는 글로벌 서비스가 많지 않고, 국내 대기업 사이트들과 타이포를 좀 잘 쓸 것 같은 이름있는 에이전시, 국내 기반 다국어 서비스들을 중점적으로 찾았습니다.

삼성(Samsung One)이나 ibm(ibm Plex)처럼 자사전용 다국어 서체를 제공하는 회사를 제외하곤 두 가지로 나뉨을 알 수 있었습니다.

1. 국내 — Notosans + Roboto

2. 영문 — Roboto, Proxima nova, inter (요즘 해외 서비스에서 많이 사용하기 시작함)

Helvetica도 있으나 유료 서체이며 대부분 후 순위로 넣거나, CSS Reset 개념으로 넣은 곳들이 대부분이라 제외했습니다.

그리고 의외였던 부분은 생각보다 다국적 서비스들은 국문(Korean) 폰트를 지원하지 않는 점이었습니다. (사이트 접속 시 굴림이나 맑은고딕으로 뜨던데 어떻게 보면 이게 글로벌 스타일 아닌지;;)

아예 처음부터 다국어를 지원하는 글꼴을 제외한 나머지 모두 대체글꼴의 개념으로 국문과 영문이 선언되어있을 뿐 애초에 따로 쓰거나(영문은 영문만 따로 특정 글꼴로, 국문은 국문만 쓰는 식으로) 같이 쓰일때 어우러질 수 있게 별도의 세부 조정을 하진 않았습니다.

Roboto ↔ Proxima nova ↔ Inter

framer에서 inter를 사용한다며 이를 사용하는 게 어떻겠냐 해서 기존의 NotoSans를 기준으로 많이 사용하는 Roboto와 Inter 그리고 Proxima nova를 비교하게 됩니다.

상대적으로 투박한 Noto Sans와 비교하면 나머지 세 글꼴은 좀더 세련되 보입니다. Noto Sans 숫자 9의 Tail은 느슨하지만, 나머지는 덜 느슨해 올드해 보이지 않습니다. (뭣 모르는 진짜 주관적인 의견임을 고려해주세요)

숫자는 Roboto가 예뻐 보이지만, 동일한 크기로 국문과 섞어 쓸 때 작습니다.

Proxima nova 역시 국문과 섞어 쓸 때 작은 게 크게 드러나고 숫자 1과 2의 커닝이 다른 숫자와 달리 너무 붙어 보입니다. 또한 눌러쓴 듯한 느낌 때문에 자칫 귀여운 인상을 줄 수 있고, 국문 Noto Sans과 같이 쓸 때 크기가 작아 부적합 합니다. 그리고 알파벳 소문자 a의 bowl이 너무 못생겼습니다.

Inter는 무난해 보이고 역시 국문에 비해 작지만 X-height가 높아 차이가 크지 않았고 이로 인해 가독성 또한 높습니다. 숫자 2와 3이 아주 조금 좁았으면 좋겠지만 전체적으로 커닝이 어우러지게 잡힌 것 같아 Inter로 결정합니다.

다만, 국문 본문을 medium으로 사용하는데 Inter의 medium과 비교했을 때 Inter의 medium이 Noto Sans의 medium보다 얇아, 한 단계 더 굵은 semi bold로 대체해서 사용하기로 했습니다.

실 서비스에 적용하기

원래는 영문은 Inter, 국문은 Noto Sans KR로 섞어 사용하려 했습니다. 하지만 단순히 대체 글꼴 선언만으로 지정하기엔 각자 다른 글꼴과 글리프 마다 세세하게 조정하기가 현실적으로 어렵고 성능상의 이슈 때문에 HTML의 Lang 속성에 따라 각각 다른 글꼴로 표현하기로 했습니다.

한글타이포그라피 학회에 등재된 다국어 섞어 쓰기를 제어하는 라이브러리가 있으나, Javascript로 일일이 구동되고 무거우므로 서비스에 적용하기엔 무리가 있습니다.

기존 서비스에서 일어의 경우 Noto Sans JP를 뿌려줬으나 서버사이드에서 언어에 따라 선택적으로 웹 폰트를 불러오는 게 아닌 css 상에서 import 하는 방식으로 이루어져 있는데, 이 경우 일어가 아닌 환경에서도 무조건 Noto Sans JP를 불러오게 되고 결론적으로 로딩속도가 느려지므로 제외하기로 했습니다.

프롬디자인 UI LAB 스터디에서 플리토의 김동영 디자이너 발표의 영향도 있는데요, 플리토 서비스에서는 브랜드 지정서체는 브랜드 아이덴티티를 효과적으로 전달하는 수단이 될 수 있지만, 다국어를 지원하지 않으면 사용자에게 독이 될 수 있어서 시스템 폰트를 사용한다고 합니다.

국문에 Inter를 적용하지 않은 이유는 영문서비스처럼 느껴지지 않을진 몰라도 국문과 섞어짤때 라틴알파벳이 무리없이 잘 어우러지기 때문이며, 최종 다국어 섞어짜기(가 아니게 된) 글꼴 세팅은 아래와 같이 결정되었습니다.

• 국문 (Korean) — Noto Sans KR

• 영문(English) — Inter + Noto Sans KR (혹시라도 국문이 있을 경우를 대비)

• 일어(Japanese) 및 기타 — 운영체제에 따른 시스템 폰트

마무리

디지털 폰트에서 Variable 기술이 나오고, 저용량의 압축효율이 높은 woff2 방식이 나오는 등 많이 발전하고 있지만, 편집디자인에서 Indesign의 합성글꼴처럼 세세하게 조정하지 못하는 점이 아쉽습니다. 기본 111,172자 최소 2,350자로 많은 한글 폰트를 웹에서 Weight 별로 불러오는 것도 제한을 많이 받습니다. 기술적으로 더 많이 발전이 이루어졌으면 하는 바람입니다.

저는 타이포그래피에 대한 깊은 내공이 없어 글자 하나하나 조판하는 식으로 하기보다는 국문의 크기와 얼마나 비슷하고 잘 어우러지는지, 숫자의 커닝을 보며 섞어짜기, 다국어 글꼴을 선정한지라 근거와 신빙성이 많이 부족해 더 많은 공부가 필요함을 느꼈습니다.

무엇보다도 이 글을 쓰게 된 무엇이 외국 서비스 같은 느낌이 들게 하며, 그렇게 만드는 명확한 이유를 찾아내지 못한 점이 아쉽습니다.

도움이 되는 글들 (본문에 소개한 글 제외)

• 한글타이포그라피 학회 — 한글과 로마자의 섞어 짜기를 위한 로마자 형태 연구

• W3C — 한국어 텍스트 레이아웃 및 타이포그래피를 위한 요구사항

• Spoqa 기술블로그 — 다국어 환경에 맞게 타이포그래피 세팅하기 — 다국어 반응형 타이포그래피

• 활자공판 — 섞어짜기

최근에 저는 베태랑 UX Designer인 스티븐 후버(Steven Hoober)와 터치 인터페이스에 대한 이야기를 나눴습니다. 후버(Hoober)의 “손가락, 터치 그리고 사람을 위한 디자인” 에서는 다음의 원칙을 권고하고 있습니다.

• 화면 중앙에 주 콘텐츠(Primary)와 동작(Actions) 배치

• 가장자리 부근에 2순위 동작(Primary Actions)과 탭 배치

• 메뉴 뒤에 3순위 기능(Tertiary functions) 배치

• 사용자가 어떻게 플렛폼과 특정 상호작용을 하는지 조사 합니다. 그립(Grip), 수행(Task), 문맥(Context)이 모두 핵심입니다.

다음은 앱을 만드는데 있어 이를 기반으로 디자인하려 노력하는 터치 친화적인 가이드이며, 다른 사람들에게도 추천합니다. Youtube와 Twitter의 모바일 웹에 위 가이드를 시각화 해보았습니다.

더 깊게 파고들면, 실 생활에서 터치을 위한 디자인 하기 위한 후버(Hoober)의 발견법(heuristics)은 모든 기기에 존재합니다.

• 한가지 방법이 아닌 다양한 방법들로 사용자가 기기를 사용할 수 있도록 디자인

• 사람들이 화면의 중앙을 본다. — 핵심 콘텐츠를 중앙에 위치

• 사람들이 화면 중심을 터치한다. — 가능한 핵심 동작을 중앙에 위치

• 사람들은 그들이 본 것만 탭(tap)한다. — 터치 타겟 주변에 여백을 두어 사용자가 탭(tap)하고 상태 변화를 볼 수 있게 한다.

• 사람들은 다양한 방식으로 다른 기기를 사용한다. — 사용자가 UI를 사용하는 방식에 대한 데이터를 수집한다.

왜 이런것들을 신경쓰는 건가요?

터치 상호작용에 대한 UX 리서치 결과는 다음과 같습니다.

• 사용자의 75%가 엄지로 터치합니다.

• 그러나 사용자의 49%는 한 손으로 잡고, 36%는 한손으론 스마트폰을 잡고 다른 손으론 터치하며, 10%는 양쪽 엄지를 사용합니다. (이로 인해 75%의 수치가 약간 오해의 소지가 있습니다.)

• 한 손 사용자 중 67%는 오른쪽 엄지를 사용하며, 나머지 33%는 왼쪽 엄지를 사용합니다.

후버(Hoober)는 10년 넘게 인터렉션 디자인에서 중추적인 목소리를 냈으며 조쉬 클라크(Josh Clark)과 같은 사람들과 함께 “엄지 영역(Thumb Zone)”을 이끌어 왔습니다. 그동안 Thumb Zone은 한 손으로 화면을 터치하기에 가장 편안한 영역으로 여겨져 왔습니다. 하지만 2020년에는 Thumb Zone을 피하세요.

최근 몇년 사이, 사람들이 스마트폰과 태블릿 PC를 어떻게 잡고 만지는가는 더욱 무의미해지고 있습니다. (Thumb Zone에서 말하는 것처럼) 모든 사용자들이 동일한 방법으로 스마트폰과 상호작용 한다는 것은말이 안되지만, 새로운 스티브(Steve)의 연구 결과에 따르면 수년간 제가 따르고 싶어하는 내용들이 있습니다.

사용자는 각기 다른 수 많은 방식으로 스마트폰과 상호작용 합니다. 한 가지 방법이 아니라 사용자가 기기를 사용하는 다양한 방식을 설계 해야 합니다. 대부분의 사용자들은 행동과 상황에 따라 상호작용하며 기기를 잡는 방식을 바꿉니다. 뿐만 아니라 사용자는 손가락을 움직이며 엄지손가락이 닿는 영역을 조절할 수 있습니다.

사용자들은 화면의 중앙을 정말 좋아합니다!

후버(Hoober)의 연구에 따르면 사용자는 콘텐츠를 화면 중앙의 한 위치로 이동 한 다음 해당 항목을 탭하는 것을 선호 한다고 강조했습니다. 그는 읽거나 클릭할 수 있는 주요 항목은 화면의 중앙에 위치해 있어야 하고, 다른 화면(경로)으로 이어주는 보조적인 옵션은 화면의 상단이나 하단에 배치되어야 한다고 제안합니다.

이것은 머테리얼 디자인(Material Design)에서 제안한 하단 바(Bottom Bar)가 잘 동작하는 이유 중 하나 입니다. 하단 네비게이션 바(Bottom navigation bars)는 가장자리에 가까이 위치하며 주요 기능(actions이라 나와있지만 문맥상 기능으로 표기)에 편안하게 접근 할 수 있습니다. 최근 몇 년 동안 하단 탐색 패턴의 인기가 증가한 것은 놀라운 일이 아닙니다.

마무리…

나는 후버(Hoober)의 가이드라인을 충분히 읽는 것을 추천합니다. 다음의 파트들(1, 2, 3)을 읽어보세요. 이 지침들은 훌륭합니다.

추가자료

• 스티븐 후버(Steven Hoober) — 손가락, 터치, 사람을 위한 디자인 (Design for Fingers, Touch, and People)

• A List Apart — 우리는 어떻게 기기를 잡는가? (How we hold our gadgets?)

• UXMatters — 어떻게 유저들이 모바일 기기를 잡는가? (How do users really hold mobile devices?)

• Smashing Magazine — 엄지 존-모바일 사용자를 위한 디자인 (Thumb zone — designing for mobile users)

• LukeW — 스마트폰의 대형 화면을 위한 디자인 (Designing for large-screen smartphones)

• Josh Clark — 터치를 위한 디자인 (Designing for Touch)

해외 레터를 구독하고 있어서 그쪽을 통해 번역했는데, 나중에 보니 관련 글이 많아 놀랐습니다. 후버의 글이 유명한가 봅니다.

윗글에서는 후버의 말도 맞지만 인터렉션에 따라 기기를 잡는 방법이 달라지고 그로 인해 터치 영역도 달라진다고 합니다. 저는 여기에 스마트폰이 커지면서 화면의 세로길이가 길어지는 것도 한몫 한다고 생각합니다.

개인적으로 스크롤 가능한 영역에서 터치를 할때 무의식적으로 중앙이나 손이 쉽게 닿는 위치로 이동한다음 터치하는 습관이 있는데, 이 글보고 놀랐습니다.

몇달전 Facebook혹은 Brunch를 통해서 터치 영역을 가늠할 수 있는 가이드 파일을 누군가 공유했던것 같은데 같이 첨부하려 했으나 찾지 못해서 아쉽습니다. (이 글을 보고 아시는 분이 계신다면 알려주세요.)

그 외에 후버를 국문으로 번역한 글이나, 가볍게 읽으면 좋을것 같은 글을 추가해봅니다. (터치 최소 사이즈 라던가, 일반 PC모니터에서의 주요 영역 등…)

• 모바일 터치 디자인하기 — https://cyberx.tistory.com/196

• 엄지영역(the Thumb Zone) : 모바일 사용자를 위한 디자인 — https://bit.ly/3fKq1iD

• 터치기기를 위한 디자인 팁 9가지 — http://blog.naver.com/olivestone12/220018301370

이번 글 부터는 긴 수식어 대신 원문 출처와 약간의 의견을 추가하며 작성하고자 합니다. 오역은 댓글로 알려주시면 감사하겠습니다.

불만이 있는 고객 중 15%의 고객만이 기업에 불만을 토로한다.
불만은 있으나 드러내지 않는 고객이 70%이상이다.

만족을 얻지 못한 고객의 91%는 그 회사의 물건을 다시는 구매하지 않으며, 최소한 9명에게 자신이 겪은 불쾌감을 이야기 한다.

불만이 있는 고객 중 20%는 거래처를 옮긴다.
고객의 이탈율을 5%줄이면 고객생애가치는 85%의 증폭효과가 있다.

신규고객 획득 비용은 고객유지비용의 5배 소요된다.

Technical Assistance Research Program 조사 중

서비스 이용에 불만이 있을 때 대부분 별다른 피드백 없이 사용하거나 조용히 떠나 버립니다.

소수의 사람만이 직접 불만을 제기하는데 이는 서비스에 대해 애정이 있는 사용자입니다. 따라서 어떻게 대처 하는가에 브랜드경험과 사용자 만족도가 달라진다고 생각합니다.

저는 올해 2분기 OKR(Objectives and Key Results)을 VOC(Voice Of Customer)에서 제기되는 사용성 문제를 디자인적으로 해결하는 것을 목표로 잡았습니다.

개선안의 100%가 반영되지는 않았지만 최근 일부가 적용되어 문제점을 어떻게 풀어나갔는지 글로 남겨보고자 합니다. (실 서비스와 다른 부분도 있으므로 감안해서 봐주시면 감사하겠습니다.)

컨테이너 생성을 어디서 하나요?

작년 하반기 IDE 서비스 리뉴얼 후 꾸준히 제기 되어온 VOC였습니다. 특정 단계를 거칠 필요 없이 대시보드의 바로 우측 사이드에 있음에도 불구하고 사용자가 컨테이너 생성 버튼을 찾지 못하는 이유를 고민하게 됩니다.

컨테이너 생성의 중요도와 달리 명확하지 못한 명도대비

사이트를 흑백으로 전환해 보니 컨테이너 생성버튼을 찾지 못하는 이유를 바로 알 수 있었습니다.

모든 버튼이 WCAG 2.1을 통과하지는 않지만 ⓑ의 경우는 면으로 채워져 있어 상대적으로 인지하기 쉬웠고, ⓐ와 ⓒ는 선으로 표현되어 있으나 채도 높은 색상과 명도 대비가 높은 부분이 일부 있어 상대적으로 인식이 잘 됩니다.

반면 ⓓ(컨테이너 생성)은 단일 색상으로 이루어져 있고, 색의 면적이 좁으며 ⓒ(product hunt)의 주황색에 시선이 묻혀 찾기가 어렵습니다.

정보가 많은 복잡한 부분에 위치

컨테이너 목록은 각종 컨테이너 정보들로 복잡하게 구성되어 있지만 카드 형식으로 크게 묶어 나름대로 정리가 되어 있으며 사용자는 정보를 얻고자 하는 컨테이너 카드에 주의를 집중하면 됩니다.

반면 컨테이너 생성은 좌측/우측으로 나누어져 있다 해도 위에서 파악한 명도 대비 문제, 주변의 자잘한 버튼들로 인해 눈에 띄지 않는다는 점을 발견했습니다.

서비스를 처음 접하는 사용자는 컨테이너 목록부분에 알림메시지가 나오고, 상단부분에 컨테이너 생성에 대한 popover가 나와야 하지만 실 서비스에서는 반영이 되지 않아 빈화면을 중점적으로 보는 사용자 입장에서 컨테이너 생성을 진짜 어떻게 해야하는지 찾기 어려운 문제점도 가지고 있습니다.

생성된 컨테이너가 이미 있으면 컨테이너 문제가 발생하지 않습니다. (어디서 만드는지 이미 경험적으로 아니까요…) 구름IDE를 처음 이용하는 사용자에게 좋은 경험을 주어야 주 고객으로 발전할 수 있는데 그렇지 못한다는 점에서 심각성을 느꼈습니다.

서비스 플랜정보 VS 서비스를 이용하는 부분

구름IDE 대시보드는 서비스 플랜에 따른 자원 가용량을 알려주는 정보들로 이루어진 상단과, 생성된 컨테이너들을 관리하고 실행하며 서비스를 이용하는 실질적인 부분으로 이루어진 하단으로 나누어 집니다.

컨테이너를 생성은 실질적으로 서비스를 이용한다는 것인데, 서비스 플랜과 자원 가용량을 알려주는 부분에 위치한다는 것은 이용 흐름과 문맥에 맞지 않는다는 점을 발견했습니다.

원인파악을 기반으로 디자인으로 개선

Empty 생성버튼 추가, Header 버튼 정리

대시보드 화면에서는 대시보드 링크가 필요 없으므로 제거했습니다. 복잡했던 소셜, 플러그인 버튼과 컨테이너 생성버튼이 혼재되어있던 부분은 한 줄로 정리했으며 배경색으로 채운 버튼으로 변경해 좌측의 소셜, 플러그인 버튼보다 눈에 띌 수 있도록 시각적 위계질서를 부여했습니다.

문맥에 맞춰 컨테이너 리스트에 생성버튼 삽입

컨테이너를 실질적으로 이용하는 부분에 컨테이너 생성버튼을 추가했습니다. 개설된 컨테이너 수와 총 컨테이너 수를 함께 명시해 사용자가 몇 개를 더 생성할 수 있는지 쉽게 인지할 수 있도록 했습니다.

기존에 Header 영역에 있는 컨테이너 생성 아이콘을 제거하는 것에 대한 의견도 있었으나, 갑자기 한 번에 모든 것이 바뀌면 사용자에게 혼란을 가져올 수 있으므로 단계적으로 Fade-out 하기로 했습니다.

컨테이너 생성 문의 및 VOC 0건 달성

2주 전에 대시보드 컨테이너 생성버튼이 적용되었고, 그 이후로 관련 VOC가 더는 접수되고 있지 않습니다.

구름IDE는 개발자들을 위한 서비스이므로 디자이너로서 개발자만큼의 태스크 지식을 축적하는 데에 한계가 있으므로 개선작업을 진행하기가 어려울 때가 많습니다. OKR을 통해 조그맣더라도 무언가 서비스에 기여를 해서 기쁩니다.

본 글은 uxdesign.cc에 기재된 글을 각종 번역기와 의역, 배경지식을 활용해 번역한 글입니다. 최대한 이해가 가기 쉽게 번역했지만, 영어 능력이 좋으시다면 이 글 보다는 아래의 원글을 보시는 것을 권해드립니다. (본 글의 저작권은 Taras Bakusevych 및 UX Collective에 있습니다.)

사용자 인터페이스에서 중심이 되는 인터렉티브 블록을 만들기 위해 버튼 디자인에 대해 알아볼 필요가 있습니다.

올바른 인터렉션 디자인을 위해서 우리는 물리적인 버튼에 대한 기원과 변화의 과정을 살펴봐야 합니다.

기기나 자동차 혹은 시스템을 조작하는 데 있어 작동 원리를 이해하지 못해도 조작이 가능하다는 측면에서 버튼은 놀랍습니다.

Rachel Plotnick(레이첼 플로트닉)은 오늘날 누르는 버튼이 어떻게 나왔고, 디지털 UI에 주요 수단으로 적용이 되었는지 유래와 이유를 설명합니다.

“버튼을 누르면, 알아서 사진을 찍어줍니다.” — Kodak 카메라는 매력적인 문구를 직접적으로 소비자에게 드러냈습니다.

(덧붙임) 과거의 카메라는 조리개, 초점, 셔터속도를 일일이 조정해야 했지만, Kodak 카메라는 버튼 하나로 이를 알아서 해준다는 점에서 위 문장을 이해하면 좋을 것 같습니다.

코닥의 이 문구는 사용자를 매료시키는데 오늘날에도 유효합니다. 오늘날 가전제품 혹은 다양한 장치들이 터치스크린 안에서 컨트롤이 가능하도록 바뀌었음에도 불구하고 물리적으로 누르는 버튼은 사라지지 않을 것입니다. 오히려 물리적인 버튼에서 형성된 행동 습관이 버튼 디자인이 얼마나 직관적으로 사용하기 쉬운지 일깨워 줄 것입니다.

버튼 vs 링크

버튼은 사용자가 수행하려는 동작을 나타내고 전달합니다. 보통 대화상자(Dialog), 양식(Forms), 툴바(Toolbars) 등에 위치하며 버튼과 링크의 차이는 아래와 같습니다.

• 링크는 주로 모두 보기, Roger Wright(피아니스트)의 프로필 등과 같이 다른 페이지로 이동할 때 사용합니다.

• 버튼은 주로 제출(Submit), 병합(Merge), 새로 만들기, 업로드와 같은 특정 작업(혹은 행동)을 수행할 때 사용합니다.

(덧붙임) 링크는 페이지가 완전히 전환되고, 버튼은 페이지 내에 새로운 모달이나 일부분만 바뀔 때 사용된다고도 이해해도 좋을 것 같습니다.

버튼의 상태(States)는 사용자에게 현재 어떤 상태인지를 알려줍니다.

버튼에 올바른 인터렉션과 스타일을 만드는 것은 디자인 프로세스에서 가장 중요한 부분 중 하나입니다. 버튼의 상태(States)는 다른 상태와 주변 레이아웃과 명확히 구별되게 디자인되어야 하며, 구성 요소를 크게 변경하거나 시각적인 방해 요소를 만들어서는 안 됩니다.

Normal — 버튼이 활성화(클릭 가능) 되어 있음을 나타냅니다.

Focus — 사용자가 키보드 혹은 다른 입력 방법을 통해 포커스를 이동하여 해당 위치에 머물러 있음을 강조합니다.

Hover — 사용자가 버튼에 커서를 위치할 때를 나타납니다.
(덧붙임: 모바일 터치 환경에선 active가 명시되지 않을 때 클릭하면 hover 상태가 나타납니다.)

Active — 활성 혹은 버튼이 눌렀음을 나타냅니다.

Progress/Loading — 작업이 바로 이루어지지 않아 요청 사항이 진행 중임을 알리는 경우에 사용됩니다.

Disabled — 버튼이 비활성화되어 현재 사용할 수 없지만, 나중에 다시 활성화 될수 있습니다.

버튼은 다양한 색상, 모양 및 크기로 제공됩니다.

버튼의 가장 흔한 디자인은 모서리가 있는 스타일로, 쉽게 식별할 수 있고 입력 필드(input) 옆에서도 잘 보입니다. 버튼에 적합한 스타일을 정하는 것은 디자인 대상의 목적, 플랫폼 및 지침에 따라 다릅니다. 가장 많이 사용되는 스타일은 다음과 같습니다.

버튼의 스타일은 동작 수행의 중요성을 알립니다.

버튼의 스타일을 통해 중요도를 구분하기 위해서 혹은 다양한 선택지가 있다는 것을 사용자에게 알려주는 일련의 힌트를 제공할 수 있습니다. 일반적으로 가장 눈에 띄는 버튼 (보통 이러한 스타일은 primary라고 말함)과 중간단계의 secondary, 더 낮은 단계인 tertiary를 사용합니다.

기본값이 없는 버튼도 있습니다.

보통 가장 일반적으로 선택(혹은 사용)되는 버튼을 “default”(primary)로 두고 눈에 띄는 강조 상태로 두어 행동을 유도하세요. 이는 대다수의 사용자가 작업을 더 빨리 완료하고 올바른 행동을 할 수 있도록 도와줍니다.

생각하게 하지 마세요.

Don’t Make Me Think (사용자를 생각하게 하지 마!)는 사용성 엔지니어 Steve Krug의 책 제목입니다. (덧붙임 — 실제로 최근 국내에서도 인기가 많습니다.) 책에서 강조하는 점 중 하나는 퍼즐이나 미로를 만들지 않고 사용자에게 인터페이스를 명확하게 전달하는 것이 중요하다는 것입니다. 버튼은 과거부터 시작해 지금까지 다양한 기기들에 적용되면서 어떻게 보이고 작동하는지에 대한 관습이 형성되어 있습니다. 관습(원문에선 표준)으로 보이는 것과 크게 다르다면 사용자는 버튼을 인식하는 데 시간이 오래 걸리고 혼란을 겪게 됩니다.

버튼과 버튼이 아닌 요소(ex_ 배경)에 동일한 색을 사용하지 마세요. 동일하게 사용할 경우 사람들이 어디를 클릭해야 하는지 알기 어렵습니다.

일관성은 속도와 정확성을 향상시킵니다.

“일관성은 가장 강력한 사용성 원칙 중 하나입니다. 특정 동작이 항상 동일하게 행동할 때 사람들은 무슨 일이 일어날지 고민할 필요가 없습니다.” Jacob Nielsen(야콥 닐슨)

일관성은 속도와 정확성을 향상시키고 오류를 방지합니다. 버튼을 디자인할 때 사용자가 통제할 수 있음을 느끼게 하고 쉽게 목표를 달성할 수 있도록 예측 가능성을 높여보세요. 기본 스타일(primary), 두 번째(secondary), 세 번째(tertiary) 스타일을 지정할 때 색상, 모양과 같은 몇 가지 공통 요소를 찾아보세요. 디자인 시스템 내에서 일관성을 유지할 뿐만 아니라 적용되는 플랫폼의 디자인과도 어우러져야 합니다.

원활한 클릭을 위해 버튼을 충분히 크게 만드세요.

버튼은 쉽고 간단하게 누를 수 있어야 합니다. 사용자가 버튼을 실수로 누르지 못하거나 근처 다른 요소를 누르게 된다면 시간이 낭비되고 부정적인 경험이 쌓이게 됩니다.

손가락 터치를 이용하는 모바일 환경을 위해 클릭 가능한 영역을 최소 48x48DP 이상으로 잡아주세요. 이 크기는 화면 크기에 상관없이 물리적 크기가 약 9mm로 나타납니다. 터치스크린에서 누를 수 있는 요소의 권장 크기는 최소 7–10mm 입니다.

아이콘 버튼의 경우 터치 가능한 영역이 아이콘을 넘어 확장되는지 확인하세요. (덧붙임 — 쉽게 말해 padding, 아이콘 주변으로 여백을 줍니다.) 이는 모바일이나 태블릿에만 적용되는 것이 아니라 마우스와 같이 PC 웹의 포인터 장치에서도 동일하게 적용됩니다.

접근성을 위한 디자인

버튼뿐만 아니라 모든 구성요소에 접근성을 고려해 디자인해야 합니다. 바로 위에 언급된 버튼의 크기는 접근성에 영향을 미치는 요소 중 하나였습니다. 이외에 글꼴의 크기, 색상, 대비도 있습니다. 접근성을 충족하는지 확인하는 측정하는 다양한 도구들이 있습니다.

(덧붙임) 접근성과 관련해 도움이 되는 국내 사이트는 NAVER NULI(nuli.navercorp.com) 입니다. 보통 명도 대비는 글꼴의 크기에 따라 달라지지만, 최소 3:1, 보통은 4.5:1 이상이 되어야 합니다.

다음(현 카카오) 다룸(darum.daum.net)도 있지만 업데이트가 되지 않은 지 오래되어서 저는 주로 NAVER NULI를 참고합니다.

이외에 레진코믹스(https://github.com/lezhin/accessibility/), NHN TOAST UI도 도움이 많이 됩니다.

디자이너는 개발자와 긴밀하게 협업하면서 버튼이 스크린 리더에서 잘 작동하는지 확인해야 합니다. 사용자가 특정 행동을 활성화할 때 응답을 트리거하는 요소에 버튼을 사용해야 합니다. role =”button”을 추가하면 스크린 리더에 버튼 컨트롤로 나타납니다. (덧붙임 — role를 사용하면 버튼 요소 외에도 버튼처럼 지정할 수 있지만 W3C에서도 권장하지 않으며, 될 수 있으면 button 그 자체를 사용하는 것이 좋습니다.)

제스처는 생각보다 많은 곳에 적용되어 있습니다.

제스처는 사용자가 터치를 사용해 애플리케이션과 상호작용 할 수 있도록 도와줍니다. 기본적인 터치에서 진화된 다양한 방법(단순 클릭이 아닌 더블클릭, 스와이프 등)을 사용하면 작업을 수행하는 데 있어 시간을 절약하고 다채로운 터치 제어가 가능해집니다.

스와이프 혹은 더블클릭하여 좋아요, 길게 누르기 등은 상황에 맞게 행동을 유도할 수 있지만 아직은 일반 사람들에게 명확하지 않습니다. 대신 이러한 제스처는 이해도가 높은 고급 사용자들을 위한 부가 요소(없어도 그만이나 있으면 좋은 요소)로 사용하는 것이 좋습니다.

좋은 버튼 디자인은 사용자의 행동을 유도하는 이름을 사용합니다.

버튼의 이름(=label)은 버튼의 디자인만큼 중요합니다. 잘못된 이름을 사용하면 사용자가 혼란스러워하고 시간 낭비와 실수가 발생할 수 있습니다.

좋은 버튼 이름은 사용자로 하여금 행동을 취하게 합니다. 동사(ex_ ~하기) 등을 사용하는 것이 가장 좋으며 실제 수행하는 작업에 해당하는 이름으로 사용하세요. — 사용자에게 “장바구니에 추가하시겠습니까?” 또는 “주문 확인하시겠습니까?”라고 묻는 것과 같은 것이 좋습니다.

예, 아니오 또는 제출하기와 같이 일반적인 이름은 사용하지 마세요.

확인/취소 또는 취소/확인, 두 버튼의 위치는 어느 쪽이든 상관없습니다.

둘 다 선택지일 뿐이며, 디자이너들은 자신의 선호도에 따라 몇 시간 동안 논쟁할 수 있습니다.

• [확인/취소]
  이는 순서에 맞춰 자연스럽게 읽힙니다. 사용자가 “확인”이 선택될 가능성이 가장 높다는 것을 알고 있다면 시간을 절약하는 데 도움이 됩니다.
  Microsoft Windows가 이러한 방식 사용

• [취소/확인]
  “확인”을 마지막에 위치시키면 흐름이 개선됩니다. 이전, 다음과 같이 왼쪽에서 오른쪽으로 흘러가는 측면에서 보면 취소 다음에 “확인”이 오는 것이 적절하게 여겨집니다. 또한 사용자가 최종 “확인” 버튼을 누르기 전에 모든 옵션을 검토함으로써 실수와 급한 결정을 막을 수 있습니다.
  Apple은 이러한 방식 사용

(덧붙임) 이 부분에 대해 좀 더 자세히 읽기 쉽게 다뤄진 좋은 글이 있어 추가로 링크합니다.

확인/취소 또는 취소/확인에서 어느 쪽이든 각자 합리적인 근거를 가지고 있으며, 무엇을 선택하던 사용성에 문제가 발생하지는 않을 것입니다. 저는 개인적으로 대부분 대화상자(Dialog)와 같은 동작을 선택하는 UI에 “확인” 버튼을 마지막에 넣었습니다. (주로 mac을 사용하기 때문에 그럴 수도…)

짜증나는 비활성화(Disabled) 버튼

모두가 이런 상황을 한 번쯤 겪어봤을 겁니다. 화면에 몇 초 또는 몇 분 동안 Disabled 된 상태로 머물러져 있는 이유가 무엇이고, 이를 다시 활성화하려면 어떻게 해야 하는지를 모른 채 헤매는 경우를요.

비활성화(Disabled)는 현재의 구성요소를 동작할 수 없다는 것을 알리기 위해 사용되지만, 나중에 활성화될 수 있음을 나타냅니다. 비활성화(Disabled) 버튼은 기본 위치에서 버튼이 없다가 나중에 생겨나면 사용자에게 혼란을 줄 수 있기 때문에 사용합니다.

가능하면 비활성화(Disabled) 버튼을 사용하지 않는 것이 좋습니다. 항상 활성화된 상태로 두는 것이 좋으며, 사용자가 필요한 정보를 입력하지 않은 경우 비어있는 필드(fields)를 강조하거나 알림을 표시하세요.

다음 글에서는 어떤 구성요소를 알아보고 싶나요? 의견 주세요.

추신: 가능한 많은 독자들이 제 콘텐츠를 사용할 수 있도록 하고 싶습니다. 내용이 유용했다면 Patreon https://www.patreon.com/tarasbakusevych에서 저를 응원해 주세요.

번역 후기

처음 가볍게 훑어봤을 때 브랜드의 기원(자기의 가축을 표시하기 위해 불도장을 만든 것부터 시작)과 같은 내용이 있을 것 같아 번역을 시작했는데 뒤로 갈수록 그러한 내용이 아니라서 실망했으나 좋은 내용이 많아 번역하면서 도움이 되었습니다.

사내에서 디자인시스템을 부트스트랩에 커스터마이징해서 반영하는 작업을 하고 있는데 버튼의 상태(status)가 명확하게 나와 있어 지금은 아니지만, 나중에 UI를 할 때 도움이 될 것 같습니다.

접근성 부분은 읽으면서 디자이너도 중요하지만, 개발자분들도 많은 관심이 있었으면 하는 아쉬움이 있었습니다. 개발할 때 모든 요소를 div로만 처리하는데 최소한 role을 지정하고 해당 목적에 맞는 HTML Eletement를 사용했으면 좋겠는데 요구하기가 쉽지 않습니다.

나머지는 알고 있지만 쉽게 적용하지 못하는 부분인데 오랜만에 다시 한번 상기시킬 수 있어 좋은 시간이었던 것 같습니다.

번역이 어려워(사실 제가 직접 해석하는 것 보다 번역기가 99%) 제멋대로 해석한 부분이 몇부분 있는데 잘못된 부분을 알려주시면 반영하겠습니다.

서비스 운영 디자인 업무 중 콘텐츠 관련 디자인을 자주 맡게 되는데 자주 작업하는 부분은 강의를 소개하는 커버 이미지와 광고 배너입니다.

반응형 디자인과 고해상도 스마트폰을 고려해야 하다 보니 @2x의 고해상도 PNG 포맷의 이미지 저장 → 메인 페이지에 이미지가 많아짐 → 사이트 속도 저하 문제가 발생하는 문제를 가지고 있으며, 업로드 용량이 제한되거나 최적화라는 이유로 디자인 팀 내에 tiny PNG(https://tinypng.com)를 자주 사용했습니다.

이 경우 용량은 확실하게 줄어들지만 손실 압축으로 이미지가 거칠어지거나 흐려지는 문제가 있었고 최대한 포맷 특성에 맞춰 상대적으로 저용량 & 고화질의 이미지를 뽑아내고자 사내 위키에 정리한 내용에 살을 덧붙여 공유하고자 합니다.

물론 개발단에서 Lazy loading을 사용하거나 GD Lib과 같은 도구(?)를 사용해 다양한 크기로 Thumbnail화 시키는 방법이 있으며 사실 이게 가장 효과적인 방법입니다.

하지만 위의 방법이 불가능한 상황이 있을 수도 있고, 이미지 포맷에 따른 특성을 잘 이해한다면 최대한 손실률이 낮으면서 파일 크기가 적은 이미지를 만들 수 있으므로 그러한 측면에서(?) 봐주시면 좋을 것 같습니다.

목표

이미지 확장자별 특성을 파악하고, 무분별한 손실 압축이 아니면 따라 적절한 효율의 압축을 함으로써 이미지 손상을 줄이고 궁극적으로 트래픽 절감 및 빠른 로딩 속도를 구현하는 것을 목표로 합니다.

이미지 특성에 따라 확장자 선택하면 용량을 효과적으로 줄일 수 있습니다.

1. 이미지에 포함되는 색상이 단순한 Flat 스타일이면… PNG

PNG는 무손실 포맷으로서, 자체가 스크린샷 등의 포터블한 이미지에 최적화된 포맷으로 화려한 색상이 담긴 이미지를 뽑아낼 경우 효율이 떨어지고 용량이 쉽게 증가하는 특징을 가지고 있습니다.

따라서 색상이 많지 않고 단순한 flat 스타일이라면 png을 사용하는 것이 좋습니다.

2. 이미지에 포함되는 색상이 많은 경우… JPG

반면 이미지에 들어가는 색상이 많은 경우엔 무손실 포맷인 PNG를 사용하면 모든 컬러 하나하나를 담아야 하므로, 이미지 용량이 급격하게 커집니다. 이런 경우 손실 포맷인 JPG를 사용하면 비슷한 색상끼리 엮는 식의 손실 압축을 통해 티는 나지 않지만, 용량이 크게 줄어듭니다.

JPG는 손실 포맷의 특성에 따라 수정할수록 화질이 열화되어 일명 디지털 풍화가 이루어지므로, 꼭 원본 수정 파일을 두고 수정해야 화질 열화를 막을 수 있습니다.

3. 투명도가 0 or 1로 단순한 경우 (알파 값이 없는 투명 이미지)는… GIF

투명한 이미지면 대부분 PNG로 저장해야 하지 않나? 하시는 분들이 계실 수도 있지만 꼭 그렇지 않습니다.

쓰인 색상이 256 미만이고, 알파 값이 없는 투명 이미지라면 gif가 png보다 용량을 더 적게 차지합니다.

혹은 PNG-8으로 저장하는 것 또한 용량을 줄일 수 있습니다. 단, PNG-24와 달리 알파 값을 지원하지 않으므로 IE6에서 사용해야 하거나(IE6 PNG 버그) 많은 컬러가 담긴 이미지가 아니라면 GIF만으로도 충분합니다.

지금은 웹 폰트의 존재로 이미지 폰트를 사용하는 경우가 잘 없지만, gif로 이미지 폰트를 사용하면 글꼴의 안티얼라이싱이 반투명이어서 그대로 내보낼 때 깨지는 경우가 존재합니다. 이때 포토샵에서 outline으로 입혀질 외곽선과 동일한 색으로 1PX만 그려주면, 실제 적용되었을 때 용량은 적게 차지하면서 매끈하게 보일 수 있습니다.

drop shadow가 먹힌 요소 또한 위 글꼴처럼 외곽선을 삽입해 저장하면 gif에서도 매끈하게 처리할 수 있습니다.

4. 한두 가지 단색만 사용한 경우… GIF

바로 위와 마찬가지로, 한두 가지의 단색만 사용할 경우 gif 혹은 png-8 방식이 제일 효과적입니다.

포맷 특성에 따라 이미지의 용량 더 줄여보기

위에 설명한 포맷의 특성에 따라 이미지를 저장했지만, 이미지 저장 시 포함되는 메타정보를 제거해 좀 더 줄일 수 있습니다. 이렇게 화질 손상 없이 최대한 영혼까지 줄이면서 그래도 안 되면 차선책으로 손실 압축으로 저장하는 방법에 대해 알아보고자 합니다.

1. 이미지 자체의 불필요한 데이터 제거

Photoshop을 기준으로 File > Export > save for web (legacy) 클릭 후 나타나는 패널의 우측면에 위치한 Metadata의 속성을 none으로 설정한 뒤 저장합니다.

혹은 JPEG & PNG Stripper(http://www.steelbytes.com/?mid=30)와 같은 프로그램을 사용해 생성된 이미지 내의 메타정보를 지울 수도 있습니다.

2. 무손실 압축

imageOptim(mac)

ImageOptim(https://imageoptim.com/mac)은 제가 가장 애용하는 프로그램 중 하나입니다. 시간은 오래 걸리지만 DRAG & DROP으로 간편하게 작동되며 다양한 압축옵션 선택이 가능합니다.

또한 SVG minify도 지원해 Sketch에서 export 한 SVG 파일도 조금이나마 용량을 줄일 수 있습니다.

PNG and MNG tools (windows)
windows 사용자는 PNG and MNG tools(https://pmt.sourceforge.io)를 추천해 드립니다.

CMD 열고 C:>pngcrush -rem alla -brute -reduce -d “폴더명” *.png를 입력하시면 됩니다.

Compressor.io (Online)
무손실 압축을 지원하고 옵션도 있으나 PNG에서만 무손실 압축을 지원하는 것 같습니다.

lossless 체크 후 압축을 진행하면 됩니다.

3. 손실 압축

무손실 압축을 해도 용량이 크게 줄어들지 않으면 손실 압축으로 용량을 줄일 수 있습니다.

위 본문에서 언급한 tinypng가 그나마 가장 쓰기 쉽고 빠르게 손실 압축을 진행해 주기 때문에 추천해 드립니다.

마무리

센스있는 디자이너는 사실 어그로에 가깝고, 알아두면 좋은 팁 혹은 상식으로 봐주시면 좋을 것 같습니다.

아예 처음부터 tinyPNG로 뽑아내면 될 것을 장황하게 설명하냐? 라고, 생각할 수도 있겠지만, 최대한 화질 손실을 막으면서 적은 용량의 이미지를 만들어내는 것이 목표이고 안될 경우 tinyPNG와 같은 손실 압축을 사용하자는 것이 이 글의 주제입니다.

전공자가 아니므로 이미지 포맷에 대해 잘못된 내용이 담겨있을 수 있습니다. 이 경우 알려주시면 수정하겠습니다.

본 글은 blog.prototypr.io에 기재된 글을 각종 번역기와 의역, 배경지식을 활용해 번역한 글입니다. 최대한 이해가 가기 쉽게 번역했지만, 영어 능력이 좋으시다면 이 글 보다는 아래의 원글을 보시는 것을 권해드립니다. (본 글의 저작권은 Eastern Standard의 Concepts Blog에 있습니다.)

지난 10년 동안 디자이너의 역할은 크게 바뀌었습니다. 데스크톱 환경 디자인에서 다양한 기기를 지원하는 반응형 웹 사이트로, 정적인 환경에서 매우 역동적인 웹 사이트로, 편집 디자인에서 디지털 미디어로 많이 진화했습니다. 이러한 발전 과정에서 디자이너들은 변화에 따라 생겨난 다양한 역할에 적응하고 기술과 어휘를 만들어 나가야 했습니다.

재사용할 수 있는 디자인 구성요소와 디자인 토큰 및 스타일 가이드의 시스템 측면에서 디자이너들은 능숙하게 대하지만, 여전히 대부분의 디자이너는 웹을 다룰 때 보수적으로 접근하고 있습니다. 우리가 지향하는 디자이너의 역할은 이야기꾼(storytellers)입니다. 우리의 일은 고객의 목표를 가지고 최종 사용자에게 매력적인 방법으로 전달하는 것입니다.

디자인 토큰은 색상, 애니메이션, 간격, 글꼴, 그림자 등과 같은 것을 설명하는 디자인 관련 변수를 저장하는 데 사용하는 기본 요소이다.
출처 — https://brunch.co.kr/@thinkaboutlove/288

끊임없이 변화하는 디자인 업계에서 우리는 청중을 끌어들일 뿐만 아니라, 그들을 사로잡아야 합니다. 애니메이션은 우리가 브랜드의 톤과 이야기를 전달하기 위해 디자인에 활용할 수 있는 효과적인 요소 중 하나입니다.

모션을 사용하여 의미 전달하기

우리는 주변의 모든 디자인 요소에 모션을 포함시킬 때 영감을 얻을 수 있습니다. 모션에 대한 영감을 돕기 위한 웹 사이트(dribbble, behance, Pinterest혹은 youtube, Vimeo 등)가 생겨나기 시작했고, 여러분은 비판적인 눈으로 TV를 보는 것만으로도 모션 이론에 대해 많은 것을 배울 수 있습니다. 당신이 보는 모든 TV 프로그램이나 영화에는 모션 디자인의 기본 원칙이 존재합니다. 웹디자이너의 역할은 감독의 역할과 비슷합니다. 캔버스에 있는 UI 요소들은 배우이며, 요소에 움직임을 부여(안무)하는 것입니다.

웹 사이트는 의역입니다. 원문은 ‘culture of inspiration board websites’ 문화에 영감을 주는 보드 웹 사이트라고 표기되어 있습니다.

Office Space의 한 장면을 예로 들어보겠습니다. 영화에 대한 전체적인 맥락을 모르더라도 누군가 위 장면에 관해 설명해달라고 부탁하면 대부분의 사람은 프린터에 분노하고 있다는 것을 알 수 있다고 생각합니다. 영상에 나오는 소리에서는 이를 표현하기 위한 다양한 묘사들이 나와 있습니다. 하지만 음소거로 다시 봐도 등장인물의 신체적인 언어와 영상의 프레임 샷을 통해 쉽게 알아볼 수 있습니다.

좀 더 심층적으로 알아보기 위해 심리학자 프리츠 하이더 (Fritz Heider)와 마리안 시멜 (Marianne Simmel)이 제작한 비디오를 살펴보겠습니다. 연구 과정에서 과학자들은 환자에게 위 영상을 보고 어떤 일이 일어났는지 이야기해달라고 했습니다. 영상을 본 사람들은 자신이 본 객체(모양)에 인격을 부여할 것입니다. 한번 재생해 보세요. 그리고 인격을 부여하지 않고 설명해 보세요. 생각보다 쉽지 않습니다.

모션 디자인은 무성 영화를 연출하는 것과 매우 유사합니다. 고객의 요구를 만족하게 하기 위해서는 제한된 상황에서 작업해야 합니다. 대부분의 사람이 유쾌하거나 긴장감이 도는 애니메이션을 이해할 수 있기 때문에 모션은 효율적이고 보편적으로 브랜드 아이덴티티와 톤을 전달하는 데 효과적이라는 것을 알게 될 것입니다.

디자인 시스템에서 모션을 적용하기에 앞서

디자인 시스템을 만들 때 모든 측면을 고려해야 합니다. 글꼴과 색상을 반복적으로 사용할 수 있는 디자인 토큰으로 생각하는 것이 당연시되었습니다. 모션 또한 마찬가지로 다양한 Javascript 라이브러리와 CSS3가 진화하여 보다 쉽게 웹에서 애니메이션을 구현할 수 있도록 발전됨에 따라 디자인 시스템에서 모션을 정의할 때 반복적으로 사용할 수 있도록 고려해야 합니다.

디자인 시스템을 구축하기 위해 브레인스토밍을 하는 동안(의역: 브랜드 스러움을 찾는 과정), 우리는 종종 고객에게 프로젝트와 관련된 단어들을 알려달라고 요청할 것입니다. 전달받은 단어들은 고객이 의뢰한 작업에 애니메이션을 통해 활기를 불어넣을 수 있는 영감들을 얻을 수 있습니다. 때로는 말보다 더 효과적으로, 우리는 개성을 표현하기 위한 보편적인 도구로 모션을 활용할 수 있습니다.

아래의 예를 들어보자면, 좌우 모양은 모두 같지만, 두 애니메이션은 서로 다른 느낌을 전달합니다. 왼쪽의 애니메이션은 상대적으로 더 부드러운 전환을 통해 우아한 느낌을 주고, 오른쪽의 애니메이션은 빠르게 튀어나오면서 활기찬 느낌을 줍니다.

우리가 사용하는 디자인 툴들은 코드보다는 jpg(정지영상)로 추출하는데, 이러한 제한적인 방식이 가져다주는 부작용으로 디자이너들이 작업물에 대해 어떻게 실현되기를 원하는지 실제 구현이 되기 전까지 알 수 없고 기다려야 한다는 것입니다.

의역: 움직임에 대해 개발자들에게 구현을 요청하고, 구현될 때까지 제대로 잘 반영되는지 알지 못한다는 것을 말하는 것 같습니다. 
아래에 이정영 님의 글 (왜 실제 제품은 디자이너의 프로토타입과 다른가)을 보면 이해하기 쉽습니다.

만약 여러분이 디자인할 때 디자인에 모션을 적용하는 방법에 대해 생각하지 않고, 모션이 구현될 때까지 기다린다면 여러분은 자신의 이야기를 더 잘 말할 수많은 기회들을 놓치고 있는 것입니다. 그에 따라 말이 안 되는 사이트가 나오게 될 수도 있습니다.

예를 들어 모달이 아래에서 왼쪽으로 미끄러지게 구현되면 사용자를 당황하게 하고 혼란스럽게 하는 문제가 생깁니다.

본격적으로 CSS 모션 적용해보기

가장 간단한 수준에서 CSS 애니메이션은 세 가지 변수로 구성됩니다.

• 애니메이션 속성 (property)

• 애니메이션 지속 시간 (duration)

• 애니메이션 타이밍 기능 (timing-function: ease-in 과 같은 속성)

transition: [property] [duration] [timing-function];

여기서 “속성(property)”는 애니메이션을 적용하려는 CSS 속성을 나타냅니다. transform (for animating position, scale, rotation), opacity, color (혹은 background color)또는 기타 원하는 속성이 해당됩니다.

지속 시간 (duration)은 시스템화할 수 있는 애니메이션의 첫 번째 요소입니다. 애니메이션 길이를 디자인 시스템상에서 표준화하고 정의함으로써 프로젝트에 애니메이션을 쉽게 유지 보수할 수 있습니다.

타이밍 기능 (timing-function)은 애니메이션이 재생되는 시간 안에서 속성이 얼마나 빨리 동작하는지를 나타냅니다. 어렵죠? 아래 gif 애니메이션을 봐주세요.

모든 사각형이 가로지르는 시작과 종료 시각은 동일하지만, 가로지르는 동안 각각 다른 속도로 움직이는 것으로 보입니다. 위 이미지에 있는 5개의 속성(Linear, Ease, Ease-in, Ease-out, Ease-In-Out)는 CSS에 있는 기본 속성입니다. 다. 단순히 hover, foucs시 색상 변경과 같은 간단한 애니메이션을 나타내기엔 충분하지만, 브랜드 스러움(브랜드의 가치 혹은 특성)를 나타내고자 할 때에는 Cubric-Bezier으로 표현하는 방법을 공부하고 싶을 것입니다.

Cubric-Bezier을 사용하면 한 요소가 평면 위를 이동하는 속도를 지정하여 자유롭게 정의할 수 있어 브랜드 애니메이션을 정의할 때 브랜드다움을 나타낼 수 있도록 상세한 조정이 가능합니다. Cubric-Bezier의 개념과 방정식을 이해하는 것은 조금 어려울 수 있지만 감사하게도 일부 친절한 사람들이 좀 더 쉽게 이해할 수 있고 다룰 수 있는 도구와 속성값을 만들었습니다.

직접 값을 만들거나 easings.net에서 일부 값을 가져와서 타이밍 기능 (timing-function)에 적용해 보세요. 이를 통해 디자인 시스템 전체에서 일관된 애니메이션을 정의할 수 있으므로 개발자와 디자이너가 더 행복해지고 사이트를 보다 일관성 있고 통일된 느낌으로 만들 수 있습니다.

매우 효과적이라는 것이 알려졌기 때문에 앞으로 애니메이션은 고객의 이야기를 전달하고 최종 사용자들을 끌어들이는 중요한 요소로 남을 것입니다. 그리고 이러한 접근 방식을 다루는 형식은 달라질 수 있지만 전략은 그대로 유지될 것입니다. 고객을 고려하고 그에 따라 디자인하세요!

번역 후기

타이밍 기능 (timing-function)은 AfterEffect을 한 번쯤 다루어 보았다면 다들 이미 알고 계셨을 겁니다.

저는 KAKAO MAP 프로모션 사이트의 아이폰 목업 안의 스크롤 되는 애니메이션을 베껴 제 포트폴리오에 적용하면서 Cubric-Bezier에 대해 알게 되었습니다. 외국 디자인을 벤치마킹하며 애니메이션을 그대로 복사/붙여 넣기 하면서 Cubric-Bezier의 중요성과 효과는 알고 있었으나 그냥 느낌대로 괜찮으면 가져다 쓰는 식으로 사용했습니다.

업무에서 바뀐 디자인 시스템에 Transition을 적용하면서 브랜드 구성요소의 하나로써 브랜드다움을 나타낼 수 있고, 감정을 표현할 수 있다는 것을 알게 되었습니다.

국내 인기 있는 에이전시 Plus-X의 강연을 보면 작년 말 이후로 이에 관한 슬라이드가 추가되어 있습니다. 특히, 새로 개편된 Plus-X 사이트를 뜯어 보며 react 기반으로 구성되어 scss로 Transition에 대해 컴포넌트화시킨 부분도 열심히 보고 영감받고 있습니다. (위에서 말한 디자인 시스템화)

Adobe, Microsoft 디자인 시스템, 해외 서비스들 또한 뜯어 보며 많은 영감을 받고 있고요… 지금은 업무 때문에 Transition을 다루다가 멈춰져 있는데 가능할지 모르겠지만 모션을 적용하는 것에서 멈추는 것이 아닌 시스템화하는 것이 저의 목표입니다.

번역하면서 공부가 많이 되었습니다.

참고하면 도움이 될 두 가지의 글을 소개하며 마무리합니다.

운 좋게 할인 행사를 통해 데이터·전화·문자메시지(요즘은 MVNO에서 할인한다 해도 이전 행사가격보다 비쌉니다.) 를 14년도 알뜰폰 요금제 가격으로 신규 가입했습니다.

요금제 부담을 낮추었다는 안도감은 잠시, 이전에 휴대전화 번호를 바꾼 사람이 번호를 바꾸지 않아 여러 곳에서 문자메시지가 오기 시작했습니다. 법이 강화되었는지 몇몇 곳은 수신 거부 전화번호를 첨부해 직접 바꿀 수 있었지만, 일부 쇼핑몰이나 협회 등에서 오는 연락은 직접 거부요청을 해야 했습니다.

이미 번호를 새로 받은 여러 사람들의 불편함이 있었고, 010 번호 통합 이후 오래된 부분이라 이러한 문제를 해결할 수 있는 가이드가 정립되었다고 생각했지만, 아니었습니다.

얼마 전 3곳의 쇼핑업체에서 어떻게 고객에게 응대하는지 사용자 관점의 후기를 남겨봅니다.

쿠팡

고객센터를 통해 전화를 걸었으나 이런 경우는 처음인지 당황해하시어 상담이 순조롭지 않았습니다.

결론은, 직접 사용자가 쿠팡에 로그인해서 바뀐 번호를 인증하면 이전 번호 사용자에 등록된 전화번호는 해지된다는 답변을 받았습니다.

쿠팡을 이용하지 않는 비회원일 경우에는 해결이 불가능해 보이고, 무조건 회원이 해당 번호를 인증해서 등록해야 하는 식이었습니다.

저는 회원인지라, 회원 아이디를 알려주면 바꾸어주겠다고는 했지만, 계정 아이디를 몰라 (장기 미이용자) 나중에 따로 PC에서 전화번호 인증을 거쳤습니다.

11번가

큰 기업이어서 그런지 가장 만족스러웠습니다. 상담 가이드가 이미 정립되어 있어 보였고, 바로 제 3자 SMS 차단이라는 명칭으로, 전화상으로 바로 해결할 수 있었습니다.

회원·비회원 여부를 묻지도 않고 바로 처리해주고, 문자메시지로 결과를 알려주는 점이 좋았습니다.

CJ mall

문자메시지 거부는 아니고, 주말에 채널을 돌리다 좋은 상품이 와서 자동 주문 전화를 걸었는데 ○○○ 회원이 맞으시면 ○번, ■■■회원이 맞으시면 ■번을 눌러주세요. 라는 안내가 참신했습니다.

○○○은 본인이었으나, 이미 cj one 통합 정보에 최신번호로 반영된 상태인데 왜 굳이 전 사용자를 묻는지 이해할 수 없었습니다.

대부분의 회사가 실명인증이라는 형식으로 주민등록번호 대신 휴대전화 인증을 진행하며, 또 고객센터에 전화를 걸면 발신 번호를 알 수 있음에도 쉽게 수신 거부를 진행할 수 없는 점이 아쉬웠습니다.

개인정보 보호 등의 어떠한 이유가 있다면, 원 통신사에서 집 주소변경 서비스 알람 서비스처럼 번호가 바뀌거나 해지되면 자동으로 통보해 주는 서비스가 지금이라도 나와야 하지 않을까? 생각해 봅니다.

• 조성제 — Intended motion design in branding (브랜딩에서 의도된 모션 디자인

• 김동영 디자이너 — UX부터 데이터 드리븐까지 디자이너 스택 변천사

발표자료가 아직 공개되지는 않았습니다. (마지막 6주차 발표자료와 함께 공개 예정)

브랜드 아이덴티티를 모션에 접목해서 활용하는 부분이 꽤 신선했습니다. (물론 그전에도 우버 리브랜딩이나 JTBC / MBC ID 를 보면 없는 것은 아니지만…)

데이터 드리븐에 관한 내용은 흥미로웠으나, 디자이너 스택변천사 부분은 당시 토론하시는 분들이 많아 대화를 나누진 못했지만 저는 약간 부정적으로 보는 부분도 있었습니다.

Intended motion design in branding (브랜딩에서 의도된 모션 디자인)

Premier League

스포츠를 좋아하지 않아 잘은 모르겠지만, Premier League라는 잉글랜드축구협회가 운영하는 리그가 있습니다. 프리미어 리그에서 25주년을 맞아 중계방송에 사용하는 영상 그래픽의 브랜딩을 진행했습니다.

사각형을 기반으로 골, 패스, 드리블과 같은 축구에서의 행위(?) 를 모션으로 표현화를 시키고 이를 일종의 컴포넌트화 하여 영상그래픽에 적용한 부분이 인상깊습니다. (이와 비슷하게 SONY의 PS4 영상도 끝내줍니다.)

강렬한 색체와 굵기대비를 준 타이포그래피가 극박하고 알 수 없는 스포츠의 세계를 잘 표현해주는 것 같습니다.

현재 사이트 리뉴얼을 진행하면서 부분부분 전환효과나 모션이 들어가는데 효과에 대한 규칙이나 시간등이 정해져 있지 않아 뒤죽박죽 난해함을 많이 느끼는데 반성하게 되었습니다.

Fox Sports

Like, Totally
Launched in 2013, Fox Sports Netherlands is, as its name implies, the Dutch version of Fox Sports, consisting of seven…www.underconsideration.com

역시 모르는 스포츠관련, 폭스 스포츠 채널 리브랜딩 프로젝트 입니다.

기존의 로고를 좀더 단순화 시켰으며 토탈풋볼에서 영감을 받아 아이덴티티 시스탬을 구축했다고 합니다.

정사각형을 기반으로 한 그리드와, Sparta라는 새로운 서체를 개발했고 이를 방송 모션그래픽과 각종 인쇄물에 반영했습니다.

특히 Goal을 표현한 것을 보고 심장이 찌릿했습니다. 글자와 그리드를 가지고 골을 넣었을 때의 감성을 율동감있게 표현했기 때문인데요, 그냥 보면 쉽네 이래도 글자만으로 율동감을 주기란 쉽지가 않습니다. (단순한 웹 디자인에서도 문단의 흐름을 고려한 글줄길이 때문에 몇번이고 엔터와 백스페이스키를 누르는걸요.)

영상에서도 마찬가지로, 개발한 서체와 정사각형에 기반한 그리드 시스템을 모션에 반영하여 역동적이고 재미있는 영상을 만들어 냅니다.

최근 PlusA에서 올라온 삼성화재 브랜드 포토제작기를 보며 다른 디자인 분야(?) 이지만, 위 영상 또한 하나의 브랜드를 위한 톤엔매너 라는 생각이 들었습니다.

이를 웹으로 끌어오면 단순히 PlusA 처럼 쓰여지는 사진의 톤엔매너를 다룰 수도 있지만 그 안에서 적용되는 수 많은 UI의 동작방식과 애니메이션 또한 브랜드를 잘 나타낼 수 있는 톤엔메너 요소로 활용할 수 있겠다라는 생각이 들었습니다.

이를 위해선 디자인하고자 하는 대상의 브랜드스러움이 무엇인가? 에 대해 끊임없이 질문해야 겠지요… (PlusX에서 강조하는 말인데 참 좋아하는 단어입니다.)

UX부터 데이터 드리븐까지 디자이너 스택 변천사

데이터로 기획과 디자인을 하다.

각종 도구(Google Analytics 혹은 자체개발 엔진)을 통해 데이터를 통한 정량적인 분석이 가능해지면서 디자이너의 직관/주관적인 판단보다 수치를 이용한 객관화된 분석이 가능해졌습니다.

지금도 그렇고, 기존까지는 심미적인 이유나 혹은 주관적인 이유로 디자인을 했다면 이제는 분석도구를 통해 디자인 결과물에 대한 좋고 나쁨을 객관적으로 판단할 수 있기 때문에 이유있는 디자인이 가능해지고, 클라이언트를 설득할 수 있게 변화했다고 생각합니다.

물론 이에 대해, 아직 SEO등 데이터를 분석하는 능력을 디자이너들과 개발자들에게 까지 요구하면서 새로 공부해야할 것이 생김과 더불어 데이터에 대한 접근권한, 따로 공부하려면 축적된 실제 서비스 데이터가 있어야 하는데 그것이 없어 제대로 공부를 할 수 없다는 이야기들이 오갔습니다.

실제로 저 또한 비슷한데요, 통계 도구에 대해 어떻게 다루는지는 모르지만 광고집행이나 서비스를 론칭하면서 어느 부분에 방문지표가 높은지등을 알고싶지만 마케팅팀만 알고 있으며 이에 대한 접근권한이 없습니다.

현재 이를 잘 활용하고 있는 회사가 ‘데일리 호텔’과 ‘쿠팡’, ‘마켓컬리’ 로 보입니다.

진입장벽이 높고, 전문성 또한 요구되지만 데이터를 분석하고 이를 디자인에 반영할 수 있게된다면 설득력 있는 디자이너로 발전하지 않을까 생각해봅니다.

심미적인 가치가 단순히 시각에만 머물지 말고 즈니스나 다른 영역과 엮일 때 기존보다 더 큰 빛을 발휘할 수 있다.
이다윗 디자이너

그렇다고 심미적 요소를 배제할 수는 없습니다. 심미적인게 우선이 되어야 하니까요… 심미성을 기반으로 데이터를 활용한 디자인이 도출되어야 한다고 생각하고 공감합니다.

디자인 가이드·시스템

스터디에서는 디자인시스템과 프로토타이핑 툴이 보급되면서 UI 설계와 작업에 투자하는 시간이 줄어들었음을 언급하며 짧게 지나갔습니다. 그러면서 어떻게 해야 효과적으로 디자인 시스템을 활용할 수 있는가에 대해 이야기 했습니다.

보통 신생 스타트업이나, 시장에서 경쟁중인 업체에서는 잦은 변화로 디자인 시스템이 구축되지 않고 경쟁에서 이겨 어느정도 안정화가 되면 그때부터 디자인 시스템을 구축한다고 합니다.

물론 윗 글처럼, 서비스나 국가를 확장하거나 폴랫폼이 다양화 될때 아이덴티티가 파편화되는 것을 막기위해 지정하는 것도 있습니다. (저는 이 경우에 속합니다.)

디자인 시스템이라 하면 1차적으로 디자인 내적으로 사용하지만, 2차적으로는 개발 할 때 디자인 수치등을 개발자가 활용하기 쉽도록 하기위해 구축하기도 합니다. 하지만 실제 실무를 경험하면서 느낀점은 개발자들이 디자인 시스템을 숙지하지 못하고 제멋대로 적용하거나 기존에 있는 코드들을 복붙하는 경우가 많았습니다.

디자이너로 입사했지만 마크업을 진행하면서 아무리 유료도구를 사용하더라도 개발자들이 보기 어렵게 구성되어있는 점을 알 수 있었습니다. (저는 주로 스케치파일 자체를 받아서 열어봅니다. 이미지도 제멋대로 뽑아낼 수 있고 편하거든요.)

이러한 측면에서 디자이너들에게만이 아닌 원활한 업무 커뮤니케이션을 가능케 하는 좋은 디자인 가이드는 무엇인가?에 대해 생각해보게 되었습니다.

Full-stack Designer

윗 글과 발표내용은 차이가 큽니다. (원글은 고충을, 발표에서는 그래서 디자이너는 개발에 대한 지식을 갖추어야 한다.)

개발을 이해하면 좋은 점

1. 넓은 시야를 가질 수 있다.

2. 개발자와 원활한 커뮤니케이션을 할 수 있다.

3. 본인의 전문성을 높일 수 있다.

4. 작업 시 개발에 대한 고려사항과 문제를 판단할 수 있다.

스터디에서는 긍정적인 측면만 보여줬지만, 단점 또한 존재합니다.

이것저것 다 할줄아는 디자이너가 물론 좋지만 그것은 주 업무인 디자인을 잘 하고 + α 가 되었을 때의 이야기 일 뿐, 디자인을 못하는데 다른거 할줄알면 아무런 메리트가 없습니다. 또한 α는 이미 그쪽을 전문으로 하는 직업군이 있는데 말이죠.

학교 다닐때도 학과 및 요즘 디자인대학 트렌드가 인터렉티브 미디어 디자인에 특화되어 있는지라 코딩을 할줄 알아야한다고 강조하는데, 저는 이러한 점에서 풀스택 디자이너를 매우 안좋게 봅니다. (물론 디자인 풀스택이 코딩만 해당하는게 아니고 BX/UI/GUI/ILLUST/MOVE를 넘나드는 것이지만요.)

실제로는 풀스택 디자이너를 바라는 회사도 없다. 
단지 개발을 이해하는 디자이너를 찾을 뿐!
스터디 PPT 내용 중 —

이러한 회사는 디자인 전문 회사 (에이전시)나 중견이상 급의 회사에만 있다는것이 저의 짧은 생각입니다.

더불어 풀스택 디자이너로서 장점에 해당 하려면 디자인에 대한 연차가 쌓이고 그 후 +α 요소로 공부해 장점으로 내세우는 경우에만 해당하지 않을까 생각해봅니다.

• 정현빈 디자이너 — 자동차 인포테인먼트 시스템 트렌드 조사

• 김정완 개발자 — AR/VR Interface Design

4기 UI LAB 스터디 4주차에서는 자동차 인포테인먼트 시스템 트렌드와 AR/VR 인터페이스 디자인을 볼 수 있었습니다. 공개범위(권한)내에서 링크와 수업내용과 제 생각을 덧붙여을 정리하고자 합니다.

자동차 인포테인먼트 시스템 트렌드

장롱면허에 자차를 소유하고 있지 않고 자동차에 관한 큰 관심은 없지만, 테슬라에 관심을 가지며 디자이너가 어떻게 UI/GUI/UX 풀어내는지에 대한 호기심은 가지고 있어서 흥미로운 주제였고, 재미있는 내용 또한 많았습니다.

Infotainment (인포테인먼트)

정보(information) + 즐거움 (entertianment)의 합성어

처음 자동차가 발명된 이후 항공기의 영향을 받아 계기판이 채워지고 각종 운전 편의기능과 오락적인 요소들이 추가됨. 2000년대 이후 스마트폰이 나오면서 무선인터넷과 연결되어 더 풍요로운 엔터테인먼트를 제공하고 있음.

인포테인먼트 사례로 아래의 3개를 제시했습니다.

1. Tesla (17인치 대시보드)
   - 모든 기능이 터치스크린에 담겨있음.
   - 촉각 피드백이 없고, 기능들의 위치가 적절하지 않으며 불완전한 정보를 쉽게 노출함

2. Mercedes Benz (터치패드와 터치 디스플레이)
   - Mbux라 불리우는 인공지능과, 처치스크린, 터치패드, 휠 터치 기능
   - 제스쳐 인식기능 또한 있는데, 이 부분은 랜드로버 SUV(아마도?) 손동작으로 천장 도어를 열고닫을 수 있는 기능처럼 생각하면 될것 같습니다.
   - 헤드업 디스플레이 (아이콘 디자인 등이 법규, 사용자 인식측면에서 제한적이고 중요함 + 디스플레이가 나오면서 시선이 분산되기 때문에 빠지는 추세)

3. Byton (48인치 풀 디스플레이)
   - 48인치 풀 디스플레이, 7인치 스티어링 중앙 디스플레이, 센터콘솔 8인치 디스플레이
   - 개인화 기능
   - 밴츠와 비슷하게 제스쳐 인식 기능

운전시, 터치스크린은 정확히 어떤 위치(기존 물리적 버튼은 몇번째나 손끝의 촉감으로 보지 않고도 상용 가능)를 알 수 없는 문제가 있어 기피하는 것으로 아는데 테슬라를 기점으로 서서히 디스플레이의 역할이 커지는 것 같습니다.

스터디 프레젠테이션에서는 나오지 않았지만, 컴퓨터 및 디스플레이가 삽입됨으로서 기존 아날로그 시스템과 달리 갑자기 다운된다던지, 리부팅 혹은 죽었을 때의 문제점 또한 존재하고 있습니다. (테슬라가 이부분에서 고질적인 문제를 갖고있는 것으로 알고 있습니다.) 또한 네트워크에 연결되면서 보안문제도 있구요…

운전자들이 터치스크린과 관련없는 작업을 수행할 때도, 눈이 화면으로 이동하는 경향이 있기 때문에 터치스크린은 어쩌면 가장 기본적인 ‘운전’ 측면에서는 좋지 않아 보였습니다.

훌륭한 인포메이션은 — 도로에서 사용자의 시선을 빼앗으면 안된다.

차량 대시보드 디자인에서 중시되어야 할 3가지 요소

Conceal (은폐)

• 사용자가 주행중일 때는 불필요한 정보를 숨겨야 함.

• 자동차 사용 설계는 스마트폰 사용설계와 동일한 방식으로 접근할 수 없음.

Anticipate (예측)

• 운전시 필요한 정보를 예측해야 함.

• 문제에 대한 알람만 주는 것이 아닌, 다음 행동을 할 수 있도록 예측해주어야 함.
   (전기자동차 용량 부족시, 경고만 뜨는 것이 아닌 충전소 안내)

Personalize (개인화)

• 운전자 개인에 맞게 운전환경이 바뀌어야 함.

• 단순한 운전환경이 아닌, 좀더 개인화에 맞추어진 개인 공간으로 변화중

UX, UI 디자이너가 디자인할 수 있는 영역은 기술의 발전에 따라 늘어갈 것.
디자이너들은 각 분야에 적합한 시선을 가지고 디자인할 수 있어야 함.

과거 자동차는 이동수단에서 주거 수단으로 바뀌어짐 (하드웨어가 발전하면서 공간이 넓어짐)

AR/VR Interface Design

각종 신 사업에서 VR에 대한 투자를 지속적으로 하고 있다지만, 실질적으로 일반 소비자들이 체감할 정도 까지 발전/상용화 되는 것 같지는 않습니다.

시간이 꽤 지난지라, 발표자료를 봐도 잘 기억이 안나 노트에 정리한 내용을 거의 그대로 적었습니다.

따라서 왜 VR이 쓰이질 않는 것일까?에 대해 다루었습니다.

VR — 치킨과 계란싸움 (콘텐츠가 먼저냐, 디바이스가 먼저냐)

발표 및 토론과정에서는 국가 법률 문제, 디바이스의 가격 및 착용문제점들에 대해 의견을 나누었습니다.

VR과 AR의 가장 큰 위험은 아래와 같이 볼 수 있습니다.

• 불확실한 산업

• 실용성 (게임용이 주고, MS처럼 산업용은 전무함)

• 마켓이 정체

주로 쓰이는 곳은 영상매체였으며 (VR의 청사진을 많이 제시함)
UI Workflows을 사용하거나, Backckground 설계 (360도로 말려있는 것을 2D용으로 만들기 — 360도 → 3600px / 180도 → 1800px)를 통해 사람이 한눈에 볼 수 있는 UI VIEW 제작했습니다.

• 군사쪽 VR 콘텐츠 소모 많음.

• 애니메이션 공각기동대 참고하면 좋음.

오픈 세미나 이후 첫 스터디 첫 참관인데 재미난 이야기들이 많았습니다. 공개 범위(권한)내에서 링크와 수업 내용과 제 생각을 덧붙였을 정리 하고자 합니다.

• 이정희 디자이너 — UX디자이너들이 많이 하는 실수

• 김민주 디자이너 — 멀티 디바이스, 멀티 플랫폼에서의 UX 디자인

멀티 디바이스, 멀티 플랫폼에서의 UX 디자인

디지털 디바이스 플랫폼은 PC → 스마트폰(iPhone) → IoT, 웨어러블 순으로 진화해 왔습니다. 점점 모바일과 웨어러블 디바이스는 늘어나고 있으며 2010년에는 전 세계 물건의 2.7%가 서로 연결될 것으로 보입니다. (1인당 기기 7개) 다양한 기기끼리의 연결도 있지만, 인터넷에 연결된다는 의미로도 해석이 가능할 것 같습니다.

이러한 추세에 따라 멀티 디바이스·플랫폼을 반영한 디자인사(Design thinking)와 필요하며, 기존의 스크린 기반의 디자인에서 탈피(Outside of screen ecosystem)해야 합니다.

3C Frame work (Consistent, Continuous, Complementary)

1. Consistent (일관성)

똑같은 콘텐츠를 여러 기기에 넣되 각 디바이스 특성에 맞춰 최적화 하는 것을 뜻함.

일관된 주요측면

• 핵심 기능이 모든 기기에서 일관되어야 함
  ex_ nest 온도조절기  —  ios / 오프라인 기기

• 정보구조 및 용어가 모든 기기에서 일관되어야 함

• 모든 기기에 일관된 시각 디자인이 적용되어야 함

최적화 주요측면

• 각 기기의 레이아웃에 맞게 최적화

• 각 기기의 조작 방식에 맞게 최적화
  ex_ Google의 STADIA 또한 이것에 해당될것 같아 추가. (요즘 클라우드 게임이 뜨고 있음.)

• 폼팩터(기기의 물리적 모양이나 외향적 특성)에 맞게 최적화 
  ex_ Apple Pad OS 키보드 갈라짐, 삼성 DeX

2. Continuous (연속성)

한 기기에서 작업이 끝나고 다른 역할로 매끄럽게 이어지도록 경험을 더하는 것.

단일 활동 흐름
하나의 태스크로만 이루어진 활동

• Netflix를 모바일에서 보다가 집에서 TV로 이어서 보기

• 일관성의 최적화 부분의 예시인 Google의 STADIA 또한 이것에 해당될것 같음. (PC-태블릿-모바일 어디서든 게임 이어서 가능)

• Apple icloud 기능 (맥에서 작업한걸 패드에서 혹은 모바일에서 이어서 가능)

순차 활동 흐름
여러 개의 태스크를 통해 목적 달성

• Airbnb를 이용해 여행을 할 때 까지 여러개의 태스크를 거침

3. Complementary (상호 보완성)

여러 기기가 협력하는 기기의 형태나, 한 기기가 나머지를 제어하거나 두가지가 동시에 이루어지는 경우.
여러 케이스로 크로스가 될 수 있어서 가장 중요함.

관계성에 따른 구분

• 협력
  각자 다른 역할의 여러 기기가 하나의 경험을 위해 협력
  ex_ 리얼레이싱2 파티플레이

• 제어
  주요 경험이 한 기기에서 일어나고 다른 기기는 그 경험을 제어
  ex_ 갤럭시 노트 10에 지원되는 플레이 갤럭시 링크

중요도에 따른 구분

• 필수기기
  경험의 필수적인 부분을 담당하며 필수기기가 없으면 서비스이용 불가
  ex_ chopper 2처럼 아이패드의 게임화면, 아이폰의 컨트롤러가 모두 있어야 하는 경우, 크롬캐스트(제어, 필수기기 — 넷플릭스를 보기위해 크롬캐스트가 필요, 없으면 못봄)

• 부가기기
  UX에 깊이를 더하거나 컨텐츠나 기능을 더 풍부하게 하기 위해 추가하는 기
  ex_ Pad Racer처럼 아이패드가 여러개가 있으면 게임화면이 확장이 됨, google home mini (협력,부가기기 — 여러 구글미니가 있으면 도움이되나, 없어도 그만)

결론

• 멀티디바이스가 일상화 된 이후 습관적으로 PC를 켜지않고 침대에 누워서 스마트폰을 만지작거리게 되었음

• 다양한 목적과 형태를 지닌 IoT기기가 늘어날 수록 이 부분을 신경써서 디자인 해야함

아예 디바이스에 따라 달라지기도 하지만, 삼성 DeX의 경우 단일 디바이스로 어디에 연결하느냐에 따라 달라지며, 3C Frame Work에 모두 속하기 때문에 흥미로움.

공부에서는 대부분 서비스 플랫폼을 기반으로 설명했으나, 생산성 (개발도 구 등)에도 적용해야 할 필요가 있어 보임.

• https://theblog.adobe.com/ux-design-strategy-for-multiple-devices

• https://ux.stackexchange.com/questions/107410/design-guidelines-for-a-multi-screen-or-multi-device-ecosystem

• https://www.oreilly.com/library/view/designing-for-the/9781491971468/ch05.html

• https://www.lollypop.design/blog/2017/july/designing-for-different-screens-and-devices

UX 디자이너들이 많이 실수하고 간과하기 쉬운 규칙들

UX 디자인을 할 때 주의해야할 점들

1. 워크 플로우의 인식 통합

사용자의 행동 패턴을 무시하면 안 된다. (이 부분은 이해가 잘 가지 않았음)

• 갤럭시 워치 액티브 2
  밖에 나가기 전 현재 옷을 사진으로 찍으면, 알고리즘으로 시계 패턴이 옷에 따라 바뀜.

• 키오스크
  자주 주문하는 상품이 있어도, 반복된 흐름을 거쳐야 함.
  박막례 할머니 키오스크 사용기 참고 (어르신들에게 어려운 단어, 위치, 배열 등)

• 노치 디자인
  노치가 없는 부분에 맞추어 바뀐 디자인, 하단 홈버튼이 사라짐을 반영한 디자인

2. 배경정보 얻기

유사한 제품에 대한 사례 연구가 중요하고, 벤치마킹해야 한다.
(과거 T Academy에서도 외국의 잘 나온 앱이 있다면 베끼라고…)

3. 페르소나 정의

발표 중 실무에서 받은 자료를 잠깐 보여주셨는데 학부생 때의 뻔한 페르소나가 아닌 성별, 방문자, 나이, 등에 기반해 n차 분류와 타겟을 분석하고 핵심 타깃과 취약 타깃 등 20페이지가 넘는 세분된 정리된 자료와 이를 기반으로 페르소나를 정의하고 더 나아가 방향성까지 제시해 매우 흥미로웠음.

4. 웹 규칙 따르기

복잡해 보이는 디자인과 의미 없는 단순 나열을 피하기. Apple, Android 플랫폼의 기자인 가이드 혹은 NHN AD 블로그(https://blog.naver.com/uiux_lab) 등을 참고하면 좋을 듯.

5. 사용자 패턴 이해하기

이미 표준으로 자리잡은 문제가 없는 기능 혹은 디자인을 억지로 바꾸지 말것.

6. 윤리적 문제 항상 염두에 두기

• 사회적 이슈를 아무 때나 쓰지 않기
  (페미니즘, 일제 등의 논란을 두고 마케팅에 사용)

• 이메일, 팝업, 푸시 알림이 공격적으로 느껴지지 않게 하기

흥미로웠던 것은, 카카오톡에서 운전 중 혹은 도보 이동 중 푸시 알림을 조절할 수 있음에도 조절하지 않는 점.

중독성에 대한 사회적 책임이 필요할 때.

• https://uxstudioteam.com/uxblog/usability-mistakes

• https://blog.prototypr.io/common-ux-mistakes-made-by-business-developers-e837d0b31379

• https://uxstudioteam.com/ux-blog/user-attention

키오스크에 관한 이야기

• 24인치 이하가 사용자에게 가장 적절
  (한눈에 모든 내용이 들어오는 등)

• 24인치 고려하는 이유 단가 측면도 있음.

• 대만은 키오스크가 작음.

• 대형 키오스크 사용 자체가 광고적인 측면 에서  손님들에게 보여주고, 있어 보이게 하려는 목적이 큼.

• 은행 ATM 디자인 가이드 참고하면 좋음
  (유니버설디자인이 정말 잘 반영되어 있음.)

• 과연 키오스크를 도입하는 게 무인화, 인력 감축에 도움이 되는지?
  (늘어난 주문을 감축된 인원들이 감당하기 어려움, 키오스크 이용 불편으로 인력은 줄어도 직원이 도와야 해서 오히려 비효율적)

기타 참고하면 좋은 사이트

• uxmovement.com
  UX Write wording 등에 대한 고찰

• https://brunch.co.kr/@mobiinside/1746
  2030세대에게 직접 묻다. ‘언택트’ 트렌드

토요일을 이용해 UI LAB 디자인 스터디의 오픈 세미나에 참석했습니다. 총 네 가지 세션으로 이루어졌으며, VR/AR의 현황과 미래에 대한 부분이 가장 궁금해서 신청하게 됐습니다.

몇 년 전부터 AR과 VR(특히)이 떠오를 것이라며 국가에서 각종 지원도 했었고 Apple·Google·Facebook 등 각종 내로라하는 글로벌 기업에서도 미래 키워드를 두 개로 삼아 왔습니다. 저는 국가에서 진행하는 짧은 교육도 받아봤고 지속적으로 지켜보고 있지만 딱히 실생활에서 제가 체험할 정도의 변화나 적용이 없어서 회의적이었기 때문입니다.

이치훈 — 효과적인 CTA 디자인

첫 번째 섹션은 이치훈 님이 발표한 효과적인 CTA 디자인이었습니다. CTA란 Call to Action Design의 줄임말로, 사용자의 반응을 유도하는 행위 혹은 요소를 디자인해 궁극적으로, 사용자로부터 어떤 행위를 끌어내는 것이라 정의합니다.

쉽게 풀이하자면, 아래와 같이 볼 수 있습니다.

사용자에게 트리거를 통해 행동 방향을 제시하며 Project Goal을 유도하여 전환율을 상승시킨다.

어떠한 행위를 유발하도록 해서 원하는 목표를 달성하는 데에 어떤 부분들이 영향을 끼치는지에 대해 각종 수치와 근거를 들여가며 설명해 주셨습니다.

특히 카피라이팅 문구와 같은 요소는 마케팅적인 부분이 강해 디자이너뿐만 아니라 기획자, 개발자 등 서비스를 운영하는 사람들의 역할과 영향이 중요하다는 것을 알 수 있었습니다.

디자인으로 참고해야 할 부분은 버튼의 위치, 시선 흐름 등 UI의 기본 디자인 개념이 다수 포함되어 있으므로 이러한 자료들과 가이드들을 참고하시면 도움이 될 수 있다고 생각합니다.

따로 발표 후 자료 공개를 해주신다고 했지만, 현시점에서 자료 공개가 되지 않아 참고하면 좋을 만한 아티클을 남깁니다.

정영희 — 브랜딩 스토리

운송 네트워크 회사 우버(Uber)의 리브랜딩 사례를 가지고 리브랜딩이 어떻게 이루어지는지 소개해 주셨습니다.

1. 재설계의 주된 원인 결정

2. 사용자 피드백 수집

3. 분석 시스템 도입

4. 최신 경향 반영

5. 경쟁사 비교분석

6. 서비스 우선순위 선택

7. 브랜드 디자인 가이드 변경

8. 디자인 차별화 강화

9. 단순한 인터페이스

10. 플랫폼 설계지침 변화에 적응

모바일 브랜딩 디자인에 치우쳐 있지만, 굵은 글씨로 강조한 부분만 보면 일반적인 브랜드·리브랜딩 디자인과 크게 다르지 않습니다.

2016년도에 디자인한 엽전 모양과 같은 우버의 로고는 우버가 지향하는 가치와 시각적인 개념 확립이 부족했고 이에 따라 리브랜딩을 시작했다고 합니다.

블랙과 화이트를 사용해 감싸는 듯한 (U) 느낌을 주도록 했고, 별도의 U 레이아웃이라는 그들만의 디자인 레이아웃과 모션, 일련의 시스템을 만들어 가는 과정을 통해 우버다움은 무엇인가를 잘 정립한 결과물을 볼 수 있었습니다.

바로 아랫글이 발표에서 보인 내용과 동일하고, 나머지 2개는 덧붙여 참고하면 좋습니다.

허승 — Design for Next Billion Users

NBU(Next Billion Users)란 모바일 신흥국으로 떠오르는 ‘인도’를 타깃으로 Google에서 만든 팀입니다.

보통의 PC통신 → PC WEB → MOBILE로 진화한 것과 달리, 인도는 MOBILE을 시발점으로 접하며 비싼 모바일 요금, 느린 네트워크 속도와 4, 5년은 뒤처진 디바이스를 사용하고 있습니다.

일반 기업들이 중국에 관심을 가지는 것처럼, 구글 또한 많은 인구수와 모바일 유입을 예측해 인도만을 위한 별도의 팀을 만들고 위에 언급한 인도 사람들에게 맞는 구글의 서비스 디자인을 제공하는 과정과 결과물을 볼 수 있었습니다.

첫 화면을 검색창으로만 제공하는 글로벌 앱과 달리, 인도의 구글 앱은 우리나라의 포털처럼 각종 정보를 제공하고, link를 통해 끊임없이 이동 & 결과를 볼 수 있도록 구성했으며 Youtube는 화질에 따른 다운로드 기능과 오프라인 시에도 이용 가능하게 한 서비스 구성을 제공하고 있습니다.

Z세대 이후의 사람들이 저장 아이콘(플로피디스크)의 의미를 모르는 것과 같이 인도에서는 ‘상담’과 같은 아이콘에 대한 지식이 없어 인지하기 어려워했고, 이에 따라 인도만을 위한 아이콘을 만들고 일러스트를 자주 사용했다는 점은 흥미 있고 인상적인 내용이었습니다.

서비스하는 데 최신 트랜드와 가장 많은 사용자층을 따라가는 것도 있지만, 그 대열에 합류하지 못하는 소외되는 사람들 또한 있는데 (당연히 인도시장에서는 저사양, 저속도, 저비용이 대세라서 따르는 것이지만) 취약층을 위한 서비스 디자인을 생각해 볼 수 있었던 계기가 되었던 것 같습니다.

김동영 — VR/AR로 바라본 가까운 미래

아닐 수도 있지만 (아직 세미나 자료가 공개되지 않은 점도 감안), VR은 앞으로 쇠퇴하거나 저 진보하거나 딱 중심에서 갈망하고 있는 것으로 보였습니다. 다만 VR이라는 것이 나온 지 얼마 되지 않은 기술이 아니라 꽤 오래전(19세기)부터 시작됐다고 하니 시장에서 사장되더라도 조금씩 지속적으로 발전하지 않겠느냔 생각이 듭니다.

반면 AR은 산업 분야에서 많이 쓰이는 것을 알 수 있었습니다. 건축 의뢰자가 현장을 보러 왔을 때 AR을 통해 완공 시 어떻게 보이는 지 등 꼭 이케아와 같이 일상생활에서의 활용뿐만 아니더라도 다양한 분야에서 지속적으로 적용되고 확대될 가능성이 높아 보였습니다.

새로 알게 된 MR

MR(Mixed Reality)는 VR과 AR을 합친 혼합현실 개념으로 마이크로소프트사에서 새롭게 정의한 용어입니다.

홀로렌즈에 적용되고 있으며, 발표자분 말씀으로는 아직까진 화질과 시각영역이 좁고 무거워 불편하다고는 하시지만 앞으로 잘만 개발되면 개인적인 의견으론 실생활에서 AR/VR/MR이 성공적으로 적용되는 사례가 되지 않을까 기대가 됩니다.

마무리

UI LAB 오픈 세미나를 통해 업계 동향과 디자인 이론, 사례들을 볼 수 있어서 좋았습니다. 저만의 갇혀있는 시각보다는 다양한 디자이너들이 공부하면서 어떤 내용에 관심을 두고 시장이 어떻게 흘러가는지 알 수 있었습니다. 개인적으론 세미나보다 스터디를 모집한다면 참여해 보고 싶은 마음이 큽니다.

이번 글은 어떠한 이론을 자세하게 설명하기보다는 세미나 참석해 들은 내용을 정리하고 머릿속에 기억해 두기 위한 점이 큽니다. 더불어 UI LAB에서 발표 자료를 공개하면 다음에 링크를 추가할 예정입니다.

당시 이력서를 작성하면서 스크린샷만 찍어놨었는데 한 달이 지나서야 글을 작성하게 되었습니다.

우리나라는 외국에 비해 요구하는 이력서의 내용이 많습니다. 전보다는 많이 나아졌다 해도 사진, 성장 과정, 장단점, 프로그램 활용 능력, 집 주소, 호구조사 등 아직도 많습니다.

특히 개인적으로 프로그램 활용 능력은 이해할 수가 없는 게 (외국도 마찬가지) 자신이 프로그램 활용 능력을 상·중·하 혹은 퍼센트로 표현하는데 자소서 작성자 본인의 생각일 뿐 증빙할 방법이 없기 때문입니다. (인사 담당자가 보기엔 실력이 중인데 본인은 상이라 적을경우 등…)

그건 그렇고, 이력서를 작성하면서 불편한 UI 부분이 있어서 글로 남기고자 합니다.

불편한 Dropdown

인크루트의 이력서 작성 UI 중 하나입니다. 어떤 프로그램을 사용할 줄 아는지에 대해 추가하는 부분인데요, 그냥 봤을 때는 크게 문제가 될 부분은 없습니다.

문제는 프로그램 선택하는 부분에서 나타납니다. 인크루트에서 정한 프로그램 리스트만 나와 있으며 자신이 원하는 프로그램을 선택하려면 긴 스크롤을 내려야 하는 불편함이 있습니다. 특히 IT 쪽은 다양한 기술과 도구들이 쏟아지는데, 거기에 대응을 못 한다면 굳이 저 이력서 작성란을 사용할 필요가 있을지 의문입니다.

이 부분은 국가명 선택에도 일부분 해당합니다. 인크루트뿐만 아니라 가끔 타 사이트에서도 동일한 문제를 가지고 있는데요, 저 작은 스크롤 면적에서 원하는 국가를 찾기가 쉽지 않습니다.

어떻게 하면 더 편리한 경험을 제공할 수 있을까요?

이미 나와 있기도 한데 Dropdown 메뉴 안에 검색 기능을 넣어주고, 해당 목록에 없는 내용은 별도의 추가기능을 제공하는 것입니다.

조금 더 사용자들을 배려하는 UI 디자인을 제공했으면 하는 아쉬움이 남습니다.

본 글은 UX Collective에 기재된 글을 각종 번역기와 의역, 배경지식을 활용해 번역한 글입니다. 최대한 이해가 가기 쉽게 번역했지만, 영어 능력이 좋으시다면 이 글 보다는 아래의 원글을 보시는 것을 권해드립니다. (본 글의 저작권은 Ethan Wang과 UX Collective에 있습니다.)

문제점

텍스트를 감싸고 있는 상자가 실제 글리프에 딱 맞추어져 이는 것이 아니라, 글리프 위아래에 여분의 공간을 담고 있다는 것은 저를 미치게 합니다.

이를 고려하지 않고 텍스트를 감싸는 상자만을 사용해 사이즈·위치를 측정하면 여러분이 의도한 것보다 더 커지게 됩니다.

이는 line-height(줄 간격 혹은 행간)가 클수록 더 심해집니다.
아래의 예시는 텍스트를 감싸는 상자 사이의 공간을 측정해 디자인한 모습입니다.

모든 간격을 32PX (첫 번째 카드)처럼 설정하면 모든 수직 간격을 32PX로 설정해 동일하게 공간을 부여했음에도 불구하고 실제의 간격은 두 번째 카드에서 보듯이 32PX보다 훨씬 큽니다.

번역 추가설명 — 
툴에 따라 혹은 글꼴 설계에 따라 글자(이후 글리프로 칭함)의 크기가 달라집니다.

글쓴이는 이 부분에 대한 스트레스를 이야기하고 있습니다.
특히 포토샵과 CSS 상의 괴리감 (슬로워크 — 웹디자인에서 자간, 행간에 대한 고찰) 에 대한 글을 보시면 이해하기가 쉬워집니다.

보통 글꼴을 만들 때 1000X1000 이라는 하나의 글자 방을 잡는데, 고정폭이고 그 안에서 글자를 작게 만들 경우 위의 이미지처럼 여백이 생기기도 합니다.

해결하기

저는 이러한 문제로 인해 4PX 기반의 grid 시스템을 사용했고, 이전에 비해 더 정확하게 디자인할 수 있었습니다. 저의 과정은 다음과 같습니다.

1. background에서 4PX gird를 설정합니다.

2. 모든 UI 요소와 텍스트 기준선(text baseline)을 grid 격자에 맞춥니다.

3. grid를 사용해 기존처럼 텍스트 감싸는 상자를 사용하는 대신 텍스트 주변의 수직 공간을 측정합니다. 특히, 텍스트 기준선에서 텍스트 아래의 높이와 cap-height (한글은 윗선에서 받침 아랫선까지의 높이)에 가장 가까운

   grid 선을 기준으로 텍스트 위의 공간을 측정합니다.

4. 추가로 저는 미디엄에 기고된 Space in Design Systems by Nathan Curtis 글에 영감을 받아 우리 팀이 사용할 간격의 수치를 정했습니다.

방금 정의한 방식은, 모든 텍스트 기준선(baseline)이 grid에 딱 맞춰지게 하기 위해 텍스트의 시각적 높이(cap height에서 baseline까지)를 4PX의 배수(아래 gif에 표시)로 반올림합니다. 이 방식은 1–2PX의 오차가 발생할 수 있지만, 기존의 텍스트 경계 상자로 간격을 지정하는 것보다 더 정확합니다.

물론 예외도 있습니다. 개발자들은 flex-box 혹은 vertical-align을 사용해 강제로 중심을 잡을 수 있기 때문에, 이러한 경우엔 기준선(baseline)을 이용해 gird 위치를 계산하지 않습니다. 그리고 더 쉽고요. 😉

이유

기준선(baseline) grid는 옛날부터 수직적인 리듬감을 만들기 위해 편집디자인에 사용되었습니다. 웹 경험을 디자인할 때 저는 정렬을 더 좋게 하기 위해 이런 리듬을 필요로 적용한 많은 디자인 사례를 보지 못했습니다.

이 부분은 번역이 어렵습니다. 저는 세로 그리드는 과거 편집디자인에서만 쓰였지, 지금의 웹 디자인에서는 필요하지 않아 사용하지 않는다고 이해했습니다.

저에게 4PX 기반의 grid를 사용하는 것은 시각적인 정확성(사용자)과 디자인을 함에 있어 효율성(디자이너)을 맞추는 과정입니다.

문제 제기 부분에서, 텍스트를 감싸는 상자를 기준으로 측정할 때 여분의 공간이 생기는 것에 관해 이야기했습니다.

사용자는 텍스트를 감싸는 상자를 볼 수 없습니다. (디자인할 때만 보이니까요…)
따라서 시각적 불균형이 크거나 사용자에게 이익을 가져다주는 것이 아니라면 이러한 방법을 사용할 이유가 없습니다.

반면에 텍스트를 감싸는 상자를 무시하고 4PX 그리드에 기반해 디자인하면 시각적인 정확도를 높일 수 있습니다. 이 두 가지 방법을 비교해 보려면 아래를 참고하세요.

보다시피 동일한 간격 (32PX, 12PX, 32PX, 32PX)을 사용하면 4PX grid를 사용해 디자인한 결과물이 의도하고자 한 간격을 훨씬 더 정확하게 적용합니다.

텍스트를 감싸는 상자에서 측정해야 할 공간이 너무 많은 경우, 예를 들어, 첫 번째 카드에서 간격값을 32PX에서 28PX 또는 24PX로 줄이면 “Seattle”의 상단 여백과, 왼쪽 여백이 같아 보인다고 말할 수 있지만 추측일 뿐입니다.

당신이 직접 PX을 하나하나 세지 않는 한 모르니까요. 반면, 4PX 그리드 기반의 접근방식은 ~32PX 정도이겠다는 식의 유추보다 정확하게 측정할 수 있습니다. (반올림으로 인한 1~2PX 오차 포함).

디자인 설계의 효율적인 측면에서 해야 할 게 많아 번거로워 보일 수 있지만, 설계 도구(Sketch 혹은 Figma)가 grid에 요소와 기준선을 조절할 때 자석처럼 달라붙기 때문에 상대적으로 쉽게 작업할 수 있습니다. 아래는 4PX grid를 사용해 텍스트를 배치하는 모습입니다.

4PX grid를 사용하여 텍스트를 배치하는 모습

cap-height를 하나하나 일일이 직접 측정하는 모습

대신 4PX 기반의 gird를 사용하지 않고 아래의 영상과 같이 cap-height를 수동으로 측정할 수도 있지만 확대·축소하면서 픽셀을 하나하나 세야 합니다. 또한 텍스트를 감싸는 컨테이너의 크기가 4PX의 배수가 아닐 수도 있습니다.

알려진 문제점 — 디자인에서 개발로 넘길 때

4PX gird 기반의 접근방식을 사용해 설계한 레이아웃 디자인은, 개발자가 넘겨받아 레드라인 도구(InVision/Zeplin/Figma)로 살펴볼 때 마구잡이식으로 간격을 지정한 것처럼 보일 수 있습니다.

저는 간단하게 Space in Design Systems (디자인 시스템에서의 공간)에서 언급한 적이 있습니다.

해당 글에서는 CSS Class를 사용해 간격 수치를 표현할 방법에 관해 설명합니다.
이는 일관성을 유지하는데 디자이너 개발자 모두에게 도움이 됩니다. 안타깝게 4PX grid 기반의 접근법을 사용하면서 글자 조합에 따른 일정하지 못한 수치 때문에 CSS Class로 나타내는 것은 불가능에 가깝습니다.

우리는 많은 사람들이 이러한 문제를 해결하기 위해 제안한 인기 있는 기술을 보았습니다. ::before와 ::after 등의 CSS 가상선택자를 사용해 텍스트를 감싸는 상자를 자르는 것(상자에 보정 간격을 적용)입니다. 하지만 코드설계의 닌자인 제 남자 친구 Chris Caruso는 저에게 말합니다.

글꼴, 브라우저, 운영체제, 해상도에 따라 다 달라지기 때문에 CSS 가상선택자(::before, ::after)를 사용하는 것은 적절하지 않아.

이걸 하나의 체계로 만들어서 여러 곳에 적용하면 하나로 일관되는 게 아니라 각각 간격이 다 다르게 나오는 문제가 생길 수 있어.

개발자의 관점에서 이러한 속임수는 마이너스 여백을 사용하고 DOM에 없는 요소를 사용하기 때문에 일반적인 코딩 관행이 아니야. 따라서 둘 다 의도치 않은 결과가 나올 수 있어.다시 말해 굳이 위험을 감수하면서 쓸 필요가 없다는 것이지 😑

언어별 현지화는 어떤가요?

저는 언어별 현지화 연구를 통해 Google이 지원하는 8개의 언어(라틴어, 중국어, 키릴문자, 나가리, 그리스어, 가나 및 태국어)를 살펴보았습니다.

그리고 저는 어떤 측정 방법을 사용하든 간에 개발자는 리디렉션 도구에서 꺼내 CSS에 넣는 값이 Bounding box 간격이라는 것을 알았습니다. 영어 이외의 다른 언어에서 사용하는 글꼴에 따라 line-height(줄 간격·행간)가 같더라도 라틴 알파벳(로마자 알파벳)보다 크거나 작을 수 있습니다. 또한 기준선(baseline)이 달라질 수도 있고요…

따라서 어떤 측정 방법을 사용하든 간에 언어별로 현지화를 진행할 경우 항상 간격을 조금씩 변경합니다. 아래의 예시에서 볼 수 있듯이 약간씩 변경해도 모든 언어의 텍스트는 여백에 집중되어 있습니다.

Bounding box를 검색해 봤지만, 무엇을 가리키는지 모르겠습니다.
혹시라도 아시는 분은 알려주시면 수정하겠습니다.

질문 있나요?

혹시라도 말이 안 된다거나, 질문, 피드백 또는 더 나은 해결 방법이 있으면 알려주세요! 저는 오랫동안 이 주제에 대해 고민해 왔고 당신의 생각을 듣고 싶습니다! 소통하고 싶다면 제 E-mail (ethanw@microsoft.com)을 통해 연락해 주세요.

해당 글의 댓글에 웹·앱을 떠나 어떤 방식으로든 문제에 대한 다른 해결책이 있느냐는 질문과 함께 실제 프로젝트에 적용하기엔 부적합하지 않냐는 글이 달려있었습니다.

이에 글쓴이는 하드코딩으로 간격값을 지정한다고 답하고, 추가 링크를 첨부했습니다. 혹시라도 관심이 가신다면 아래의 링크도 참고해 보세요.

또한, 브런치·마스터 등 Git의 용어를 사용하기 때문에 이에 대한 지식이 있으셔야 이해하기 쉽습니다. 만약, Git에 대해 잘 모른다면 진유림 님이 공개하신 초보자를 위한 Git&GitHub을 읽어보시는 것을 추천합니다.

디자이너로서, 우리는 팀 커뮤니케이션을 위한 다양한 도구와 저장소를 사용했지만, 그 어떤 것도 완벽한 만족을 주지 못했습니다. 필자는 파일을 잃어버리거나 최신 디자인을 찾는 데 많은 시간을 할애해 효율성이 떨어지고 에너지를 낭비한 일들이 떠오릅니다.

개발자들은 Git과 같은 분산 버전 관리 시스템을 가지고 있지만, 지금까지 디자이너를 위한 시스템은 존재하지 않습니다. (의역: 유사한 메커니즘이 없다는 것을 관련 시스템이 존재하지 않는다고 쉽게 번역했습니다.)

Abstract는 디자이너가 프로젝트를 함에 있어 다른 사람들과 함께 공동 작업을 할 수 있도록 도와주는 도구입니다. 그것은 우리 팀과 함께 작업을 위한 중심 역할을 제공함으로써 각종 구성요소와 작업파일을 관리하고 유지할 수 있습니다. 디자이너는 Abstract에서 Sketch 작업파일을 가져온 후 간단하게 엽니다.

몇년 전, Miles과 Victor은 Outlook 팀에서 Abstract를 사용하기 시작했으며 이후 Microsoft 디자인 팀에 정식으로 채택되었습니다.

이 글에서는 Abstract을 사용하는 방법에 대해 이야기하고, 파일구조와 (다른사람들과 함께 작업한 파일)병합 프로세스, 파일 유지 관리방법 및 개선에 도움을 주는 일부 과정에 대해 나누고자 합니다.

이 과정은 대규모 팀에서 효과가 있다는 것을 느낄 수 있었지만, 우리는 계속해서 Abstract을 사용하며 미처 발견하지 못한 문제를 파악하고 개선할 수 있는 방법을 알고 싶습니다.

프로젝트의 파일 구조 설계

우리 프로젝트는 Android, iOS, Mac, Web 및 Universal App(Windows 10에 탑재된 기본 앱 — Mail, Calendar) 플랫폼으로 나뉩니다. 이 프로젝트 내부에는 파일들을 다양한 섹션으로 나누었습니다. 다음은 파일을 빨리 실행하기 위해 “iOS UI-Kit”, “Mail” 및 “Calendar”와 같은 섹션으로 파일을 분리하는 Abstract 내부의 iOS 파일 구조의 예시입니다.

첫째, 여기에는 새로 들어온 디자이너와 외부 파트너를 위한 파일이 있습니다. 파일 안에는 디자인 원칙과 Abstract 사용법, 에셋 내보내기 및 Sketch 플러그인 사용에 대한 몇 가지 팁과 노하우 등의 정보가 담겨있습니다.

다음으로 UI-Kit은 모든 컴포넌트, 타이포그래피, 아이콘 및 색상이 포함된 Sketch 라이브러리입니다. 디자인 파일에는 이 라이브러리에서 가져온(링크) 심볼이 사용됩니다.

UI-Kit은 두 개의 페이지로 나뉩니다. 하나는 심볼용이고 다른 하나는 UI 컴포넌트 라이브러리입니다. 후자에는 각 요소에 대한 자세한 정보와 직관적인 레이아웃이 포함되어 있어 원하는 것을 빠르게 찾을 수 있습니다.

sticker sheet라는 용어가 무엇인지 몰라 검색했더니, 우리가 아는 UI Library 혹은 UI 컴포넌트와 동일한 뜻을 가지고 있습니다. 따라서 sticker sheet을 UI 컴포넌트 라이브러리로 바꾸어 번역했습니다.

나머지 파일은 Onboarding, Mail, Calendar, 검색, 설정 등의 앱의 다른 부분을 나타냅니다. 각 카테고리를 분리하면 작업 시 파일이 커져 느려지거나 버벅대는 것을 피할 수 있습니다. 또한 새로운 기능을 만들 때 종종 앱의 특정 부분만 선택하면 되기 때문에 디자인 병합할 때 장점이 있습니다. 따라서 충돌 같은 것은 거의 발생하지 않습니다.

디자인 프로세스의 단계적 실행

첫 번째 단계는, Master에서 모든 Sketch 파일을 가져와 사본을 만드는 것입니다. 폴더 복제(복&붙)와 같이 생각하세요.

branch를 식별하기 위해 레이블 뒤에 적당한 제목을 추가해 작업 중인 부분에 간단한 레이블을 지정합니다. 우리는 일반적으로 “Feature”, “Kit” 또는 “Exploration”과 같은 레이블을 사용하여 프로젝트를 설명합니다.

Outlook에서는 새로운 아이디어를 시도하고 향상할 수 있다고 생각된다면 모든 것을 바꿀 것을 권장합니다. 즉 “Exploration”과 같은 태그를 사용하는 것입니다. 이 레이블은 다른 팀원에게 상황을 알려주고 우리가 무엇을 발견하고 이해할 수 있도록 도와줍니다. 작업. 분기를 만드는 것은 여러 디자이너가 동일한 파일에서 작업 한 다음 나중에 마스터로 다시 병합할 수 있기 때문에 큰 이점입니다.

새 branch에서 Abstract 안에 새 파일을 만듭니다. 저는 파일을 “Working”과 같이 이름을 지어 다른 사람들이 최근 작업 파일이 어디에 위치하는지 알 수 있게 도와줍니다. 그런 다음 다른 파일의 Artboard를 하나의 파일로 복사할 수 있습니다. 이는 작업흐름을 시각화하거나 기존 화면을 바꾸는 데 도움이 됩니다.

Abstract에서 연 Sketch 파일에는 Preview & Commit라는 버튼이 생깁니다. 서버에 작업을 저장하고 다른 팀원들이 변경 사항을 볼 수 있도록 합니다. 커 맛은 마스터에 영향을 끼치지 않으며, 단지 Branch만 업데이트합니다. 팀에서는 하루에 한 번씩 커밋하는 규칙을 따르고 있습니다. 변경 사항을 적용하기 전에 내가 변경한 작업 내용에 관해 설명하는 메모를 추가합니다. 필자는 항상 모든 변경 사항에 접근할 수 있으며, 언제든지 필요한 경우 이전 버전을 통해 변경 사항을 되돌릴 수 있습니다.

디자인이 끝나면, 레이어를 정리하고 디자인 파일을 마스터에 병합해야 합니다. Shape 이름이 정확한지 확인하고 순서가 화면에 표시되는 대로 (위에서 아래로) 따라야 합니다. 이는 모든 화면에 그대로 적용됩니다.

[Kit] 라벨이 붙은 새 Branch를 만들고 새 화면에서 해당 파일에 복사하거나 최신 라이브러리 컴포넌트를 이용해 처음부터 디자인 작업을 할 수 있습니다.

새로 파일을 만드는 이유는 주요 화면만을 마스터에서 가져오기 위함입니다.
그리고 나중에 언제든지 Abstract 아카이브에서 이전 분기에 접근할 수 있습니다. 이는 시간이 많이 소요되며, 우리가 주기적으로 작업을 합치는 것을 방해합니다. 우리는 병합 과정을 개선할 방법을 아는 사람이 있다면 의견을 구하고 싶습니다.

다음은 분기를 만들고, 라이브러리의 UI 컴포넌트를 사용해 앱을 디자인하는 방법을 보여줍니다. Abstract와 우리가 만든 컴포넌트 라이브러리를 통해 팀에 투명성과 가시성을 제공하면서 신속하고 효율적으로 작업할 수 있습니다. 우리는 같은 파일에서 작업하고 있으며 새로운 파일은 모든 사람이 사용할 수 있습니다.

UI 컴포넌트를 사용하여 Outlook 디자인하기

병합 버튼을 누르기 전에 팀원에게 검토를 요청할 수 있습니다. 링크된 심볼 레이어, 정확한 이름 지정, 심볼 중복 및 라이브러리의 변경 사항을 살펴봅니다. 리뷰어는 대게 모든 것을 같은 장소에 보관하면서 Abstract 혹은 Artboard의 특정 부분에 코멘트를 남깁니다. 검토가 끝나면 합병하고 이전 Branch를 보관합니다.

유지 관리의 우수 사례

우리 팀은 Kit를 유지 보수할 책임이 있으며, Sketch 파일을 최적화된 상태로 유지하고 지속적으로 Kit을 개선하고 업데이트하는 작업(특히 운영체제 업데이트로 인한 디자인 설계 변화에 대응)을 합니다.

디자이너들은 언제든지 kit에 의견을 남길 수 있고, 문제를 제기하거나 개선안에 대해 대화할 수 있습니다. 우리는 Github issue란에서 피드백을 확인하고 문제해결에 기여할 수 있도록 합니다. 다음은 중복된 아이콘을 제거하고 모든 아이콘에 바뀐 색상을 지정하는 것을 포함해 UI-Kit에서 추적한 피드백 예시입니다.

우리의 과정과 UI-Kit은 더 개방적이고 협업적인 접근 방식으로 디자인하면서 마이크로소프트 디자인 팀에 채택됐습니다. Fluent Design이 모바일 환경으로 진화함에 따라 마이크로소프트 제품을 통해 공통적인 요소들을 보시게 될 것입니다.

우리는 여전히 공부하고 있고, 과정을 개선할 방법을 끊임없이 찾고 있습니다. 우리는 다른 팀들이 디자인 작업에서 Abstract를 어떻게 활용하고 있는지, 그리고 우리가 어떻게 개선할 수 있는지에 대한 제안을 듣고 싶습니다.

여러분의 의견을 자유롭게 남겨주세요. 💬

Microsoft Design을 통해 알아두기 위해서는 Dribbble, Twitter 및 Facebook을 따르거나 Windows Insider에 가입하세요. 우리와 함께 일하고 싶으시다면 careers.microsoft.com에 방문하세요.

이 글은 💙을 담아 Miles Fitzgerald 및 Outlook 팀의 도움으로 작성되었습니다.

혹시, 동물이나 특정 물체를 닮은 특이한 모양의 구름을 본 적이 있나요? 아니면 기체(연기)를 보는 것만으로 이런 현상이 왜 발생하는지 궁금한 적이 있나요? 이것은 모두 당신의 뇌 역할 때문입니다.

당신의 뇌는 항상 이전의 경험이나 시각적인 규칙을 비교하고 그 점들을 연결함으로써 세계를 이해하려고 합니다. 뇌에서는 모양과 형태를 인식하고, 정보를 그룹화하며 또 빈틈을 메꿔 하나의 큰 그림을 그리는 신기한 방식을 가지고 있습니다.

약간 해석이 빈약한 감이 있어 별도로 보강하자면, 루빈(Rubin) 이론에 관한 글을 참고하시면 도움이 됩니다. (https://anthropo.tistory.com/68)

우리의 뇌가 어떻게 작용하는지 이해한다면 더 현명한 디자이너가 되는 데 도움이 될 수 있습니다. 시각 소통 조작의 달인(=뇌), 뇌는 시각 요소가 어떤 상황에서든 가장 효과적으로 인지할 수 있도록 도움을 줍니다. 따라서 우리의 인식에 영향을 끼치고, 집중하게 하며 행동을 변화시키는 데에 영향을 끼칩니다. 당신은 이러한 현상을 목표지향적이고, 직관적인 사용자 인터페이스를 디자인할 때 유용하게 사용할 수 있습니다.

“훌륭한 디자이너는 시각적 인식에서 심리학이 담당하는 큰 역할을 이해합니다. 누군가의 시선이 당신이 만든 디자인 작업물에 간다면 어떻게 될까요? 당신의 창작물이 나누는 메시지에 그들은 어떻게 반응하나요?”
 — Autodesk의 브랜드 콘텐츠 전략가 Laura Busche

게슈탈트가 뭔가요?

게슈탈트 - Gestalt (독일어로 형태 혹은 양식이라는 뜻)은 1920년대 독일 심리학파가 제시한 심리학 용어로, 형태를 지각하는 방법을 담은 원칙입니다. “전체는 독립적으로 존재하는 부분의 합보다 더 큰 것으로 인식된다.”는 이론에 기반을 두고 있습니다.

“전체는 부분의 합보다 크다”’ — Kurt Koffka

게슈탈트 원칙은 특정한 조건이 충족될 때 사람들이 시각적 요소를 어떻게 인식하는지를 설명하며 대략 4가지의 법칙으로 이루어져 있습니다.

출현 (Emergence)

사람들은 일반적인 윤곽의 형태로 요소들을 먼저 식별하는 경향이 있습니다. 뇌는 복잡한 물체보다 단순하고 잘 정의된 물체를 더 빨리 인식합니다. (의역: 우리가 특정 대상을 주어진 조건에서 최대한 가장 단순하고 간결할 수 있는 방향으로 인식합니다.)

구상화 (Reification)

사람들은 전체 중에 일부가 없을 때도 사물을 인식할 수 있습니다. 우리 뇌는 기존의 지식을 토대로 완성되지 않은 형태를 완성해 인지할 수 있습니다.

다중 안정성 (Multi-Stability)

사람들은 모호한 물체를 여러 가지 방식으로 해석합니다. 우리 뇌는 확실한 것을 좋아하기 때문에 인식한 여러 관점 중 한 가지만 인식합니다. 따라서 다른 관점은 인지하기 어렵습니다. (하단 좌측 이미지가 잔으로 보일 수도, 두 사람이 맞대고 있는 실루엣으로 보일 수 있습니다.)

불변성 (Invariance)

사람들은 회전하거나 크기를 변화해도 하나의 개체로 인식합니다. 우리 뇌는 관점, 조명, 색상, 크기 등의 변화에도 불구하고 사물들이 일정하고 불변한다고 인지하는 경향이 있습니다. (의역: 지각 항등성 법칙을 참고하시면 이해가 빠릅니다.)

자 이제부터, 오늘날의 UI 디자인을 설명할 수 있는 게슈탈트 원칙들입니다.

근접성 (Proximity)

서로 가깝게 배치된 요소는 더 멀리 떨어진 요소보다 관련성이 높은 것으로 인식됩니다. 이러한 방식으로 다른 요소는 주로 개별 요소가 아닌 그룹으로 간주합니다.

근접성의 원리는 UI 설계에 어떻게 적용되나요?

비슷한 정보끼리 묶고, 내용을 구성해 레이아웃을 만드는 UI 디자인에서 근접성의 원칙을 사용할 수 있습니다. 근접성의 원리를 올바르게 사용하면 시각적 의사소통 및 사용자 경험에 긍정적인 영향을 끼칩니다.

근접성의 원칙에 따라 관련 있는 항목은 서로 가까이 있어야 하며 관련 없는 항목은 더 멀리 떨어져 있어야 합니다. 빈 공간은 의도된 방향으로 사용자의 시선을 돌리는 대비의 역할로서 작동하기 때문에 중요합니다. 빈 공간은 시각적 계층 및 정보의 흐름을 향상해 레이아웃과 콘텐츠를 탐색하는 데 도움을 줍니다. 즉 근접성의 원칙을 적용하면 사용자가 더 빨리 목표를 달성하고 콘텐츠를 집중하는 데 도움을 줄 수 있습니다..

우리는 GNB, 카드섹션, 갤러리, 배너에서부터 목록, 본문, 사이트맵에 이르기까지 거의 모든 곳에서 근접성의 원리를 적용할 수 있습니다.

공통영역 (Common Region)

근접성 원리와 비슷하게, 동일한 영역 내에 배치되는 요소는 하나의 그룹으로 인식됩니다.

공통영역의 원칙은 UI 설계에 어떻게 적용되나요?

공통영역의 원칙은 특히 유용합니다. 정보를 그룹화하고 콘텐츠를 구성하는 데에 도움이 되며, 반대로 콘텐츠를 분리하거나 시선을 고정할 수 있게 할 수 있습니다. 계층구조를 부여하고 읽기 능력을 향상해 정보를 전달하는 데 도움을 줍니다.

공통영역의 원칙은 여러 가지 요소를 한꺼번에 묶어 더 큰 그룹 내에 속하도록 합니다. 선, 색, 모양 및 그림자를 사용해 이를 적용할 수 있습니다. 상호작용의 목적 또는 중요한 요소를 앞부분으로 가져와 강조하는 데 자주 사용됩니다.

상호작용의 목적 또는 중요한 요소를 앞부분으로 가져와 강조하는 데 자주 사용됩니다. —  이 부분의 해석이 잘되지 않습니다. (원문: It can often be used to bring elements into the foreground, indicating interaction or importance.)

공통영역의 원칙을 가장 잘 설명할 수 있는 좋은 예로 카드 UI를 들 수 있습니다.
잘 정의된 직사각형 공간과 다른 정보를 하나로 묶어 보여줄 수 있습니다. 배너와 표(table) 또한 좋은 예입니다.

유사성 (Similarity)

비슷한 시각 특성을 공유하는 요소는 그렇지 않은 요소보다 더 관련이 있다고 인식됩니다.

유사성의 원칙은 UI 설계에 어떻게 적용되나요?

우리는 서로 다른 요소를 그룹화하거나 패턴으로 인식하는 경향이 있습니다. 이에 따라 같은 목적을 수행한다고 생각할 수도 있습니다. 유사성은 그룹 내의 개체를 구성하고 분류하고 특정 의미를 주거나 기능을 연결하는 데 도움이 될 수 있습니다.

비슷한 요소로 인식하도록 만드는 데에는 다양한 방법이 있습니다. 여기에는 색상, 크기, 모양, 질감, 치수 및 방향의 유사성이 포함됩니다. 그중 일부는 다른 것보다 더 강하게 느껴집니다. (예 : 컬러 > 크기 > 모양). 유사성 (Similarity)가 발생하면 유사성을 갖지 않은 객체와 다르게 강조될 수 있습니다. 이것을 ‘변칙(Anomaly)’이라고 하며 대조 또는 시각적 무게를 주는 데 사용할 수 있습니다. 전반적인 흐름을 지원하면서 특정 부분에 사용자의 시선을 머물게 할 수 있습니다.

내비게이션, 링크, 버튼, 제목, 행동을 유도하는 동작 등에서 유사성 원리를 사용할 수 있습니다.

폐합 (Closure)

완성되지 않은 형태는 종종 인식할 수 있는 패턴 또는 그림으로 인식됩니다. 폐합의 원칙은 형태가 불완전하거나 일부가 포함되지 않은 경우에도 발생합니다.

폐합의 원칙은 UI 설계에 어떻게 적용되나요?

폐합의 원칙에 따르면 적절한 양의 정보가 제공될 때 뇌는 정보의 빈틈을 메꿔 하나의 완전체를 만들게 됩니다. 이렇게 하면 정보를 전달하고 복잡성을 줄여 보다 매력적인 디자인을 만드는 데 필요한 요소를 줄일 수 있습니다. 폐합의 법칙은 시각적인 소음을 최소화하고 축약된 메시지를 전달하여 강화된 개념을 전달하는 데 도움이 될 수 있습니다.

단순하게 의미를 신속하고 명확하게 전달하는 데 도움이되는 아이콘그래피(Iconography)에도 폐쇄 원리를 적용할 수 있습니다.

대칭 (Symmetry)

대칭 요소는 거리와 관계없이 소속되어 있는 것으로 인식되어 견고함과 질서를 느끼게 합니다.

대칭 원리는 UI 설계에 어떻게 적용되나요?

대칭요소는 단순하고 조화롭고 시각적 즐거움을 줍니다. 우리의 눈은 본능적으로 혼돈 속에서 질서와 안정감을 주는 속성을 찾습니다. 이러한 이유로 대칭은 정보를 빠르고 효율적으로 전달하는데 유용합니다. 또한 대칭은 편안함을 느껴 우리가 중요한 것에 집중하도록 도와줍니다.

대칭적 구성은 안정감을 주지만 반대로 지루하고 정적일 수도 있습니다. 대칭 디자인에 비대칭 요소를 추가하면 안정적인 인상을 주면서 주의를 끌 수 있습니다. 관심 지점이나 영업 상담 섹션을 다루는데 유용합니다. 대칭은 건강한 양의 비대칭과 함께 모든 디자인에서 중요합니다.

portfolio, gallery, 제품 슬라이드, list, 내비게이션, 배너 및 콘텐츠가 많은 페이지에는 대칭을 사용하면 좋습니다.

연속성 (Continuation)

선 또는 부드러운 곡선으로 배열된 요소는 무작위로 또는 거친 선으로 배열된 요소보다 관련된다고 인식합니다.

연속성 원칙이 UI 설계에 어떻게 적용되나요?

연속선을 따르는 요소는 하나의 그룹으로 인식됩니다. 선이 부드러울수록 더 통일된 모양으로 느껴지며 자연스럽게 느껴집니다.

연속성은 구성을 통해 방향과 움직임을 해석하는 데 도움이 됩니다. 연속성은 요소들을 정렬할 때 발생하며, 시선을 자연스럽게 움직여 가독성을 높여줍니다. 연속성의 원칙은 그룹화된 정보에 대한 인식을 강화하고, 순서를 만들고, 다양한 콘텐츠 분류를 통해 사용자를 안내합니다. 연속성의 붕괴는 새로운 콘텐츠에 대한 관심을 끌거나, 섹션의 끝을 알리는 데 사용할 수 있습니다.

행과 열의 배열은 연속성의 좋은 예입니다. 메뉴 및 하위 메뉴, 목록, 제품 목록, 슬라이드, 서비스 또는 프로세스의 진행 상태를 표시하는 데에 사용할 수 있습니다.

공동운명 (Common Fate)

같은 방향으로 움직이는 요소는 관련이 있다고 인식하는 반면, 다른 방향으로 움직이는 요소는 관련이 없는 별개의 존재로 인식합니다.

공동운명의 원칙은 UI 설계에 어떻게 적용되나요?

요소가 얼마나 멀리 떨어져 있든 관계없이, 같은 방향으로 이동하면 관련된 것으로 인식됩니다. 이 효과는 움직임이 암시된 경우에도 다른 시각적 요소에 의해 발생할 수 있습니다.

공동운명의 원칙은 요소끼리 같은 프로세스와 방향성을 가질 때 강력합니다. 같은 방향으로 그리고 동시에 관련 정보를 그룹화해 작업을 결과와 연결하는 데 도움이 될 수 있습니다. 움직임이 중단되면 사용자의 시선을 사로잡을 수 있으며, 이를 특정 요소나 기능으로 보낼 수 있습니다. 그것은 또한 다른 그룹이나 주들 사이의 관계를 수립할 수 있습니다.

확장 메뉴, 아코디언, 툴 팁, 제품 슬라이더, parallax scroll 및 스와이핑 효과에서 공동운명의 원칙을 사용할 수 있습니다.

결론

사용자 인터페이스 디자인은 귀여운 픽셀과 반짝이는 그래픽에 국한되지 않습니다. 주로 커뮤니케이션, 성능 및 편의성에 관한 것입니다. 게슈탈트 법칙은 항상 우리가 이러한 목표를 달성하도록 도와주며, 이를 통해 사용자에게 즐거운 경험을 제공하고 비즈니스에 큰 성공을 안겨줍니다.

이 기사를 읽거나 유용하다고 생각하시면 박수를 보내고 많은 사람들이 혜택을 누릴 수 있도록 공유해주세요. ❤

번역 후기

의역 및 다른 자료를 찾으면서 보강했지만, 사실 대부분은 번역기에 의존한 경향이 큽니다. 내용이 어색할 수 있지만, 시각디자인 전공자라면 게슈탈트 이론에 대해서 얇게나마 알기 때문에(저는 학부에서 배운 적이 없습니다만) 쉽게 이해하실 수 있을 거로 생각합니다.

저는 이 부분에 대해 과거 SK Planet의 UX 디자인 과정 때 인지심리 부분으로 배운 적이 있습니다. 따로 onenote에 정리해 두기도 했지만, 실제 웹에 어떻게 적용되는지는 보지 못했었는데, 해당 글은 웹에 어떻게 적용되는지 사례를 보여주어 좋은 글이라 생각하여 번역하며 복습하는 계기가 되었습니다.

번역에 관해서 오역이 있어서 수정이 필요한 부분은 언제든지 피드백 주시면 바로 수정하도록 하겠습니다.

포트폴리오로 만든 APP Design 기획에 Emoji가 있었고 그냥 버리기는 아쉽다는 생각이 들었습니다. 몇 군데에서 Emoji에 대한 평도 나쁘지 않았고요…

카카오와 라인은 별도의 복잡한 심사 과정이 있어야 했고, 제 Emoji는 등록될 만한 컨셉이나 퀄리티는 안 나온다고 생각해 바로 등록이 가능한 Telegram 스티커를 만들기로 합니다.

이미 인터넷에 Telegram 스티커 등록 방법이 있지만, 바뀐 부분이 많고 이것 때문에 48개의 Emoji를 일일이 수작업으로 등록하는 삽질만 4, 5번을 했습니다. 따라서 과정을 나눠보고자 합니다.

스티커 만들기 사전작업

1. 512PX 크기의 스티커 이미지로 만들기

Telegram의 스티커의 등록 사이즈는 가로·세로 512PX 입니다. 이보다 작아도 되는지는 모르겠지만, 일단은 이보다 크면 등록이 되질 않으며 모바일의 HIDPI을 생각하면 512PX로 작업하시는 것을 권장합니다.

저는 Sketch에서 작업했으므로, Sketch 기준으로 말씀드리자면 내보내고자 할 아트보드들을 선택하고 내보내시면 됩니다. 저는 애초에 512PX로 만들었기 때문에 별도의 사이즈 보정 작업은 없었습니다.

2. 스티커 리스트에 보여질 Tumbnail 이미지 만들기

메신저 스티커의 하단 부분에 보여질 Thumbnail입니다. 가로·세로 100PX로 만들어주시면 됩니다.

이제는 Telegram 스티커를 등록할 차례

스티커들을 다 준비했다면, 이제는 Telegram에 등록할 차례입니다. 모바일보다는 PC에서 작업하시는 것을 권장합니다.

1. 스티커 봇 추가

위 링크 혹은 Telegram에서 @Stickers를 추가해 줍니다.

텔레그램 공식 홈페이지에서는 sticker 기준으로 하던데,
이 글을 작성하다가 알게 됐지만 아무거나 써도 될 것 같지만 삽질할 수 있으므로 위의 @Stickers를 추가하는 것을 권장합니다.

2. 첫 스티커 팩 등록

채팅에 /newpack 을 입력하면, 스티커 팩 이름을 작성하라고 안내메시지가 나타나며 본인이 정하고 싶은 이름을 입력하면 됩니다. (중복되면 알려주며 다른 이름으로 만드시면 됩니다.)

저는 프로젝트 이름 그대로 brothumb로 정했습니다.

3. 스티커 등록하기

기존에 만들어 둔 512PX의 이미지를 채팅방으로 끌어다 넣어줍니다. 여기서 중요한 것은 반드시 압축하지 않고 보내기로 보내셔야 합니다. 이후의 파일/이미지 전송 선택은 상관이 없으며, 저는 파일전송으로 보냈습니다.

넣은 다음에는 해당 스티커에 대응하는 emoji를 입력해 줍니다. (emoji는 반드시 하나일 필요가 없으며, 스티커가 나타나기 어려운 상황 시 해당 emoji가 나오므로 상황에 알맞은 emoji를 선택해 주시는 것이 좋습니다.)

4. /publish는 나중에, 그 다음 넣을 스티커 이미지를 전송해주세요.

스티커가 하나라면 (의미 없지만) 그대로 /publish 해주시면 되지만,
여러 개라면 바로 전 단계를 계속 반복하면서 등록하시면 됩니다.

위 이미지처럼 등록할 때마다 스티커 팩에 몇 개가 등록됐는지 확인이 가능하므로 확인하면서 작업합니다.

5. 다 끝났다면, 스티커 팩을 등록해봅시다.

/publish를 입력 후, 사전 준비 단계에서 만들어둔 100PX 사이즈의 Thumbnail을 전송합니다. 이 역시 압축 업로드가 아닌 원본 업로드를 합니다.

이제 다 왔습니다! 마지막으로 공유 링크에 사용될 스티커 팩 이름을 지정해 주시면 됩니다. 지정이 완료되면 링크가 발급되고, 해당 링크를 통하거나 혹은 메신저상에서 검색을 통해 스티커 팩을 추가할 수 있습니다.

Telegram에서 내 스티커 마음껏 사용하기

정상적으로 등록이 완료되고, 메신저상에서 스티커 팩을 추가한다면 위 스크린샷처럼 스티커 목록에 추가되고 삽입할 수 있습니다.

방법은 크게 어렵지 않지만, 한번 실수하면 처음부터 다시 시작해야 하는 리스크와 단순 노가다가 사람을 지치게 합니다. 능력자가 WEB으로 여러 개의 스티커를 쉽게 등록할 수 있는 플랫폼을 만들어준다면 더 쉽게 스티커 팩을 만들 수 있지 않을까 생각해 봅니다.

웹에 적용된 이미지들이 일반 1:1 대응의 모니터 기준으로 이루어져 있고 운영체제에서는 이를 강제로 확대해 깨지기 때문입니다. 실제로, 네이버 메인 화면을 뜯어보면 스프라이트 이미지를 기존의 비트맵 방식이 아닌 벡터 방식으로 사용하고 있습니다.

요즘엔 SKETCH APP으로 웹도 디자인한다고 하지만 너무 불편해서 아직 비트맵 기반의 포토샵을 사용하고 있고 이번 개인 웹 사이트를 진행하면서도 포토샵을 이용했습니다. 하지만, 포토샵에서도 TEXT나 SHAPE의 경우 벡터 방식의 출력이 가능한데, 이에 대한 사용기 및 지식을 공유해보고자 합니다.

Photoshop에서 SVG 내보내기

비트맵을 제외한 백터로 이루어진 요소들만 가능

마크업에 들어가기 전, 제작된 PSD 파일에서 SVG로 내보내고자 할 부분을 구분합니다. 당연하지만, 텍스트 및 아이콘(SHAPE)과 같은 벡터 요소만 가능합니다. 텍스트는 웹 폰트를 사용하면 되지만, 라이센스 문제가 있는 경우 혹은 폰트의 파일이 너무 큰 경우 속도에 문제를 줄 수 있기 때문에 부분적으로 사용하는 경우 SVG로 내보냅니다.

텍스트 Shape화 하기

레이어 패널에서 변환하고자 하는 텍스트 레이어를 오른쪽 마우스 클릭한 뒤, Convert to Shape를 클릭합니다. 일반 텍스트로, SVG로 보낼 수는 있지만, 코드를 살펴봤을 때 폰트 이름이 들어간 것으로 보아, 해당 폰트가 없는 곳에서는 제대로 볼 수 없을 게 분명하기 때문입니다.

Shape 합치기

왼쪽 툴박스에서 도형 틀을 선택한 후 상단에서 Merge Shape Components를 꼭 눌러줍니다. 일부 글꼴의 경우 (특히 한글) 요소와 요소가 맞닿는 부분을 미리 합쳐야 하나 이러한 최적화를 하지 않고 내보내 나중에 보면 글자가 겹치는 부분이 비어서 표현되기 때문입니다. 벡터 아이콘 역시 일러스트에서 작업한 것을 가져다 쓴 것이 아니라 포토샵 내에서 그린 것이라면 동일하게 작업해 줍니다.

SVG 내보내기

(텍스트의 경우) SHAPE화 하고 도형을 합쳤다면 이제는 내보내야 할 차례입니다. 대상 레이어 오른쪽 마우스를 클릭하고 Export As… 을 클릭합니다.

Format을 SVG로 선택하고 Export All… 을 눌러주면 끝!

다수의 요소 모음(스프라이트)는 어떻게 하나요?

능력자들은 전처리기 (SASS, LESS…) spritesmith등을 이용해 자동화한다고 하지만 저는 그렇게까지는 능력이 되지 않고, 온라인 Sprite Generator 등은 아직 비트맵 이미지만 지원하기 때문에 저는 포토샵 도큐먼트를 열어서 노가다로 진행했습니다. 머리가 나쁘면 고생한다고 시간이 나면 서서히 이 부분도 공부해야겠지요.

다 정리한 후 하나의 상위 그룹으로 묶고, 그룹을 오른쪽 마우스 클릭해 Export As… 을 눌러 진행하면 됩니다.

그럼, 비트맵은요?

애초에 SKETCH APP를 사용하거나 (배율로 내보내기가 가능하므로) 포토샵에서 2x로 작업하면 되지만, 비율을 보는 것이 어렵기 때문에 1x로 작업한 후 일부 요소들을 2x로 다시 작업해 내보냈습니다.

아까 SVG Export 보니, 1x, 2x 선택 가능하던데요?

벡터로 제작된 것이라면 모를까, 원본 소스가 비트맵이기 때문에 당연히 그렇게 내보낼 경우 깨집니다. 이렇게 하고 싶으신 분들은 벡터로 작업하시거나 애초에 2x, 3x… 등의 고배율로 작업하신 뒤 축소해서 내보내면 됩니다. (용량 압박과 버벅대는 포토샵을 경험하고 싶다면…)

2X 이미지를 마크업 할 때

1. 이미지 요소로 사용
   원본 크기를 CSS 혹은 인라인으로 지정해 주면 됩니다.
   (2x 이미지가 60PX라면 30PX)

2. 배경화면의 경우
   원본 크기의 width, height를 지정하고, background-size: contain을 줍니다.

HIDPI 대응 결과

깨지지 않고, 동일한 화면으로 잘 렌더링 됨을 확인할 수 있습니다. 전문 개발자들과 큰 회사들에서는 어떻게 작업하는지는 모르겠습니다. 이런 노가다가 아닌 좀 더 쉽고 유연한 방법을 사용할 것으로 생각합니다.

하지만, 이러한 방법으로도 작업할 수 있다? 정도의 후기로 봐주시면 어떨까 싶습니다.

기존에 사용하던 mac이 하도 말썽이라 이틀간을 초기화 및 프로그램 세팅을 진행했습니다.

2018 버전만을 사용 중이라 언뜻 보고 지나쳤는데 (CC 2019 새로운 기능)
2019 버전부터는 포토샵에서 Transform을 할 때 Shift를 눌러 정비율로 확대축소 하도록 바뀌었습니다.

기존에는 CTRL + T를 눌러 조절할 때에 비율을 마음대로 조절할 수 있었고
이미지 정비율대로 조절하려면 SHIFT를 눌렀어야 했다면 2019버전 부터는 반대로 바뀐 것입니다.

해외 포럼에서도 불만 많아⋯

Adobe 사용자 포럼만 봐도 문제 해결을 요청하거나 불만을 제기하는 글이 많이 올라옵니다.

UX 관점에서는 바뀌어야 하는 것이 맞지만 이제야?

저도 불만입니다만, UX 관점에서는 바뀌어야 하는 것이 맞습니다.

이는 애초부터 설계 때부터 적용되어야 했기 전 세계 사람들이 몇십 년 동안 적응되었는데 이를 깨트리는지는 모르겠습니다. 이제라도 제대로 된 UX 원리 원칙을 적용하고자 하는 것일 수도 있겠지만요…

저는 UX 관점에서 Adobe가 다음과 같은 이유로 Shift를 눌러야만 자유자재로 변형할 수 있게 기능을 변경했다고 생각합니다.

• 실수 방지

• 자연스러운 행동유도

우선 우리가 이미지나 글자를 Transform 기능을 통해 변경할 때 보통 원본 크기의 정비율대로 확대 축소를 하지 임의로 비율을 깨뜨리며 조절하지는 않습니다.

글꼴의 경우 정비율 외로 수정하면 글꼴의 안정감이 깨지게 되고 궁극적으로 글꼴디자이너가 지향하고자 하는 바를 제대로 나타내지 못하게 됩니다. 따라서 가독성이나 판독성, 미적 요소에도 영향을 끼칠 수 있습니다. 사진이나 이미지 또한 마찬가지입니다.

따라서 우리가 자연스럽게 대상을 확대축소 할 때 원 사이즈의 원 비율로 조절하므로 디폴트로 바뀐 것이고, 임의로 조절하는 경우는 자연스럽지 않은 행동이기 때문에 Shift 키를 추가로 눌러 조절하도록 바뀐 것입니다.

이전 버전처럼 사용하려면?

세벌식 자판이 두벌식 자판보다 오타율이 낮음에도 불구하고 두벌식이 자리 잡은 것처럼 사람들은 익숙한 것에 따르게 되어있습니다. 따라서 2018 이전으로 바꾸는 방법에 대해서 알아보겠습니다.

Windows · OSX 공통

에디터를 열어주신 다음 아래의 내용을 입력한 후,
바탕화면에 SUserConfig.txt로 저장합니다.

TransformProportionalScale 0

Windows

다음의 경로에 바탕화면에 생성한 SUserConfig.txt을 넣어줍니다.

C:/Users/사용자 이름/AppData/Roaming/Adobe/Adobe Photoshop CC 2019/Adobe Photoshop CC 2019 Settings/

AppData는 숨김파일로 처리되어 있으므로 다음과 같이 숨김 항목에 표시하시면 나타납니다.

OSX

다음의 경로에 데스크톱에 생성한 SUserConfig.txt을 넣어줍니다.

/Users(혹은 사용자)/사용자명(집모양 아이콘)/Library/Preferences/Adobe Photoshop CC 2019 Settings/

맥도 윈도우와 마찬가지로 Library가 숨기면 처리되어 있어 터미널을 이용해 임시로 숨긴 항목을 표시해 주어야 합니다.

숨긴 항목 보이게 하기
defaults write com.apple.Finder AppleShowAllFiles TRUE

숨긴 항목 숨기기
defaults write com.apple.Finder AppleShowAllFiles FALSE

TRUE / FALSE 각각 적용 후 아래의 적용 명령어를 입력해 주어야 합니다.

해당 명령어 적용하고 Finder 재시작 하기
killall Finder

숨김항목 표시 설정이 되면 파인더에 다음과 같이 나타나게 되며 경로 이동을 하시어 패치를 진행하시면 됩니다.

최근 PlusX 공동대표 변사범씨의 강연을 다녀왔습니다. 태풍으로 인한 연기 저녁 7―9시라는 긴 시간이었음에도 불구하고 많은 분들이 참여했습니다.

강연 주제는 ≪브랜드 가치를 더해주는 통합적인 디자인 전략≫이지만,
PlusX와 본인의 디자인 사례들을 소개하면서 어떤 식으로 디자인했는지 작업 과정을 공유하는 자리가 더 컸던 것 같습니다.

대학 동기들과 창업을 시작으로…

변사범씨는 씨졸업 후 대학 동기들과 함께 작은 에이전시를 열면서 의 디자이너로서 시작했다고 합니다. 밤새고 게임하고 치킨 먹으면서 재미있는 경험을 쌓았다고 합니다.

그 후 유명한 에이전시 디자인피버에서 일을 하면서 네이버에서 일할 기회가 생겼고, 네이버에서 일하다가 마음이 맞는 사람들끼리 나와서 창업한 것이 plusX가 되겠습니다.

Plus + eXperience

플러스 엑스의 의미는 Plus + eXperience 로클 라이언트의 총체적인 경험 디자인을 해주겠다는 뜻을 가지고 있습니다.

얇은 선 요소를 이용한 브랜드 심볼 또한 자신들의 브랜드를 무색무취로 표현하기 위함이며 웹사이트 또한 포트폴리오 리스트를 보여줌으로써 플러스엑스가 지향하고자 하는 바를 디자인에 녹였다고 합니다.

여담으로 거의 매년 해외 공모전에서 수상을 하는데, 신청 비용이 부담되어 100개까지만 하고 그 이후로는 안 하겠다고…

실제 기획서부터 어떻게 작업을 진행하는지

본인의 작업 과정을 보여주는 것도 좋지만, 최고의 강연이라고 느낀 이유 중 하나가 실제 기획서를 어떻게 작성하고 견적서를 만드는지 등 디자인 업무의 총체적인 과정을 강연으로 알려주었다는 것입니다.

개발자의 경우 나라에서 단계에 따라 얼마 이상씩 주어야 한다는 것은 알고 있었지만, 업계에선 이를 기반으로 디자이너도 대략 산정하는지는 이번 강연을 통해 처음 알았습니다.

또한 실무에서 그룹과 레이어 정리를 잘해야 하는 것까지는 알고 있었지만, 아래로부터 쌓을지, 위로 차례대로 내려갈지 규칙이 그렇게 세분되어 있을 줄은 몰랐습니다.

버전 관리는 개발회사처럼 되돌릴 수 있거나 버전 관리가 가능한 별도의 솔루션을 사용할 줄 알았습니다만, 사내에 공유 서버로 사용하는 것 같았습니다.

브랜드 디자인의 경우 학교에서는 알아서 해와서 교수님 컨펌을 통해 판단 받는 것이 끝인 데 반해 어떻게 스케치하는지… 어떤 과정을 통해서 어떠한 결과물이 도출됐는지를 다 보여주셔서 좋았습니다.

그런 과정으로 설명을 들은 프로젝트 중 Tetrapodbrewing 는 정말로 재미있었습니다. 부산이라는 지역 정보에서 출발하여 맥주를 따르는 콕을 방파제 테트라포드 에서 가져오고, 또 그 모양에서 ‘세 명이 잔을 들고 짠’ 하는 모양으로 발전시키는 과정이 너무나 흥미로웠습니다. 그리고 되든 안 되든 브랜드의 시각적 연상 이미지나 특징이 있다면 어떻게든 다 넣어보라는 것도 Tetrapodbrewing 사례를 통해 알게 되었고요.

L.Point 사례를 통해 디자인이 바뀌면 처음에는 욕을 먹고 일부는 적응하고 다른 일부는 서비스를 떠나지만, 대부분 대체재가 없어 다시 재사용하며 적응하고 이것이 반복된다는 것도 알게 되었습니다.

제가 책을 통해 배우기로는 이러한 이유로 아주 조금씩 조금씩 요소들을 하나하나 바꿔나가는 것으로 알고 있었는데, 서비스 대체재가 없다면 굳이 길게 끌 필요 없이 한 번에 다 바꾸는 것도 나쁘지 않을 것(애플이 이에 해당하는 것 같네요.) 같았습니다.

저의 경우 대학 수업 때 매번 작업물을 말로만 설명하고 학생의 이해 여부를 떠나 따라오면 더 요구하고, 못 따라가면 버리는 식이었습니다. 이렇게 작업 과정을 한눈에 보여주어 큰 틀과 이해를 얻도록 했으면 어땠을까 하는 아쉬움이 남았습니다.

브랜드 스러움, 브랜드 경험

여러 방법론이 많겠지만, 변사범씨가 알려주는 브랜드 디자인의 과정의 첫 시발점은 다음과 같습니다.

1. 우리 브랜드 스러움은 무엇일까?

2. 우리 브랜드하면 떠오르는 키워드와 이미지

3. 우리 브랜드는 사람들에게 어떤 이미지(인식)로 기억되어야 할까?

4. 우리 브랜드다운 의사결정은 어떤 것일까?

위의 고민으로 도출된 결과를 기반으로, 아웃풋(그래픽, 영상, 공간, 웹/모바일 등)으로 풀어나갑니다.

마무리

디자인전공 학생들이 가장 가고 싶어 하고, 또 본인의 작업물을 진행할 때 참고하는 곳으로 유명한 PlusX.

PPT 디자인도 상당히 인상 깊었습니다. 실제로 어떤 분은 질문 시간에 사용된 영상을 물어보셨는데, 저는 영상보다는 변사범씨의 편집디자인 실력에 놀랐습니다. 당연한 거겠지만 타이포그래피를 사용하는 게 보통이 아니라는 것을 딱 보고 알 수 있었습니다. 특히 글자를 겹쳐 사용하는 것… 진짜 쉽지 않은데 강연 내내 PPT 디자인을 보며 감탄했습니다.

웹, 모바일, 영상, 편집 다 떠나서 최상단으로 올라가면 결국에는 하나의 브랜드 경험을 디자인하는 것으로 생각합니다. 새로운 경험 또는 기존의 경험을 확장해 가는 것이 앞으로 시각디자이너들이 지향해야 할 목표가 아닌가 생각해 봅니다.