들어가며 혹시 모바일에서 서비스에 회원가입을 한다던가, 무언가 내용을 입력할 때에 특수문자 키보드로 바꾸었다가, 다시 영문으로 바꾸었다가.. 상황에 맞지 않는 키보드가 나와서 번거로운 적 있으신가요? 의미 있는 HTML을 사용하여 사용자에게 더욱 편리한 UX를 제공할 수 있어요. 입력과 관련하여 어떻게 하면 좋을지 알아볼까요? none 가상 키보드를 사용하지 않아요. 키보드를 직접 구현할 때에 사용해요. text (default) 기본값으로 제공되고, type 속성에 따라 제공되는 가상 키보드가 표시돼요. decimal 소수점(.)을 제공하는 숫자형 키보드를 보여줘요. numeric 숫자형 키보드를 보여줘요. decimal 모드의 키보드와 약간 차이가 있어요. tel 전화번호를 입력하는 키보드가 나타나요..

Vue3는 현재 총 7편의 시리즈로 구성되어 있습니다. Vue3 #0 [Vue3를 만나다] Vue3 #1 [변경된 기능 1 - 전역 API] Vue3 #2 [변경된 기능 2 - v-model] Vue3 #3 [변경된 기능 3 - v-for와 v-if] Vue3 #4 [새로운 기능 1 - Composition API] Vue3 #5 [새로운 기능 2 - Teleport와 Fragments] Vue3 #6 [제거된 기능들] - (현재 글) 들어가며 안녕하세요. 이번에는 2.x 버전과 비교하여 제거된 기능은 무엇이 있는지 알아보려고 합니다. 기억해두어야 할 것 같다고 생각되는 3가지 내용을 추려왔습니다. 키보드 이벤트를 위한 키코드 키 입력 수식어에 키코드 사용이 불가능해졌습니다. 3 버전부터는 별칭만 사용할..

들어가며 지난 4월 25일, 인지과학자이자 경희대 경영대학원 교수이신 김상균 연사님을 모시고 메타버스에 관해 이야기를 나눴습니다. 강연을 진행해주신 김상균 연사님은 누적 독자 100만 명의 인기도서 '메타버스'의 저자이시기도 한데요. 연사님은 최근 집필하신 '메타버스 II, 10년 후 미래를 먼저보다'를 소개하며 앞으로 10년 이내에 우리를 둘러싼 공간, 조직, 인간관계를 비롯하여 유통, 방송, 게임, 금융, 의료 등 각 산업 분야가 큰 변화를 맞이하게 될 것이라고 합니다. 그렇다면 메타버스는 우리 삶을 어떻게 변화시킬까요? 또 당장 무엇을 준비해야 할까요? 변화에는 기대와 두려움이 공존합니다. 이 글에서는 메타버스가 우리의 삶을 어떻게 변화시킬지, 무엇을 경계해야 할지 그리고 나아가 메타버스 플랫폼과 ..

들어가며 지난번 기본적인 컴포넌트 생성에 대해 알려드렸는데요. 이번 글에서는 스토리북에서 생성한 컴포넌트를 조금 더 효율적으로 활용할 수 있도록 도와주는 addons(애드온)에 대해 알아보고자 합니다. Addons addon에 대해 알아볼까요? 스토리북을 설치하면 package.json 파일에 기본적으로 @storybook/addon-actions와 @storybook/addon-essentials 가 설치되어있는 것을 보실 수 있는데요. @storybook/addon-actions를 먼저 설명드리겠습니다. action을 통해 이벤트 핸들러가 수신한 데이터를 확인할 수 있습니다. import React from 'react'; import { Button } from './Button'; export d..

블록체인, 암호화폐, NFT, 메타버스 등.. 다들 한 번씩은 들어봤지만, 설명하라고 하면 눈을 피하게 되는 단어들입니다. 기술 발전의 최상단에서 경험을 설계해야 하는 디자이너들에게 이러한 개념들을 잘 이해하고 있는 것은 매우 중요한 것 같습니다. 이를 위해, 고려대학교 정보보호대학원 김승주 교수님께서 #블록체인 #암호화폐 #기술의 장점과 활용이라는 키워드를 중심으로 개념들을 쉽게 이해해보는 강연을 진행해 주셨습니다. 이번 글은 김승주 교수님의 말씀을 요약해서 전달하는 글이 되겠습니다. 1. WEB이란 무엇이며, 왜 만들어졌는가 2. WEB의 발전 3. 암호화폐란 무엇이며, 왜 만들어졌는가 4. 전자화폐의 단점 5. 블록체인과 비트코인은 왜 만들어졌는가 6. 블록체인 시스템의 개념과 원리 7. 채굴이란 ..

들어가며 4월 15일, NFT 레볼루션의 공동작가 중 한 명인 성소라 님이 ‘NFT로 바라보는 세상'이라는 주제로 pxd talks를 진행해주셨습니다. 성소라 작가님은 미국 워싱턴대학교 경영대학 교수로 기업가 정신과 전략경영을 가르치시다가 현재 web 3.0 플랫폼을 빌드하고 계십니다. (web3.0과 NFT, 참고 기사 : https://www.joongang.co.kr/article/25035320#home) 최근 NFT와 관련된 높은 관심으로 이를 주제로 한 책은 속속 베스트셀러가 됐으며 ‘NFT 레볼루션'도 그중 하나입니다. 이번 pxd talks에서 작가님은 먼저 NFT의 개념을 간략하게 소개하고, NFT가 어떤 영역으로 확장되고 있는지, 각 영역에서 어떤 의미가 있는지 사례를 중심으로 살펴보았..

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

들어가기 전에 4월 26일 진행된 pxd Talks에서는 의 저자이신 홍익대학교 경영학 홍기훈 교수님을 모시고 NFT를 이해해보는 시간을 가졌습니다. 앞선 강연에서 기본적인 기술적 개념과 활용 사례 중심으로 NFT를 이해했다면, 이번 강연에서는 경제적, 사회적인 측면에서 NFT의 가치를 이해하고 비즈니스 관점에서 어떻게 활용할 수 있을지 생각해 볼 수 있었습니다. 디지털로 이동하는 세계 디지털 세계에서의 새로운 경험은 현실을 변화시키며, 이를 촉발시키는 사회적 인프라로써의 기술 디지털 세계의 경험은 오프라인과 같을까요? 온라인에서는 모르는 사람들과 모여 게임을 같이 하기도 하고, 타인의 SNS 계정에 방문해 사진을 구경하기도 합니다. 이러한 경험을 현실에서도 똑같이 자연스럽게 할 수 있을까요? 아마도 어..

들어가며 지난 4월 22일, pxd에서는 디자이너 문초이 님과 함께 게임 산업에 대해 알아보는 시간을 가졌습니다. 전 넥슨, 현 펍지 기획/디자이너이신 만큼 다양한 예를 통해 게임 산업과 Uxer의 역할에 대해 자세하게 설명해주셨습니다. 게임 산업의 특성 현재 국내 게임 시장의 규모는 20조원에 달하며 셀 수 없이 다양한 게임들이 출시되고 있습니다. 이 중에서 순위권에 랭크된 게임들은 무엇이 있을까요? 2022년 4월 2주차 게임 순위를 살펴보면 10위까지 랭크 되어 있는 PC 게임들은 대부분 우리가 한 번쯤 들어본 이름의 게임들입니다. 예전부터 유명했던 게임들이 꾸준히 순위권에 자리를 잡고 있는 것이죠. 이만큼 PC 게임은 진입장벽이 높아 새로운 게임이 순위권에 진입하기가 쉽지 않다고 합니다. 그나마 ..

4월 한 달 pxd에서는 NFT와 메타버스를 잘 이해하기 위한 토크가 여러 차례 집중적으로 진행되었는데요, 4월 19일 진행된 pxd talk에서는 다양한 미디어 출연을 통해 미래테크에 대해 설명하며 활약하고 계신 이시한 교수님을 모셨습니다. 그간의 NFT 관련 토크 덕에, 자주 등장하는 유명 사례와 예시들은 눈에 많이 익었습니다. 비플 (Beeple), BAYC, 크립토 펑크라는 이름들도 이제 낯설지 않습니다. 그러나 아직 머릿속에서는 “PFP와 NFT아트의 차이는 무엇이지?” “메타버스에서 NFT가 왜 중요하지?” 등등 개념 간 연관성이 완벽하게 정립되지 않고, 꼬리질문들이 이어지는 참이었습니다. 이번 강연에서는 기본 개념에 대한 설명과 대표 사례 소개를 넘어서서, 각 개념 간의 연관성까지 차근차근 ..

들어가며 지난 프로젝트에서 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..