들어가며 예전 RPA 프로젝트에서 PL님이 사용하셔서 한번 사용해보고 편하다고 생각했었던 스토리북을 다음 프로젝트에서 사용한다는 이야기를 듣고 스터디 겸 모르시는 분들께도 간단하게나마 공유드리면 어떨까 하여 해당 주제를 선정하여 소개하고자 합니다. 스토리북이란? 스토리북은 컴포넌트 기반의 뷰를 위한 독립적인 UI 개발 환경입니다. 처음 리액트를 기반으로 개발되었고, 이후 Vue, Angular, Web Components, Svelte 등 다양한 프레임워크를 지원하고 있습니다. 스토리북은 컴포넌트를 목록화하여 보고 싶은 컴포넌트를 언제든 확인 가능하도록 만들어줍니다. 하나의 디자인 시스템이라고 생각하시면 편하실 것 같네요. 스토리북의 컴포넌트는 Mockup 상태 값을 넣어줄 수 있도록 되어있어 각종 상태..

들어가며 지난 프로젝트에서 XAML이라는 언어를 사용했습니다. 프로젝트가 XAML로 개발된다고 들었을 때 (XAML..?) 동공지진😮을 일으키며 새로 나온 언어인가? 뭐지.. 하면서 바로 구글에 XML로 검색했던 기억이 나는데요. 😹 그만큼 저한테는 굉장히 생소하고 자믈, 제므얼, 제믈 여러 가지 이름으로 불리는 이 언어, 여러분들은 들어보신 적이 있으신가요? 프로젝트를 시작하지 않았다면 평생 몰랐을 수도 있는 이 낯선 언어 XAML을 같이 알아봅시다. 내용이 많아서 시리즈로 진행될 예정입니다. 이번 편에서는 XAML을 알아보고, 사용하기 전까지의 환경 구성을 해봅시다. XAML? XAML을 위키백과에서는 아래와 같이 설명하고 있습니다. 닷넷 프레임워크 3.0 기술, 특히 윈도 프레젠테이션 파운데이션(W..

들어가며 회사 홈페이지 리팩토링 작업에서 Vue.js 기반의 환경은 SEO(Search Engine Optimization)가 취약하여 이를 보완하기 위해 NuxtJS 프레임워크를 이용했습니다. NuxtJS에서 학습하면서 알게 된 Data Fetching의 asyncData와 fetch의 차이를 이야기하고자 합니다. Vue.js에서 Data Fetching 하는 법 기존 Vue.js에서는 Lifecycle이 동기적으로 진행되기 때문에 mounted() Lifecycle 훅에서 비동기 구문을 이용해서 API 데이터를 호출해줘야 합니다. import axios from 'axios'; export default { data() { productList: [], }, mounted() { this.getPro..

들어가며 코로나로 인한 언택트 시대에 접어든 만큼 현재 우리 XE(UX Engineer) 그룹도 코로나 발생 초기부터 지금까지 원격 근무를 기본적인 근무 형태로 진행하고 있다. 이제는 사무실이 아닌 집에서 모두 원격 근무를 진행하고 있어 특별한 상황이 아니라면 시간에 구애받지 않고 근무할 수 있는 환경 및 그룹 문화가 만들어졌다. 그러나 더 나아가서 PC 환경에서도 벗어나 집이 아닌 다른 장소에서도 근무를 진행한다면 어떨까? 업무의 특성상 업무 환경이 구성된 PC가 필요하므로 환경 구성이 완료된 노트북을 들고 다녀도 될 테지만 그보다 더 휴대성이 좋은 태블릿 PC나 이조차 없는 상황에서 급하게 처리해야 할 업무가 생긴다면 항상 휴대하고 있는 스마트폰으로도 업무 진행이 가능한 방법이 있어 소개한다. 이 글..

들어가며 COVID19가 창궐한 이후, 그동안 원격근무를 하며 웹이나 모바일 개발을 할 때에 로컬 개발서버를 외부에서 접속해야 하는 경우가 있었는데요. 원격 근무를 하는 동안에 집에서 일할 경우 공유기 설정을 변경하여 포트포워딩을 할 수 있거나 한다면 로컬에 접속하는 것이 수월할 수도 있겠지만 회사나 카페, 외부에서 테더링을 사용하는 등 내가 네트워크 설정을 변경할 수 없는 경우에 많이 유용할 것 같아요. 간단하게 시작해 보자. npm을 통해 'localtunnel' 설치를 시작해요. npm install -g localtunnel 자. 준비가 끝났어요. 응…? 벌써...?! 간단하게 실행해 보자. React 또는 Vue 와 같은 Front-End 프로젝트를 하고 있다면 대부분 http://localho..

들어가며 pxd 홈페이지의 웹 접근성 인증 마크를 획득하기 위해 그룹원 모두가 리뉴얼 작업에 참여하게 되었습니다. 그룹원 모두가 동일한 개발 환경에서 개발할 수 있도록 Docker를 사용하게 되었는데요 오늘은 Docker 적용 기를 간략히 써볼까 합니다. Docker란 무엇인가 Docker가 무엇인지, 어떻게 사용하는 것인지에 대한 정보는 참고할 수 있는 문서나 동영상 등이 많기 때문에 이번 글에서는 Docker 공식 홈페이지에 링크와 wiki에 정의된 글을 가져왔습니다. 얄팍한 코딩 사전 Docker Container 도커 컨테이너는 일종의 소프트웨어를 소프트웨어의 실행에 필요한 모든 것을 포함하는 완전한 파일 시스템 안에 감싼다. 여기에는 코드, 런타임, 시스템 도구, 시스템 라이브러리 등 서버에 설..

들어가며 사람은 어떠한 작업을 할 때 학습과 반복적인 행동을 통해 과정을 익히며 때로는 유연하게 변경하거나 다르게 대처하기도 합니다. 하지만 컴퓨터는 입력받은 값이 문자인지 숫자인지, 숫자라면 받은 수는 5보다 큰지 아닌지 등 한 단계 한 단계 조건이나 처리 기준이 있어야만 유효한 결과(값)를 도출합니다. 따라서 코드 작업을 할 때 흐름을 먼저 그리고 그것을 코드로 옮기는 습관이 있다면 프로그래밍 사고의 폭을 넓히는데 도움을 줄 수 있습니다. 흐름을 그린다는 것은 결국 사용자 경험(UX)에서 출발한다고 생각합니다. 그것을 어떻게 그려야 하는지 살펴보겠습니다. 순서도(Flowchart)란 워크 플로우나 과정을 기호(도형)로 그린 것입니다. 프로그래밍뿐만 아니라 분석, 설계, 디자인, 문서 작성 등 다양한 ..

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

들어가며 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..

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

들어가며 아직도 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..