정윤선 /@@WCb black.indigo.red@gmail.com ko Sat, 03 May 2025 05:40:41 GMT Kakao Brunch black.indigo.red@gmail.com //img1.daumcdn.net/thumb/C100x100/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fguest%2Fimage%2FAu_a26EfVvBHo8yOZqFAkcqjJbA.png /@@WCb 100 100 리뷰 시스템을 만들 때 중요한 5가지 요소 - 유저의 선택을 도와주는 리뷰시스템 /@@WCb/57 플랫폼에서 리뷰 시스템의 중요성은 아무리 강조해도 지나치지 않습니다. 리뷰가 유저의 선택에 큰 영향을 미치기 때문인데요, 플랫폼 내에서 리뷰 시스템이 중요해진 만큼 리뷰로 인한 부작용 또한 많이 나타나고 있습니다. 마침 저희 회사에서도 리뷰 시스템을 개편할 일이 있어서 리뷰 시스템을 설계할 때 어떤 점을 중요하게 생각하고 설계했는지, 어떻게 설계해야 좋<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2FXAbPdlDc2mFEZsDTo7Hs06fxAlM.png" width="500" /> Mon, 07 Jun 2021 00:11:14 GMT 정윤선 /@@WCb/57 드롭다운과 스크롤 디자인 - 정보를 더 볼 수 있게 해주는 UX에 대해 /@@WCb/53 웹과 모바일 환경은 '모니터의 크기'에 제약을 받습니다. 디자이너들은&nbsp;이 제약을 극복하기 위해 카로셀이나 드롭다운, 스크롤 등 다양한 UI를 설계하고 유저들은 이를 통해 화면의 제약을 극복하며 수많은 정보들을 탐색하게 됩니다. 이번 글에서는&nbsp;화면의 고정된 면적 안에서 정보를 더 보여주는 장치인&nbsp;드롭다운과 스크롤의 디자인에 대해 이야기해보겠습니다. <img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2FfAiChd24SAM2dt2xc6u10WQRrWo.png" width="500" /> Mon, 14 Dec 2020 05:00:35 GMT 정윤선 /@@WCb/53 이커머스에서의 검색 - 19개의 주요 이커머스 웹사이트의 검색 경험에 대한 UT 결과 /@@WCb/46 (출처 : 이 기사는&nbsp;[The Current State Of E-Commerce Search]를 번역 및 가공한 콘텐츠입니다. 오래전 기사라 현재 이커머스의 검색 기능은 이보다 나을 것으로 생각됩니다. 다르게 생각해보면, 오래된 기사라서 현재와 맞지 않는다기 보단&nbsp;여기서 설명하는 검색 기능이 갖추어야 하는 기능들은 더더욱 필수가 되었습니다. 특히나 UT를 <img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2FoLS3TRtyxg2Plcn3IIegXc8Mkg4.png" width="500" /> Wed, 26 Aug 2020 04:16:26 GMT 정윤선 /@@WCb/46 Breadcrumbs 디자인 가이드라인 - 빵 부스러기 내비게이션을 디자인할 때 주의해야 할 8가지 /@@WCb/45 (출처 : 이 기사는&nbsp;[Design Guide: Breadcrumbs],&nbsp;[Breadcrumbs For Web Sites: What, When and How], [atlassian.design/components/breadcrumbs/examples]를 번역 및 가공한 콘텐츠입니다.) Breadcrumbs&nbsp;(빵부스러기)는 사이트 나 웹 앱에서 유저의 위<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2Frz9CDQYGADb6ICqMVA3EE1vYln8.jpg" width="500" /> Tue, 11 Aug 2020 03:21:22 GMT 정윤선 /@@WCb/45 홈 화면 만들기 - Customer&nbsp;Journey&nbsp;Map을 이용해 유저들을 적극적으로 만들기 /@@WCb/44 뛰어난 사용성을 가진 서비스를 만드는 것은 보통 어려운 일이 아닙니다. 플랫폼의 사용성이 좋아지면 이탈이 줄어들고 유저들이 핵심 플로우에 집중할 수 있기 때문에 퍼널 별 전환율이 눈에 띄게 좋아지지요. 그렇기에 플랫폼 빌더들은 본인들의 플랫폼이 뛰어난 사용성을 가질 수 있도록 고군분투하고 있습니다. 같이 그런 고민을 하는 한 사람으로서, 유저들을 적극적으<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2F4uXnGERKBl9S9lO7BK0et0MkA-s.png" width="500" /> Wed, 05 Aug 2020 04:22:36 GMT 정윤선 /@@WCb/44 앱에서의 알림 디자인 - 다양한 알림 모델과 및 알람을 언제 발송해야 하는지 알아보기 /@@WCb/43 (출처 : 이 기사는&nbsp;[Designing notifications for apps]를 번역 및 가공한 콘텐츠입니다.) 이제 알림은 처리하기가 복잡한 기능이 되었습니다. 이 기사에서는 모든 세부 사항을 다루지는 않지만, 애플리케이션의 특징별로 어떤 알림 모델을 사용하는 게 적합한지 쉽게 선택할 수 있도록 3가지 알림 모델을 설명해보겠습니다. 알림 모델<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2F1p3tMnMD_mjWNZBnliqPadNrK_U.png" width="500" /> Fri, 17 Jul 2020 05:04:05 GMT 정윤선 /@@WCb/43 스플릿 뷰를 활용한 비교 탐색 UI - 정보를 빠르게 스캔하고, 깊이 있게 확인하는 서비스 만들기 /@@WCb/39 정보들이 나열된 리스트를 스캔하고 관심 있는 한 가지 콘텐츠를 선택해 깊이 있게 소비하는 것은 웹 상에서 흔히 일어나는 행동 패턴입니다. [정보들을 스캔하고-&gt; 깊이 있게 확인해야 하는 행동]패턴을 설계하면서 스플릿 뷰를 사용한 프로젝트가 있어서 회고 차 기록하게 되었습니다. 스플릿 뷰란 무엇인가? 스플릿 뷰는 오른쪽과 왼쪽으로 분할된 레이아웃을 가진<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2FZ5O8qluXw3oX0muFIPM3y_2xPLE.png" width="500" /> Wed, 26 Feb 2020 09:36:46 GMT 정윤선 /@@WCb/39 F패턴과 Z패턴 /@@WCb/38 (출처 : [F-Shaped Pattern for Reading Content]와 [Z-Shaped Pattern For Reading Web Content]의 기사를 번역 및 가공한 콘텐츠입니다.) 모든 사용자는 사이트를 자세히 확인하지 않습니다. 그들은 읽지 않고 스캔합니다. 스캐닝이란 사용자가 항상 웹사이트의 모든 구석구석을 읽지 않고, 무언<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2FmpmC4T2K4xwxk3ZnTHfzZLBklXc.png" width="500" /> Tue, 17 Dec 2019 09:09:40 GMT 정윤선 /@@WCb/38 버튼의 둥근 모서리에 대한 이해 /@@WCb/37 (출처 : 이 기사는 [Make sense of rounded corners on buttons]를 번역 및 가공한 콘텐츠입니다.) 사각형 버튼을 둥근 버튼으로 바꿔야 할까요? 둥근 버튼이 더 나은 사용성을 제공할까요? 우리는 버튼을 만들 때 어떻게 현명한 결정을 내릴 수 있을까요? 이런 의문들은 UX에서 라운드 버튼을 만들 때 마주할 수 있는 질문들입<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2FzlqGukZvIyI_OJoU_eNNoXogpAA.png" width="500" /> Mon, 18 Nov 2019 10:29:06 GMT 정윤선 /@@WCb/37 메테리얼 텍스트 필드의 진화 - 사용자 리서치가 구글 오픈소스 텍스트 필드를 어떻게 변화시켰는지에 대해. /@@WCb/36 (출처 : [The Evolution of Material Design&rsquo;s Text Fields]의 기사를 번역 및 가공한 콘텐츠입니다.) 눈치채지 못하셨을 수도 있겠지만, 메테리얼 디자인은 리서치를 기반으로 계속 이터레이팅하며 진화 중이었습니다. 우리는 최근에 메테리얼 디자인의 텍스트 필드가 2017년과 왜 다르게 변경되었는지에 대해 궁금해하는 문의<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2Fs9wA8YmW3ZK4G8zmHFLLx30O5yQ.png" width="500" /> Wed, 13 Nov 2019 09:11:30 GMT 정윤선 /@@WCb/36 체크박스 vs 토글스위치 vs 토글토큰 - 체크박스와 토글스위치의 7 사례 및 토글 토큰에 대하여 /@@WCb/35 (출처 : [Checkbox vs Toggle Switch]와 [Why Toggle Tokens Are a Better Alternative to Checkboxes] 기사를 번역 및 가공한 콘텐츠입니다.) 체크박스 vs 토글스위치 입력 폼은 사용자의 입력을 쉽게 수집하기 위해 몇 가지 컨트롤을 제공합니다. 입력 폼을 디자인하는 동안, 올바른 위치에<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2FgQFf5cLzgdm2kwHaC98aXYPXqk0.png" width="500" /> Fri, 25 Oct 2019 09:13:31 GMT 정윤선 /@@WCb/35 랜딩페이지 리뉴얼 - 랜딩페이지란 무엇인가? /@@WCb/33 랜딩페이지는 브랜드의 핵심이 가장 많이 담긴, 플랫폼의 대문 역할을 하는&nbsp;페이지입니다. 이번에 랜딩페이지 리뉴얼 작업을 진행하면서 참고할만한 글을 찾았는데, 서비스의 특성이 강하게 반영되는 페이지라서 그런지 생각보다 랜딩페이지 설계에 대한 심도 있는 글이 많이 없었습니다. 서비스 설계에 정답은 없지만 그래도&nbsp;랜딩페이지의 목적에 충실한 글을 통해 디자인 <img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2F29IEYPJs7JcmiNXW2MSuMnlKwng.png" width="500" /> Tue, 15 Oct 2019 09:06:10 GMT 정윤선 /@@WCb/33 웹 페이지를 디자인할 때, 자주 하는 실수 - 몇 개의 디자인 팁으로 멋진 웹 페이지를 만드는 법 /@@WCb/29 (출처 :&nbsp;[Common webpage design mistakes]의 기사를 번역 및 가공한 콘텐츠입니다.) 우리 팀은 사람들이 웹 사이트를 구축하는 동안 가장 흔히 저지르는 실수를 조사했습니다. 이 기사는 디자이너들이 서비스를 디자인할 때 피해야 할 금지사항 목록들입니다. 랜딩 페이지에서 디자인 실수를&nbsp;피하기 위해 1. 콘텐츠가 논리적인 정보<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2FmVeNoYJ_NezaLX6Jns9J1Z84YiU.png" width="500" /> Wed, 14 Nov 2018 16:21:37 GMT 정윤선 /@@WCb/29 컬러에 대한 재접근 - ColorBox.io로 컬러 시스템을 구축하는 새로운 방법 /@@WCb/27 (출처 :&nbsp;[Re-approaching Color]의 기사를 번역 및 가공한 콘텐츠입니다.) 색상은 우리가 세상을 인식하는 방법에 도움이 되며,&nbsp;예측하고, 이해하고, 결정하도록 안내합니다. 우리는 어렸을 때부터 적색을 보고 멈추고 초록색을 보고 긴장을 풀었습니다. 검정 텍스트를 회색 텍스트보다 먼저 읽고,&nbsp;파란색 링크를 클릭했습니다. 컬러는 어떻게 우<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2F1J_Mg1Iu73PS0LSkB6xfLn7KPvE.png" width="500" /> Thu, 25 Oct 2018 14:51:25 GMT 정윤선 /@@WCb/27 HSB 컬러 시스템 - 현역 전문가들 위한 입문서 /@@WCb/26 (출처 : [The HSB Color System: A Practitioner's Primer]의 기사를 번역 및 가공한 콘텐츠입니다.)HSB 컬러 시스템에 대해서는 잘 설명해 놓은 좋은 기사가 온라인에 단 하나도 없습니다.250만 개의 Google 검색 결과가 있지만 HSB 시스템을 실제로 사용하고 만드는 사람이 검색한 결과는 없는 걸까요? 이 기사에서는<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2Fp4mRUYkylPeBwTXgHpwC6TFkR-s.jpg" width="484" /> Wed, 24 Oct 2018 15:12:41 GMT 정윤선 /@@WCb/26 컬러 팔레트 프레임워크 구축 - 브랜드의 컬러 팔레트를 작성하고,&nbsp;컬러 프레임 워크를 정의하는 방법 /@@WCb/25 (출처 :&nbsp;[Building a Color Palette Framework]의 기사를 번역 및 가공한 콘텐츠입니다.) 색상은 브랜드나 제품의 디자인 시스템에서 가장 중요한 요소 중 하나입니다. 우리의 두뇌는&nbsp;지나친 정보를 거부하도록 프로그램되어 있으므로, 유저들의 뇌를 고려하여 시각적으로 흥미를 이끌 수 있고 정리가 잘 된&nbsp;색상 팔레트를 만드는 것이 중<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2Fy0lxb459WNnrm6vU-GBTKqPTJCc.png" width="500" /> Tue, 23 Oct 2018 15:34:49 GMT 정윤선 /@@WCb/25 iPhone X를 위한 디자인 /@@WCb/24 (출처 :&nbsp;[Design for iPhone X]의 기사를 번역 및 가공한 콘텐츠입니다.) iPhone X를 위한 디자인 1125 &times; 2436px의 iPhone X Super Retina Display를 장착한 (iPhone 10)이 발표되었습니다. iPhone 10은 디바이스 전체가 디스플레이 일 뿐 아니라, Touch ID보다 미래지향적 인증 시스<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2FcYEHM1w-HYskPYDqBALxRdvEfzE.png" width="500" /> Sun, 17 Sep 2017 16:25:28 GMT 정윤선 /@@WCb/24 주니어 디자이너 VS 시니어 디자이너 /@@WCb/21 (출처 : [Junior Designers vs. Senior Designers]의 기사를 번역 및 가공한 콘텐츠입니다.)저는 긴 글을 좋아하지만, 가끔은 스케치 몇장이 더 간단하게 이해되고 오래 기억에 남습니다.주니어 디자이너의 프로세스시니어 디자이너의 프로세스주니어 디자이너가 원하는 것시니어 디자이너가 원하는 것주니어 디자이너의 디자인 스테이지시니어 디<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2FK0jFkm22uOjT4c0LavZm0ImoZ0Y.png" width="500" /> Fri, 17 Feb 2017 13:12:43 GMT 정윤선 /@@WCb/21 머티리얼 디자인은 다른 것이지, 나은 것이 아니다 /@@WCb/20 (출처 : [Material Design is Different, Not Better]의 기사를 번역 및 가공한 콘텐츠입니다.)Material Design이 발표되었을 때, 저는 디자인 분야에 대한 Google의 노력에 깊은 감동을 받았습니다.이 분야는 애플이 애플이 항상 앞서 가고 있었던 것으로, 그전까지 안드로이드 디자인이라 하면 통일성 부족, 문서화의<img src= "https://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2FOnbXwBKUrFGs9GjJEAWN4PduV-Y.jpeg" width="500" /> Tue, 07 Feb 2017 16:02:18 GMT 정윤선 /@@WCb/20 기억 디자인-peak와 end - 사용자의 마지막 경험 디자인하기 /@@WCb/19 (출처 :&nbsp;[User Memory Design: How To Design For Experiences That Last &ndash; Smashing Magazine]의 기사를 번역 및 가공한 콘텐츠입니다.) 아래의 두 차트는 제가 &lsquo;생각&rsquo;에 대해 생각하는 방식을 바꾸게 만들었습니다. 1996년 심리학 연구에서 사용된 이 차트는 우리가 어떤 걸 경험할 때 그 순<img src= "https://img1.daumcdn.net/thumb/R1280x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FWCb%2Fimage%2Fw5L_c0xPLKbr1FqengfkOOTBhfI.gif" width="500" /> Thu, 02 Feb 2017 01:53:34 GMT 정윤선 /@@WCb/19