블로그 모아보기 - 인프런

기다림이 사라진 대신, 참을성이 사라졌다

#사소한 짜증이 너무 자주 생긴다로딩 화면이 잠깐 멈추면 괜히 휴대폰을 내려놓게 된다.메신저에 ‘읽음’이 찍혔는데 답장이 오지 않으면, 별일 아닌데도 신경이 쓰인다.결제 버튼을 눌렀는데 바로 완료 화면이 뜨지 않으면 다시 한 번 더 누른다.엘리베이터 버튼도 한 번이면 충분한데, 괜히 두 번 누른다.이런 순간들이 하루에 몇 번이나 반복된다.크게 화가 나는 것도 아닌데, 마음이 자꾸 바빠진다.문득 이런 생각이 들었다.나는 언제부터 이렇게 참을성이 없어진 걸까? #성격 문제라고 넘기기엔 너무 많은 사람들이 비슷하다처음에는 그냥 성격 탓을 했다.요즘 사람들이 다 그렇지 뭐, 나만의 문제는 아니라고.그런데 가만히 주변을 보면 나만 그런 것도 아니다.카페에서 주문이 조금 늦어지면 주변을 둘러보게 되고,배달 앱에서 라이더 위치가 멈춘 것 같으면 괜히 화면을 새로고침한다.영상이 끊기면 바로 뒤로 가거나 다른 콘텐츠를 찾는다.이쯤 되면 개인의 인내심 문제라고만 보기에는 이상하다.그래서 질문을 바꿔보게 된다.내가 참을성이 없어졌을까,아니면 참을 수 있는 상황이 사라졌을까? #우리는 정말로 ‘기다리지 않게’ 되었다요즘의 디지털 환경은 기다림을 최소화하는 방향으로 설계되어 있다.앱은 누르는 즉시 반응한다콘텐츠는 끝나기 전에 다음 편이 자동 재생된다배송은 ‘언젠가’가 아니라 ‘내일 도착’이 기본값이다메신저에서는 상대가 접속 중인지, 입력 중인지까지 보인다기다림은 점점 줄어들었고,우리는 기다리지 않아도 되는 환경에 익숙해졌다.문제는, 기다림이 사라지면서그 사이에 있던 시간도 함께 사라졌다는 점이다. #기다림은 단순한 공백이 아니었다예전의 기다림은 아무것도 하지 않는 시간이 아니었다.답장을 기다리며‘아직 바쁜가 보다’라고 스스로를 진정시키는 시간이 있었고,결과를 기다리며기대치를 조금 낮추고 마음의 여지를 만드는 과정이 있었다.기다림은 감정을 정리하고 조절하는 시간이었다.조금 불안해도, 조금 답답해도그 시간을 지나며 마음이 한 번 가라앉았다.하지만 지금은 다르다.결과는 즉시 주어지고, 감정은 준비할 틈이 없다.그래서 아주 사소한 지연에도 감정이 바로 튀어나온다. #예민해진 게 아니라, 완충 장치가 사라진 것일지도 모른다요즘 사람들은 유난히 예민해 보인다.작은 지연에도 불안해하고,조금만 예상과 달라도 쉽게 짜증을 낸다.하지만 이걸 단순히 “요즘 사람들은 참을성이 없다”라고 말해도 될까.어쩌면 우리는 예민해진 게 아니라,감정을 완충할 시간을 잃어버린 상태에 가까운지도 모른다.기다림이 사라진 자리에는즉각적인 반응만 남았고,그 사이를 메워주던 여유는 점점 줄어들었다. #그래서 조급함은 개인의 문제가 아니다책에서는 사람들이 불확실한 상황을 견디는 데 생각보다 많은 에너지를 쓴다고 말한다.기다림은 바로 그 에너지를 천천히 쓰게 해주는 장치였다.하지만 즉각적인 피드백이 기본이 된 환경에서는그 에너지를 쓸 기회 자체가 줄어든다.그러다 보니 우리는 스스로를“왜 이렇게 참을성이 없지?”라고 탓하게 된다.사실은 사람이 달라진 게 아니라,사람을 둘러싼 조건이 달라진 것에 가깝다. #기다리지 않아도 되는 세상에서어쩌면 요즘의 조급함은 개인의 성격 문제가 아니라너무 매끄러워진 디지털 환경이 만들어낸 부작용일지도 모른다.기다리지 않아도 되는 세상에서우리는 점점 기다리는 법을 잊어가고 있다.그리고 그 사실을,참을성이 없어진 나 자신의 문제로 오해하고 있을지도 모른다.

UX/UI･UI･기다림･참을성･심리학･디자인･디논･독서모임･챌린지

3

2

디지털 디톡스 사례로 살펴본, 행복을 주는 디자인

요즘 디지털 환경에서 느끼는 피로는 단순히 사용 시간이 많아서라기보다,계속해서 무언가에 반응해야 한다는 압박감에서 오는 경우가 많다.이번 주차 미션에서는 이러한 문제의식 속에서디지털 디톡스를 고려한 디자인 사례들을 ‘행복을 주는 디자인’의 관점으로 살펴보고자 했다.아래 사례들은 모두 사용자를 더 오래 붙잡기보다는,사용자가 스스로 디지털과의 거리를 조절할 수 있도록 돕는 디자인이라는 공통점을 가진다. #디지털 디톡스를 고려한 디자인 사례1. Apple의 집중 모드(Focus Mode)애플의 집중 모드는 모든 알림을 무조건 차단하는 방식이 아니라,상황에 따라 필요한 알림만 선택적으로 허용할 수 있도록 설계되어 있다.‘업무 중’, ‘휴식 중’, ‘수면 시간’처럼 사용자의 상태를 기준으로 디지털 환경을 재구성해 준다는 점이 특징이다.이 기능은 사용자가 알림을 무시하고 있다는 죄책감을 느끼지 않게 만들고,지금은 반응하지 않아도 괜찮은 시간이라는 신호를 시스템 차원에서 제공한다. 2. Instagram의 ‘Take a Break’ 기능인스타그램은 일정 시간 이상 콘텐츠를 소비하면“잠시 쉬어가도 괜찮다”는 메시지를 사용자에게 보여준다.계속해서 스크롤하도록 유도하는 대신, 의도적으로 멈출 수 있는 계기를 제공하는 디자인이다.이 기능은 사용자의 행동을 강제로 제한하지 않지만,계속 머물러야 할 이유가 없다는 점을 부드럽게 상기시킨다. 3. YouTube의 자동 재생 제어유튜브의 자동 재생 기능은 한때 ‘계속 시청’을 자연스럽게 만드는 대표적인 설계였다.하지만 최근에는 자동 재생을 끄거나, 사용자가 다음 행동을 선택하도록 하는 구조가 강조되고 있다.이 변화는 콘텐츠 소비의 흐름을 끊고,“여기서 멈춰도 된다”는 선택지를 사용자에게 돌려준다. 앞서 살펴본 사례들은 모두 사용자의 감정을 직접적으로 자극하거나 조작하려 하지 않는다.대신 사용자가 디지털 환경을 어떻게 해석하고 인식하는지에 초점을 맞춘다.이는 책에서 설명한 파레이돌리아(paraeidolia) 개념과도 연결된다.사람은 의미 없는 자극에도 의미와 의도를 부여하는 경향이 있으며,디지털 환경에서는 알림, 숫자, 반복적인 반응이 실제보다 훨씬 더 중요한 신호처럼 인식되기 쉽다.이러한 인지 특성 때문에 사용자는 단순한 알림에도 ‘지금 반응해야 할 것 같은 느낌’을 받거나,디지털 서비스와 마치 관계를 맺고 있는 것처럼 감정을 투사하게 된다.책에서 AI나 디지털 대상이 사람처럼 느껴지는 이유 역시이러한 반복적인 상호작용과 감정 투사 때문이라고 설명한다. #감정을 줄이는 것이 아니라, 해석의 단서를 줄이는 디자인내가 찾은 디지털 디톡스 사례들은 사용자의 감정을 억제하거나 차단하려 하지 않는다.대신 감정이 과도하게 발생할 수 있는 단서 자체를 줄이는 방식을 선택한다.알림의 빈도를 줄이고,계속 이어지는 상호작용의 흐름을 끊고,사용자가 스스로 멈출 수 있는 선택지를 제공함으로써디지털 대상과의 관계가 과도하게 형성되는 것을 방지한다.그 결과 사용자는 디지털 환경 속에서도 감정 소모 없이 머물 수 있게 되고,이 안정감은 ‘편안하다’, ‘괜찮다’라는 감정으로 인식된다.이러한 감정이 바로 책에서 말하는 '행복한 사용자 경험'의 한 형태라고 생각한다. #행복을 주는 디자인이란...이 사례들을 정리하며나는 행복을 주는 디자인을 다음과 같이 정의하게 되었다.행복을 주는 디자인이란사용자를 계속 붙잡는 디자인이 아니라,사용자가 스스로 거리를 조절할 수 있게 해주는 디자인이다.디지털 디톡스를 고려한 디자인은 즉각적인 즐거움을 제공하지는 않을 수 있다.하지만 사용자가 디지털 환경 속에서도 자신의 리듬을 잃지 않도록 돕는다는 점에서장기적인 안정감과 안도감을 제공한다.그리고 이것이 바로 ‘사용자를 행복하게 하는 UX’가 아닐까 생각한다. #참고 문헌 : https://www.frameout.com/insight-news/designing-for-digital-wellbeing##디논과 함께하는 독서모임의 일환으로 작성되었습니다.#독서모임 링크 : https://inf.run/hYv8f

UX/UI･UI･디지털디톡스･심리학･디자인･디논･독서모임･행복한디자인･챌린지

2

0

[인프런 워밍업 클럽 스터디2기] 프로덕트 디자인 1주차 발자국

학습 내용베리어블의 정의와 용도베리어블의 구성과 이름짓기 방법베리어블을 등록하고 효율적인 활용을 위해 노출 범위를 설정하는 법저장한 컬러 및 단위, 폰트 스타일을 바탕으로 디자인 파운데이션을 문서화 하는법입력 컴포넌트 만들기미션공개 목표 : 베리어블 등록하고 파운데이션 문서화하기1주차 개인 목표목표 1 : 가장 간단한 방식의 베리어블 등록방식 실험해보기목표 2 : 플러그인보다 보기 편한 방식으로 문서화 시도하기워밍업 클럽 전에 여러번 볼드님이 운영하시는 스터디에 참여했었고, 앞쪽 내용은 여러번 들었다. 그동안 강의는 열심히 따라했다고 생각했지만 개발까지 베리어블을 적용해볼 수가 없어 효용성을 체감하기 어려웠다.이제 그냥 강의를 따라하는 것 보다는 나름대로 여러가지 추가적인 공부를 하면서 의의를 찾아봐야겠다고 생각했다.개인 목표 1 실습 과정 새로운 프로덕트를 만든다고 생각하고, 가장 간단한 베리어블 시스템을 만들어보자회사마다 베리어블 구조가 다 달랐는데, 다 나름대로 좋은 부분이 있었다. 다만 일부 회사의 경우 너무 체계적인게 오히려 작은 회사에서 그대로 적용하기엔 문제가 있어보였다. 논리적이긴 한데, 막상 눈에는 잘 안들어오는 느낌? 베리어블 정의가 복잡하면 직관적으로 파악하기 어려워 활용도가 떨어진다고 생각해서 구분을 최소화했다. 텍스트 아이콘 컬러값이 대체로 비슷해 머터리얼 가이드에서는 둘을 따로 구분하지 않아서 베낌 > Text로 정의마찬가지로 토글, 버튼등 인터렉션 컴포넌트도 대체로 비슷해서 구분 안하기로 했다. > Interaction으로 정의상태 컬러(Hover,Pressed등)는 컴포넌트에 한번 지정하고 나면 실제 UI작업에서는 거의 쓰이지 않기 때문에 잘 안보이는게 좋겠다는 생각이 들어서 목록 최하단에 뜰 수 있도록 분리했다. 개인 목표 2 실습 과정플러그인으로 뽑았을 때 나오는 컬러차트 말고, 좀더 명료한 방식으로 문서화 해보자예전에 디자인 스타일 가이드를 나름대로 만들어서 전달했는데, 프론트분들이 냅다 개별 화면 마크업 하는데 주력하고 잘 봐주지 않아서 시무룩했던 경험이 있다. 시간도 없거니와 눈에 잘 안들어왔던 모양이다.기껏 시스템을 만들었으면 잘 읽히게 문서화를 하는것도 중요하다고 생각해서 다른 회사 파운데이션 가이드를 참조해서 만들어봤다. 참조 : 11번가 및 라인 디자인 시스템 가이드대체로 양식이 비슷한데, 라인이 특히 컬러 사용에 대한 정의가 깔끔해서 참고가 되었다.실무에서는 정의한 가이드와 다르게 컬러를 추가하거나 이미 다르게 사용된 경우가 많을것이라 생각된다. 이런 엣지케이스에 어떻게 대응할지, 문서를 어떻게 업데이트하고 유지할지도 구성원간의 합의가 필요할 것 같았다.

UI･FIGMA･DesignSystem

0

[인프런 워밍업 스터디 1기 디자인] 3주차 - 컴포넌트 만들기 2

지난 주에 이어 컴포넌트 만들기를 계속 진행했습니다. 다양한 컴포넌트들을 만들어 보니 자신감도 생기고 Figma 툴도 점점 능숙해져 갑니다. 과제가 다 끝나고 빨리 사이드 프로젝트를 시작해보고 싶습니다. Card 컴포넌트컨텐트를 표현하기 좋은 Card 컴포넌트 입니다. 단순한 형태로 만들어서 현재는 이미지, 제목, 부제목, 설명, 버튼만 넣고 뺄 수 있습니다. 그러나 좀 더 확장성 좋은 구조로 개선할 수 있어 보입니다. 나중에 연습해볼 Modal 컴포넌트에서 Slot 을 활용해 확장성이 좋은 컴포넌트를 만들었는데 참고하면 좋을 것 같습니다. Modal 컴포넌트Slot 을 활용해서 해당 Slot 에 다른 컴포넌트를 넣을 수 있도록 확장성 있게 설계했습니다.이 모달 컴포넌트를 사용해서 다양한 모달을 구현했습니다.그러나 확장성을 위해서 너무 자유도 높은 컴포넌트를 설계하면 사용할 때 오히려 불편합니다. 그래서 변하는 부분과 변하지 않는 부분을 구분하는게 중요합니다. 이 Modal 컴포넌트는 인스턴스를 만드는데 바로 사용되기 보다 다양한 모달 컴포넌트를 만들기 위한 재료로 사용되면 좋을 것 같습니다. Toast와 Alert 컴포넌트Toast 와 Alert 은 쓰임새가 비슷해서 좀 헷갈립니다. uiguideline.com 에서 제공하는 정의를 통해 구분지어 봅시다. Toasts are shown as a floating box typically in the top right of the page. They can optionally be displayed on other edges of the screen (top-left, top-center, bottom-left, bottom-center, or bottom-right). Toasts provide limited space for content, and therefore the content must be short and concise, providing immediate feedback in response to a user action or informing users of a process that the app has performed or will perform. Disappear automatically or can be dismissed by the user.Generally, an alert displays a prominent message at the top of the screen. It could be used to promote a new feature or provide action-based feedback messages. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any timeToast 는 주로 화면의 오른쪽 상단에서 떠오르고 짧고 간결한 메세지를 담고 있습니다. 사용자 행동에 즉각적인 피드백이나 애플리케이션이 잘 동작하고 있음을 알려주는 정보를 담습니다. 자동으로 사라지거나 사용자에 의해 없앨 수 있습니다. Alert 은 화면 상단에 눈에 띄는 메세지를 보여줍니다. 새로운 기능이나 사용자 행동을 수반하는 피드백 메세지를 담을 수 있습니다. alert은 영구적이고 모달처럼 동작하지 않기 때문에 사용자가 언제든지 무시하거나 반응할 수 있습니다. 핵심은 Alert 은 자동으로 닫히지 않고 화면 상단에 위치하지만 Toast 는 화면 가장자리에서 즉각적으로 튀어나와서 자동으로 사라질 수 있다는 것입니다. 이제 두 컴포넌트를 구분해서 사용할 수 있을 것 같습니다. Table 컴포넌트테이블 컴포넌트는 복잡할 줄 알았는데 생각보다 쉬웠습니다. 테이블을 구성할 요소들을 나누어 part 컴포넌트로 나누고 조합하면 금방 테이블이 만들어집니다. 3주동안 과제를 진행해보며평균적으로 하루동안 봐야할 강의는 1시간 정도이고 이를 연습해보고 미션까지 수행하는 것은 저에겐 3시간은 필요한 것 같습니다. 매일 4시간씩 과제를 한다는게 정말 쉽지 않은 일인데 스스로 대견하다는 생각도 듭니다. (물론 저는 지금 이틀정도 밀려있습니다.) 밀리지 않고 진도에 맞춰서 진행하는 다른 인프러너분들 정말 존경합니다. 이제 진짜 일주일도 안남았는데 끝까지 완주해서 오마카세 먹으러 갈랍니다. (OT 때 스스로 정하신 자기 보상 기억하시죠? 저도 방금 문득 생각났습니다ㅎㅎㅎ) 그럼 모두 화이팅 🔥

UX/UI･Figma･UX･UI･Component･Design･Product

0

[NodeJS] Express.js로 웹 서버 만들기 시리즈

최근 node.js를 활용하면서 json-server란 기능으로 간단한 CRUD까지 구현해 보았다. 작업을 통해 json으로 간단한 db의 기능을 만들 수 있는 점이 나에게는 무척 흥미로웠다. 이번 시리즈에서는 express 웹서버와 json-server로 CRUD까지 구현해 본 내용까지 정리해 보려고 한다. Node.js의 Express로 웹 서버 만들기 웹 서버의 라우팅 처리 방법 Express에서 에러 처리와 정적 파일 제공하는 방법 Json-server 구축 및 활용(소스제공) 자세히 보기

프론트엔드･웹퍼블리셔･프론트엔드･UI･UX

0