배고픈푸의 꿀단지

Weekly UI/UX 업데이트 뉴스 2월 2째주

어떤 사이트의, 어떤 앱의 UI나 UX를 살펴보고 리뷰하는 것도 좋지만 내가 다니는 회사말고 다른 회사에서는 어떤 부분을 업데이트했는지, 어떤 기능이 추가됐는지 매번 체크하는 것 또한 중요합니다. 이를 통해 내가 담당하고 있는 서비스에 적용할 인사이트를 얻거나 현재 흐르는 메타를 쉽게 확인할 수 있기 때문이죠. 그래서 주 단위로 각종 앱/웹에서 업데이트된 부분을 콕 찝어 드립니다(사실 스스로 공부하기 위한 성격이 강합니다ㅎㅎ) 첫번째. 쿠팡플레이 앱 - 검색 메인에 지금 뜨는 컨텐츠 영역 추가 1. 업데이트일: 1월 20일 2. 주요 기능 및 특징 : 1) 통합 검색 페이지에 '지금 뜨는 컨텐츠' 영역이 추가됨 3. 추측해볼 수 있는 업데이트 이유: 1) 빠른 검색을 돕기 위해 2) 인기 있는 컨텐츠를 ..

Weekly UI/UX 업데이트 뉴스 1월 4째주

어떤 사이트의, 어떤 앱의 UI나 UX를 살펴보고 리뷰하는 것도 좋지만 내가 다니는 회사말고 다른 회사에서는 어떤 부분을 업데이트했는지, 어떤 기능이 추가됐는지 매번 체크하는 것 또한 중요합니다. 이를 통해 내가 담당하고 있는 서비스에 적용할 인사이트를 얻거나 현재 흐르는 메타를 쉽게 확인할 수 있기 때문이죠. 그래서 주 단위로 각종 앱/웹에서 업데이트된 부분을 콕 찝어 드립니다(사실 스스로 공부하기 위한 성격이 강합니다ㅎㅎ) 첫번째. 배달의 민족 - 필터, 우리 지역 맞집 우선순위 강화 1. 업데이트일: 1월 21일 2. 주요 기능 및 특징 : 1) 배달 홈 하단에 정렬/필터 기능 추가, 우리 동네 맛집 영역 노출(원래 있던거라면 죄송.....ㅠㅠ) 3. 추측해볼 수 있는 업데이트 이유: 1) 유저 위..

Weekly UI/UX 업데이트 뉴스 1월 3째주

어떤 사이트의, 어떤 앱의 UI나 UX를 살펴보고 리뷰하는 것도 좋지만 내가 다니는 회사말고 다른 회사에서는 어떤 부분을 업데이트했는지, 어떤 기능이 추가됐는지 매번 체크하는 것 또한 중요합니다. 이를 통해 내가 담당하고 있는 서비스에 적용할 인사이트를 얻거나 현재 흐르는 메타를 쉽게 확인할 수 있기 때문이죠. 그래서 주 단위로 각종 앱/웹에서 업데이트된 부분을 콕 찝어 드립니다(사실 스스로 공부하기 위한 성격이 강합니다ㅎㅎ) 첫번째. PC & 모바일 카톡 - 오픈 채팅 목록 표시 방식 변경, 채팅 초대 기능 개선 1. 업데이트일: 1월 16일 2. 주요 기능 및 특징 : 1) 오픈 채팅 목록에서 채팅방 커버 이미지를 설정할 수 있게 기능 업데이트(모바일) 2) 방장이 멤버 초대 권한을 설정하면 멤버들이..

Weekly UI/UX 업데이트 뉴스 1월 2째주

어떤 사이트의, 어떤 앱의 UI나 UX를 살펴보고 리뷰하는 것도 좋지만 내가 다니는 회사말고 다른 회사에서는 어떤 부분을 업데이트했는지, 어떤 기능이 추가됐는지 매번 체크하는 것 또한 중요합니다. 이를 통해 내가 담당하고 있는 서비스에 적용할 인사이트를 얻거나 현재 흐르는 메타를 쉽게 확인할 수 있기 때문이죠. 그래서 주 단위로 각종 앱/웹에서 업데이트된 부분을 콕 찝어 드립니다(사실 스스로 공부하기 위한 성격이 강합니다ㅎㅎ) 첫번째. PC 유튜브 - 마우스 오버 재생 기능 1. 업데이트일: 1월 11일로 추측 2. 주요 기능 및 특징 : 1) PC 유튜브 리스트에 마우스 오버시 풀 영상 재생 2) 타임 시킹이 가능함 3) 일반 영상 플레이처럼 일정 시간(약 10초) 영상을 플레이한 경우 시청으로 간주되..

나를 위한 글(14): 컨테이너 쿼리!! 미디어 쿼리를 대체할 강력크한 그 문법을 arboja

지금까지 프론트앤드 개발자분들은 브라우저 가로 사이즈에 따라 컴포넌트가 유동적으로 변하는 반응형 웹을 구현하기 위해 미디어 쿼리를 많이 이용해왔습니다. 근데 몇 달전, 혜성처럼 등장한 새로운 문법이 있으니! 그것은 바로 컨테이너 쿼리!!(Container Query) 컨테이너 쿼리는 container 가로, 세로 사이즈와 같은 특성에 기반한 쿼리로써 미디어 쿼리와는 접근 방식이 다릅니다. 미디어 쿼리의 경우 브라우저 사이즈를 기준으로 컨텐츠가 유동적으로 변한다면 컨테이너 쿼리는 container의 사이즈에 맞춰 유동적으로 변하는 형태입니다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, enim! Lorem ipsum Lorem ipsum d..

나를 위한 글(13): 9가지 규칙만 알아도 에러 메세지 작성 걱정 NO!

사이트에서 흔히 접하는 에러 메세지들을 별로 중요하지 않게 생각할 수 있지만. 실제로는 UX적인 측면에서 중요한 역할을 합니다. 잘못된 에러 메세지로 인해 사용자는 혼란을 겪기도 하고 사이트에 대한 전반적인 평을 안 좋게 할 수 있기 때문이죠. 마이크로 소프트 윈도우 개발 가이드라인에는 이런 문구가 적혀 있습니다. 효과적인 에러 메세지는 어떤 문제가 발생했는지, 왜 이 문제가 발생했는지, 어떻게 해결해야 하는지를 사용자에게 알려주는 것이다. 이를 통해 사용자가 문제를 해결하기 위한 다른 행동을 할 수 있게 이끌어야 한다. 에러 메세지를 잘 만드는 것이 어렵긴 하지만, 아래 10가지 법칙만 잘 지킨다면 좋은 에러 메세지를 만들 수 있습니다. 1. 오타 없이 문법을 지켜라 정확한 문장은 사용자들이 메세지를 ..

나를 위한 글(12): 인피니티 스크롤 vs 페이지네이션

"리스트 화면을 그려야 하는 데 인피니티 스크롤이 편할까 아니면 페이지네이션이 편할까? 왠지 인피니티 스크롤이 뭔가 있어 보이는 데.." 모바일 환경에서 VOD 리스트나 게시글 리스트 화면을 구현할 때 머리 속에서 고민되는 부분입니다. 몇몇 기획자나 디자이너들도 이런 고민을 가끔 하리라 생각합니다. 각각의 구현 방식마다 장점과 단점을 갖고 있습니다. 이번 글에서 인피니티 스크롤과 페이지네이션의 장, 단점을 살펴봄으로써, 사이트를 기획하거나 디자인할 때 더 적합한 방식을 적용하려 합니다. 인피니티 스크롤링 인피니티 스크롤링은 정해진 마지막 영역 없이 게속 스크롤하면 수많은 컨텐츠들이 새로 로드되는 방식입니다. 이 방식은 스크롤 할 때마다 리스트가 새로 불러지는 방식이지만, 모든 사이트와 앱에 적용할만큼 만..

나를 위한 글(11): 더 나은 UX 디자인을 위한 밀러의 법칙

우리의 뇌는 복잡한 정보를 처리하기 위하여 다양한 방법들을 고안해냅니다. 이런 방법에는 일반적인 사이트나 앱에서 볼 수 있는 텍스트, 컬러, 이미지, 애니메이션 등과 같은 서로 다른 요소들과 컴포넌트 사이의 차이를 구별해내는 것을 포함합니다. 이렇게 모든 정보를 처리하기 위한 일련의 노력들을 "인지 부하'라 부르고, 이를 최소화한 상품 디자인은 성공적이라 부를 수 있습니다. 밀러의 법칙(Miller’s Law)은 평균적인 사람들은 한정된 범위 내에 정보만을 기억한다는 심리학적 원리입니다. 이 이론을 어떻게 디자인에 적용시켜볼 수 있을까요? 청킹 Chunking은 조금 더 쉽고 빠르게 정보를 이해하기 위해 각각의 정보를 관련된 소그룹으로 나누는 것을 말합니다. 위의 이미지처럼 전화번호가 있다고 가정해보죠...