들어가며pxd에 프론트엔드, 퍼블리싱을 담당하는 그룹이 생긴 지 올해로 4년 차가 되었습니다.그간 FED그룹에서 XE(eXperience Engineering)그룹으로, 프론트엔드개발자/퍼블리셔에서 UX Engineer로 명칭과 역할 모두가 지속적으로 변화해왔습니다.다만, UX Engineer 라는 타이틀 자체가 아직 국내에 소개된 지는 오래되지 않았기 때문에, 각자 조직마다 강조하고 싶은 역할들이 다르다는 생각이 들었습니다.그런 의미에서 올해 제 첫 글은 ‘pxd XE그룹의 UX engineer 파헤치기’로 시작해보려고 합니다.pxd의 UX Engineer에 관심 있으신 분들이 궁금해하실 만한 모든 내용을 낱낱이 담으려고 노력했습니다.이 글을 보시는 모든 분들께 조금이나마 도움이 되었으면 좋겠습니다. ..

들어가며 최근 ESG(Environment, Social & Governance)란 단어를 쉽게 볼 수 있습니다. 뉴스를 많이 보시는 분도, 투자하시는 분도, 회사에서 전략 쪽 관련한 일을 하시는 분들도 이제는 익숙하고 한 번쯤은 찾아본 단어일 텐데요. 실제로 올해는 많은 기업들이 ESG조직까지 설립하여 어떤 움직임을 준비하고 있는 것으로 보입니다. 따라서 이 글에서는 왜 ESG가 오늘날 말 그대로 핫한 단어가 되었는지를 서비스디자이너 관점에서 이야기하고자 합니다. ESG란? ESG란 환경(Environment), 사회(Social), 지배구조(Governance)의 앞글자를 딴 단어로 환경, 사회, 지배구조는 기업 활동을 넘어 전 세계적으로 밀접하게 연관이 되어 있고, 전체가 함께 발전하기 위한 지속가..

들어가며 2021년 12월 15일 pxd 홈페이지가 웹 접근성 인증 마크를 획득하게 되었습니다. 9월부터 준비 과정을 거쳐 약 3달 만에 결과를 얻게 되었는데요. 오늘은 “pxd 홈페이지는 왜 웹 접근성 인증 마크를 획득하게 되었는지?” 그 이유와 과정, 그리고 웹 접근성 작업 후 달라진 점에 대해서 이야기해보려고 합니다. pxd 홈페이지 웹 접근성 인증 마크를 획득하게 된 이유는? 웹/앱 서비스들을 예쁘게만 만드는 시대는 이제 오래전에 지나간 것 같습니다. 사용자들은 단순히 보기 좋은 디자인보다는 UI에 관심을 두게 되었고, 이제는 사용자 경험에 기반한 설계/디자인/개발(UX)에 관심을 가집니다. pxd는 오래전부터 사용자 경험 개선에 기반하는 설계/디자인 컨설팅 및 구축 작업을 해왔었고, 지금은 사용..

들어가며 최근 진행했던 프로젝트는 폐쇄적인 환경 특성상 IE 테스트의 제약이 없었습니다. 크롬 엔진 기반의 웹뷰어가 탑재된 웹 애플리케이션 환경이었는데, 아시다시피 크롬 엔진은 최신 CSS3 명세를 적극 지원하고 있기 때문에 다양하고 새로운 CSS3 속성을 마음껏 활용해 볼 수 있는 장점이 있었습니다. 국내 웹 환경은 아직은 IE에서 온전히 해방되지 못했기 때문에 평소 활용하기 어려웠던 CSS3 grid 속성을 사용해 본 경험을 바탕으로 간단하게 소개해 볼까 합니다. 선언 간단한 사용법부터 알아보겠습니다. 부모 엘리먼트에 grid 속성을 선언해 주면서 시작합니다. .container { display: grid; } grid-template-columns, grid-template-rows 다음처럼 gr..

코로나19 이후 재택과 원격 근무가 잦아지면서 매일 마주하던 동료의 얼굴을 보는 횟수가 줄었습니다. 개인 작업이라면 집중력을 더욱 발휘하여 퍼포먼스를 유지하겠지만, 업무 특성상 여러 사람과 팀으로 진행하기 때문에 나 혼자 집중한다고 되는 것이 아님을 깨닫는 데는 그리 오랜 시간이 걸리지 않았습니다. 무엇인가 더 필요했습니다. 이 글은 현재의 상황을 인정하고 극복하기 위해 고군분투하며, PM으로써 내부 커뮤니케이션과 리딩을 위해 고민하고 시도한 저의 방법을 공유하는 글입니다. 1. 온라인 프로스펙티브와 레트로스펙티브 진행 *프로스펙티브와 *레트로스펙티브는 프로젝트와 관련된 사람끼리 진행할 수 있는 특수한 활동입니다. 프로스펙티브는 프로젝트 시작 전에 서로가 알아야 할 점과 기대사항, 우려점 등을 밝혀 보는..

들어가며 처음 PL을 하게 되었을 때, 무엇을 체크해야 하고 무엇을 챙겨야 하는지 몰라 막막했었던 기억이 있습니다. 그럴 때 참고할 수 있는 체크 리스트를 작성해 보았습니다. 꼭 PL이 아니더라도 작업자가 작업 들어가기 전에 체크해야 할 사항이기도 하니 한 번쯤 읽어보고 참고하면 좋을 것 같습니다. 이 글은 제 개인적 경험을 바탕으로 작성했으며, 프로젝트 경험이 쌓일 때마다 메모해둔 내용을 정리하는 것이니, 본인 프로젝트와 연관된 내용만 참고하셔도 됩니다. 기본적인 체크 리스트 서포트 브라우저 범위 PC : IE(IE를 포함한다면 버전까지), safari, chrome 등 Mobile : 대응 기기(플립, 폴드, iPhone SE 등 해상도 특이 케이스) 및 버전 (iOS, Android), 대응 인앱 ..

들어가며 회사에서 OKR을 도입하였으나 매번 OKR을 선정할 때마다 고생한 기억이 있었다. 그 때문에 앞으로는 OKR을 제대로 알고 활용해 보자는 취지에 그룹 내 매니저들과 책(OKR 실천편)을 선정하여 독서 모임을 시작하였고, 이 책의 내용을 정리해보고자 한다. OKR의 기본 OKR이 주목받는 이유 OKR은 확실한 성과가 나오기 때문이다. OKR을 사용하기만 하면 반드시 뛰어난 성과가 나온다고는 할 수 없지만 가장 유명한 사례인 Google, Facebook, Youtube에서 OKR을 채택하고 있는 것은 사실이어서 이들 기업의 지명도와 더불어 주목받고 있다. OKR은 무엇인가 OKR은 ’Objective’와 ’Key Result’라는 두 단어의 첫 글자를 딴 용어로 조직이나 팀, 개인의 이상적인 상태..

들어가며 연간 한일을 정리하다 보니 올해도 회사 블로그에 글을 많이 쓴 저자 중 한 명이 되었습니다. 한국에 돌아와 첫해에 만든 취미 중 하나가 글쓰기였는데, 3년 내내 글을 나름대로 꾸준히 써오고 있어서 많은 분들이 어디서 아이디어를 얻는지? 어떻게 글을 쓰는지? 글을 쓰는 이점은 무엇이 있는지? 에 대한 질문을 많이 주십니다. 이에 대해서 짧게나마 글을 써서 공유하고자 합니다. 어디서 아이디어를 얻는지? 먼저 저의 글쓰기의 목적 자체가 회사생활에서 얻은 것들을 혼자서만 알기보다 많은 동료들에게 공유하고 싶은 마음에 시작하였습니다. 따라서 글쓰기의 아이디어를 얻는 방식이 일에 한정되어 있을 수 있습니다. 1. 에이전시에서 업무를 하면 다양한 산업 클라이언트, 프로젝트에 대한 정보를 얻을 수 있는 장점이..

Day 1. Designing for digital inclusion in government 해당 글은 UXMasterclass 2021 컨퍼런스 첫날, Namahn의 디자이너 Yalenka Mariën의 프로젝트 내용을 기반으로 작성하였습니다. 들어가며, UX alliance와 Usaria가 준비한 이번 UXMC 컨퍼런스는 ‘Design for the Future, Design for All’이라는 주제를 중심으로 총 3일 동안 진행되었습니다. 디지털 트랜스포메이션이 수많은 사람에게 긍정적인 영향을 미치는 것은 사실이나, 반면 그로 인해 생기는 디지털 격차는 소외된 사용자들을 만들기도 합니다. 이러한 사용자들을 모두 포용하기 위해 생겨난 개념인 인클루시브 디자인이 이번 UXMC 컨퍼런스 첫날의 주제로..

들어가며 IA는 우리가 사용하는 모든 서비스가 가지고 있습니다. 그래서 새로운 서비스를 만들거나 기존 서비스를 개선할 때에도 중요한 부분인데요. 올 한 해 다양한 서비스의 IA를 설계하고 개선하는 프로젝트를 진행해 볼 수 있었습니다. 그동안 알게 된 것과 이해한 내용을 바탕으로 IA 설계를 시작하는 신입 디자이너에게 도움이 될 만한 내용을 정리해보려 합니다. IA란 무엇인가요? Information Architecture는 서비스의 전체 구조를 지탱하는 뼈대와 같습니다. 이를 정확히 이해하기 위해 잠깐 짚고 넘어가야 할 것이 있는데요. IA와 Navigation의 구분입니다. 처음 IA 설계를 시작할 때 가장 헷갈렸던 부분이기도 해요. 사실 많은 곳에서 이 두 개념을 동일하게 사용하고 있는데요. 아마 두..

UXMC 2021 - Day 3. ResearchOps * 해당 글은 UXMC(UX Masterclass) 2021 마지막 날의 세션 내용을 기반으로 작성하였습니다. 최근 한국에서 쿠팡, 토스 등의 IT업계를 중심으로 UX Research(er)에 대한 관심이 점점 더 많아지고 있는데요. 해외에서는 꽤 오래 전부터 해당 직무 및 분야가 UX/디자인 프로젝트에서 중요한 부분을 차지했고, 이제는 개념이나 중요성에 대한 이야기를 넘어서 UX Research 전반의 질을 높이고, 효율적으로 리서치하는 방법에 대한 고민과 사례들이 공유되고 있습니다. 또한 그간 UX Research에서 상당 부분 차지했던 대면/현장 리서치가 펜데믹의 영향으로 디지털로 전환해 시도되기 시작하자, 비교적 간접적이지만 더 확장성 있는 ..

들어가며 아직도 css 레이아웃을 float를 사용해서 정리하고 있으신가요? 오늘은 이름도 Flexible-box!! 레이아웃을 정말 간단하게, 유연하게 정리할 수 있는 display:flex에 대해 알아보겠습니다. flexbox의 구성 flex box의 구성은 크게 2가지! flex-container와 그의 자식 요소인 flex-item으로 구성되어 있습니다. flex-container를 먼저 만들어 볼까요?? flex-container를 만드는 방법은 매우 간단합니다! 정렬하려는 요소들의 상위 요소에 display:flex 속성을 선언해 주시면 끝! /* 원하는 요소에 display:flex 속성값을 추가 */ div { display: flex; } 선언해 주시게 되면 자동으로 flex-contai..