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

스매싱 매거진 인기 주제

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

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

• “스케치^Sketch로 포르셰 911 만들기”(전체 튜토리얼) – 니콜라 라자레비치^{Nikola Lazarević}
• “오감을 충족하는 웹사이트를 디자인할 수 있습니까?” – 수잰 스카카^{Suzanne Scacca}
• “애플리케이션 CSS 커스텀 속성으로 색상 배색 설정하기” – 아르투르 바사크^{Artur Basak}
• “가독성 향상을 위한 최신 CSS 기술” – 에도아르도 카바차^{Edoardo Cavazza}
• “와이어프레임을 접근성 있는 HTML/CSS로 변환하는 법” – 해리스 슈나이더먼^{Harris Schneiderman}

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

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

2020년 현황

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

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

HTML과 CSS 속 단어 깊이 배우기

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

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

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

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

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

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

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

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

‘뒤로가기’ UX 버튼

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

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

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

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

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

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

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

재미있는 폼 양식

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

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

CSS로만 만든 움직이는 밑줄

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

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

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

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

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