웹디자인
ADVERTISEMENT
-
디자인
전자상거래 UI 디자인의 목표
전자상거래(e커머스) 사용자 인터페이스(UI) 디자인의 목표는 무엇일까요? 구매자가 어떤 방해도 없이 즐겁게, 본인이 원하는 대로 쇼핑을 마치고 결제를 완료하도록 만드는 것입니다. 구매자는 쇼핑이라는 긴 여정에서 결제에 이르기까지 보통 다섯 단계를 경험하게 되는데, 이 과정에서 여러 이유로 구매자의 이탈이 발생하기도 합니다. 이탈률은 구매율에 큰 영향... -
웹디자인
새해, 새로운 시작
2021년 새해에도 세계 곳곳에서 웹을 발전시키기 위한 많은 프로젝트가 진행 중입니다. 올해에도 우리 모두의 목표는 웹 성능을 향상시키는 것이겠죠. 배움에는 끝이 없습니다. 웹액츄얼리가 스매싱 매거진(Smashing Magazine)의 글 중 엄선해 소개하는 기사들을 통해 배움에 대한 갈증을 해소하시길 바랍니다. -
디자인
2021년으로 향하는 카운트다운
지난 1년 가장 많이 언급된 단어는 사회적 거리두기, 언택트였습니다. 1년 동안 게재한 <스매싱 매거진 월간 동향>의 큰 흐름 역시 원격 작업, 재택 근무였습니다. 올해 마지막 동향 기사에도 원격 근무에 도움이 될 만한 여러 툴들을 소개합니다. -
디자인
접근성과 사용성 엮어내기
빠르게 변하는 웹 환경에서 장애인들은, 특히 시각 장앤인들은 과연 인간다운 삶을 얼마나 영위하고 있을까요? 이런 염려와 공감, 배려의 마음으로 전 세계의 많은 개발자가 쉼 없이 '웹 접근성'에 대한 연구, 개발을 진행하고 있습니다. 필자 역시 시각 장애인을 대상으로 웹 접근성 테스트를 실시했고, 테스트를 통해 발견한 중요한 점들을 이 글을 통해 공유하고 ... -
웹디자인
[스매싱 매거진 10월 총정리] 가이드와 자료로 풍성한 가을
이제 2020년도 얼마 남지 않았습니다. CODIV-19로 인해 잃은 것이 많은 한 해였지만 본능적으로 한계를 극복하고 개선해 나아가면서 우리 모두 발전하고 있습니다. 그리고 재난을 통해 우리 자신을 한 번 더 돌아보는 계기를 맞았습니다. 그런 의미에서 전 세계 10월 웹 동향을 간추려 보았습니다. -
사용자경험
[스매싱 매거진 8월 총정리] 온라인에서 능력 향상하기
디자이너는 정확한 기능을 얻거나 대담한 상호작용 기능을 갖춘 디자인을 위해 많은 시간을 보내지만 사용자는 기능이나 디자인과 관계없는 아주 다른 문제들로 헤매기도 합니다. 결제를 하던 사용자가 오타를 발견하고 뒤로가기 버튼을 눌렀을 때 그동안 입력한 정보가 지워지면 어떨까요? 다시 시도할까요? 베이마드 연구소는 "기대를 저버리는 '뒤로가기' 버튼의 디자인 패... -
사용자경험
《사람을 배려하는 디자인》 저자 인터뷰
아름다운 웹사이트 만들기 제18탄 《사람을 배려하는 디자인》에는 탄생 배경이 있습니다. 저자 사라 와터 보에처는 사용자 입장에서 불쾌했던 경험을 기록했고 많은 사람이 나도 그런 경험이 있다며 말하기 시작했습니다. 공동 저자 에릭 마이어는 그녀의 이야기에 공감하고 손을 내민 사람 중 한 명이었으며, 점차 자신들의 이야기가 웹뿐 아니라 다양한 집단에 영향을 미... -
웹디자인
[스매싱 매거진 7월 총정리] 웹의 음지에서 들려오는 이야기
코로나19로 인해 전 세계가 암울한 시기를 보내고 있는 요즘 스매싱 매거진은 독자 여러분께 매달 업계의 싱싱한 뉴스를 전달하기 위해 노력합니다. 매일매일 웹사이트를 론칭하는 디자이너가 빠르고 정확하게 웹사이트를 배포할 수 있도록 도와주고, 애니메이션 제작 과정에서 손쉽게 수정하면서 시간도 아낄 수 있는 방법을 제안합니다. 한편 구글 크롬 개발자 그룹이 제시... -
웹디자인
IE에서 CSS 그리드 사용하기 – 중복된 그리드 영역 이름 지원!
Autoprefixer가 9.3.1 버전으로 업데이트되며 완전히 새로운 세계를 열어주었습니다. 이번 업데이트에서 핵심은 새로운 그리드 영역 시스템입니다. 그리드 변환을 사용하고 해제하는 작업은 정말 식은 죽 먹기가 되었습니다. /* autoprefixer grid: on */만 추가하면 그리드 변환 사용이 설정되고 on을 off로 바꿔주면 해제됩니다. 이 ... -
사용자경험
HTML 반응형 이미지 문법 가이드
브라우저가 마법을 부리는 HTML 문법들에는 srcset, <picture>, w 설명자가 있습니다. srcset만으로도 같은 이미지를 다른 크기로 또 아예 다른 이미지로 제공할 수도 있지만, w 설명자와 sizes 특성을 함께 사용하면 브라우저가 더 적절한 선택을 할 수 있습니다. 반응형 이미지로 '성능 향상'과 '디자인 제어'라는 두 마리 토...
ADVERTISEMENT