Skip to content

[스매싱 매거진 8월 총정리] 온라인에서 능력 향상하기

너무나 많은 일이 벌어지고 있어 저희는 여러분이 최신 정보를 놓치지 않도록 돕기로 다짐했습니다. 물론 소셜미디어에서 저희를 팔로우하거나 RSS 피드를 구독해도 좋지만 한곳에서 중요한 일들을 정리해볼 수 있는 것도 좋겠죠.

스매싱 매거진 인기 주제

우리는 웹 산업에서 일어나는 다양한 주제들에 관한 새로운 글을 매일 올립니다. RSS 피드를 구독하셔서 매거진에 올라오는 새로운 글을 바로 읽어볼 수도 있답니다.

그동안 독자 여러분이 즐겁게 읽고 추천한 글들을 소개합니다.

 

스매싱 뉴스레터: 주간 베스트 소식

뉴스입니다! 매주 스매싱 뉴스레터를 발송하지만 더 짧고 주제에 집중한 구성을 목표로 합니다. 접근성이나 CSS, UX 등이 주제가 될 수 있습니다. 기다리면서 지켜보세요! 유용한 콘텐츠를 제공하고 웹 업계에서 이뤄지고  있는 멋진 일들을 소개하고자 합니다.

 

2020 현황

매일 웹에서 일어나고 있는 많은 일을 따라잡기 어렵지만 잠시 멈춰 서서 실제로 어떤 상태인지 살펴보는 건 훨씬 더 어렵습니다. 다행히 특정 개발에 대한 정보를 모으는 설문조사와 보고서가 있습니다. “CSS 현황”과 “자바스크립트 현황”에서는 CSS와 자바스크립트의 트렌드를 살펴봅니다. “2019년 디자인 시스템” “프론트엔드 도구” “오픈소스 보안” 같은 연구도 있습니다.

The State Of Things In 2020

기술뿐 아니라 업계의 급여 수준도 알아두는 편이 좋습니다. “Levels.FYI Salries”와 “UX Designer Salaries” “디자인 인구 조사 2019”가 도움이 될 겁니다. 또한 “원격근무 현황 2020”을 검토해보세요. 원격근무를 효율적으로 만드는 방법에 대한 트렌드를 살펴봅니다. 조사 대상의 통계 때문에 편향될 수 있으므로 의심을 거두지 말고 통찰력을 발휘해보세요.

 

HTML CSS 단어 깊이 배우기

CSS와 HTML 코드에서 특정 상황에 맞는 정확한 단어를 찾아보고 있다면 지금 소개해드리는 자료를 북마크해두세요. 빌 바니넨Ville V. Vanninen의 도움으로 여러분은 이제 문서 형식doctypes, 속성 이름attribute names, 태그tags, 미디어 기능media features의 차이를 상호작용을 통해 배울 수 있습니다.

CSS And HTML Vocabulary

CSS 용어HTML 용어의 멋진 상호작용 방식 목록을 만날 수 있습니다. 오른편에 표시된 용어 중 하나를 클릭해 페이지에 표시된 코드 샘플에 강조 표시를 할 수 있습니다. 다른 언어의 목록 역시 제공합니다.

 

제품 브랜드를 변경하기 위한 실용적인

제품의 수명이 길어질수록 사람들은 자문합니다. 브랜드를 바꿔야 할까요? 과연 언제쯤이 적당할까요? 오버플로Overflow도 얼마 전 같은 상황에 놓였습니다.

Evolving the Overflow Brand

사용하기 쉽고 실용적인 다이어그램을 만들 수 있던 도구에서 디자인 커뮤니케이션, 프레젠테이션 흐름도에 쓰이는 도구로 진화한 자신들의 제품을 돌아보며 브랜드를 바꿀 때라는 결정을 내렸습니다. “오버플로 브랜드 발전시키기”란 글에서 오버플로 팀은 자신들의 접근 방식과 그 과정에서 배운 내용을 공유합니다. 여러분도 재설계를 하게 된다면 반영할 수 있는 흥미로운 아이디어와 참조 사항들이죠. 그 과정에 더 쉽게 접근할 수 있도록 해주는 팁은 다음과 같습니다. 제품을 의인화하여 브랜드를 새롭게 바꾸었을 때 어떤 사람일지, 어떤 느낌을 줄지 상상해보세요.

 

비활성화된 버튼들을 좋게 만드는

비활성화된 버튼은 짜증 난다.” 널리 퍼진 UI 패턴에 대한 함푸스 세트포르스Hampus Sethfors의 아주 강한 발언입니다. 함푸스가 주장하듯 비활성화된 버튼은 사용자 경험을 불편하게 만들고 ‘보내기’ 같은 명령어가 담긴 버튼을 눌렀을 때 아무 일도 일어나지 않아 짜증과 혼란을 유발하기도 합니다. 비활성화된 버튼은 사람들이 가능한 한 적은 힘을 들여 작업을 완료하는 걸 막습니다. 그뿐만 아니라 낮은 대비와 보조 기술이 비활성화된 버튼에 접근할 수 없어 장애가 있는 사람들에겐 장벽으로 작용합니다. 그럼 어떻게 해야 더 좋게 만들 수 있을까요?

Disabled buttons suck

함푸스는 기본적으로 버튼을 활성화하고 사용자가 버튼을 클릭하면 오류를 띄우라고 제안합니다. 버튼이 비활성화된 모습을 보여주려면 활성화된 상태는 유지한 채 CSS를 사용해 (물론 대비를 고려해) 회색으로 보이게 만들고, 의미 있는 오류 메시지에 강조를 해줍니다. 작은 세부 사항이 차이를 만드는 셈이죠.

 

뒤로가기’ UX 버튼

정확한 기능을 얻거나 대담한 상호작용 기능을 갖춘 디자인으로 발전시키기 위해 많은 시간을 보내곤 합니다. A/B 테스트에서 결정이 미치는 영향을 측정하고 전환과 클릭률을 연구하며, 트래픽을 분석하고 가장 큰 이슈들을 찾아봅니다. 하지만 데이터는 이야기의 일부일 뿐이죠. 고객들은 기능이나 디자인과 관계없는 아주 다른 문제를 가지고 있기도 합니다.

경험의 질은 예기치 못한 상황에서 찾을 수 있습니다. 결제를 하던 고객이 실수로 새로고침을 눌렀다면 어떻게 될까요? 휴대폰에서 위아래로 스크롤 할 때는요? 사용자가 확인 페이지에서 오타를 발견하면 지금까지 작성한 결제 양식이 지워질까요? 싱글 페이지 애플리케이션single page application의 다단계 과정에서 실수로 ‘뒤로가기’ 버튼을 누른다면 무슨 일이 벌어지나요?

Design Patterns That Violate “Back” Button Expectations

실제로 예상치 못한 ‘뒤로가기’ 버튼은 종종 심각한 사용성 문제를 일으키며 그중 몇 개는 베이마드 연구소Baymard Institute의 “기대를 저버리는 ‘뒤로가기’ 버튼의 디자인 패턴”이란 글에서 소개하고 있습니다. 오버레이부터 라이트 박스, 앵커 링크, 콘텐츠 점프, 무한 스크롤, ‘추가로 불러오기’, 필터링, 정렬, 아코디언, 결제, 인라인 편집 같은 과정에서 ‘뒤로가기’ 버튼을 테스트해볼 가치가 있습니다.

HTML5의 히스토리 API를 사용하거나 특히 history.pushState()를 사용해 페이지를 새로고침할 필요 없이 URL 변경을 유도할 수도 있습니다. 여기서는 일반적인 문제부터 올바른 해결법을 자세히 설명합니다. 일독하고 저장한 뒤 언제든 다시 볼 만한 글입니다.

 

오래된 문제에 대한 최신 CSS 해결법

레이아웃 및 스타일링과 관련하여 모든 프로젝트에서 꾸준히 나타나는 몇 가지 문제가 있습니다. 체크박스 및 라디오 버튼 스타일링, 유동적인 글꼴 크기, 목록 스타일링 또는 접근성 좋은 드롭다운 메뉴 같은 것들이죠.

Screenshot from the Modern CSS series by Stephanie Eckles

스테퍼니 에클스Stephanie Eckles가 연재하는 “최신 CSS”는 오래된 CSS 문제에 대한 최신 CSS 해결책을 탐구합니다. 하나씩 깊이 살펴보며 최신 브라우저에서 동작하게 할 수 있는 가장 믿을 만한 기술을 탐구합니다. 스테퍼니는 데모와 바로 사용할 수 있는 코드도 제공합니다. 계속 확인하고 구독할 만한 가치가 있는 시리즈입니다.

 

재미있는 양식

웹 폼 양식은 말 그대로 모든 곳에 있습니다. 구독 양식부터 필터, 대시보드까지 다양하지만 제대로 만들기는 쉽지 않습니다. 어떻게 인라인 검증을 처리할 수 있을까요? 에러 메시지는 어디에 어떻게 띄워야 할까요? 자동완성은 어떻게 디자인하고 만들 수 있을까요? 폼 양식 디자인에 관한 자료가 고갈되지 않는 것도 다 이유가 있는 법이죠. 심지어 최근에 새로운 자료들이 나타났답니다.

Graphic of a checkbox box

제리 리드Geri Reid가 폼 양식과 관련한 모범 사례, 연구 지식, 자료, 예시를 모아 “폼 양식 디자인 가이드라인”을 만들었습니다. 미하엘 샤너글Michael Scharnagl은 “재미있는 폼 양식”에 폼 양식과 관련된 몇 가지 모호한 사실들과 재미있는 작업들을 모았습니다. 애덤 실버Adam Silver는 블로그에 웹 폼 양식의 모범 사례에 관한 글을 쓰고 있고, 최근에는 웹 폼 양식 디자인 시스템도 발매했습니다. 마지막으로 헤이던 피커링Heydon Pickering은 자신의 블로그에 웹 폼 양식과 관련한 인클루시브 컴포넌트 패턴을 소개합니다. 폼 양식을 설계하거나 구축할 때 읽어봐야 할 훌륭한 자료들입니다. 이 모두가 비용이 많이 발생할 상황을 예방해줍니다.

 

CSS로만 만든 움직이는 밑줄

밑줄은 어렵습니다. 특히 뻔한 text-decoration: underline을 넘어서는 작업을 수행하려는 경우 더욱 그렇습니다. 캐시 에번스Cassie Evans 블로그에서 링크 밑줄의 호버 효과에 감명을 받은 니키 묄만Nicky Meulemann은 비슷한 걸 만들기로 했습니다. 선이 뒤로 움직이며 색상이 바뀌는 호버 효과가 있는 밑줄을 말이죠.

A CSS-only, animated, wrapping underline

어려운 점은 이겁니다. 애니메이션 중에 선은 닿지 않아야 하며, 가장 중요한 것은 링크가 다음 줄로 넘어가더라도 링크가 걸린 부분엔 모두 밑줄이 깔려야 한다는 점이죠. 차근차근 진행하고 싶다면 니키의 튜토리얼을 확인하세요.

 

맥에서 개발 작업 흐름 설정하는 방법

새 컴퓨터에 개발 환경을 설정하기란 프로그래밍이 처음이 아닌 사람에게도 혼란스럽습니다. 웹 커뮤니티의 기여자들과 함께 수라브 바야지Sourabh Bajaj는 쉽게 일을 해결할 수 있는 포괄적인 가이드를 만들었습니다.

macOS Setup Guide

이 가이드는 맥 환경을 설정하거나 새 언어 또는 라이브러리를 설치하려는 모든 사람이 참조할 수 있는 자료입니다. 홈브루Homebrew부터 노드Node, 파이썬Pyrhon, C++, 루비Ruby 등에 이르기까지 작업을 시작하고 실행하는 데 필요한 모든 과정을 단계별로 소개합니다.

 

 

도서 소개


헤이던 피커링의 《인클루시브 디자인 패턴
누구라도 접근 가능한 인터페이스를 만드는 데 실제로 적용할 수 있는 인클루시브한 디자인 패턴을 알려드립니다. HTML과 CSS·자바스크립트 라이브러리, WAI-ARIA 역할 및 웹 콘텐츠 접근성 지침의 올바른 사용법, 반응형 디자인에서 일반적인 접근성 문제를 해결하는 방법, 건너뛰기 링크를 다루는 방법, 내비게이션 영역 및 랜드마크의 효율적인 활용법, 버튼이나 폼을 유지하는 방법 등을 구체적으로 설명합니다.

저작권 정보이 글은 Smashing Magazine 기사를 번역한 것입니다. 저작권자의 정당한 허락을 받은 저작물로 한국어판 저작권은 웹액츄얼리에 있습니다. 웹액츄얼리의 서면 동의 없이 무단 전재, 복제를 금합니다. 원본은 Community Resources, Weekly Newsletter, And Boosting Skills Online에서 확인할 수 있습니다.
참여를 기다립니다!웹액츄얼리에서 웹디자인 관련 영문 번역자를 찾습니다. 웹 콘텐츠 번역에 관심 있는 분은 메일로 간략한 본인 소개와 번역 이력을 보내주시면 연락드리겠습니다.
books@webactually.com

Smashing Magazine 기사 모아보기



맨위로