WEMIX CHAMPIONSHIP(위믹스 챔피언십)은 골프 경기에 블록체인을 결합해 새로운 형태의 참여형 스포츠 문화를 제안하는 프로젝트입니다. KLPGA 2023시즌의 정규투어를 아우르는 'Race to WEMIX CHAMPIONSHIP’을 거쳐, 왕중왕전인 ’WEMIX CHAMPIONSHIP 2023’으로 진행됐습니다. WEMIX3.0의 첫 번째 리얼 월드 이벤트, WEMIX CHAMPIONSHIP에 대해 알아보겠습니다. 블록체인에 기록하고 NFT로 구현한 KLPGA 2023시즌 KLPGA 2023시즌에는 블록체인 기반의 'Race to WEMIX CHAMPIONSHIP(이하 RWC)'이 도입됐습니다. 시즌 정규투어에 WEMIX 포인트 시스템을 적용해 대회 결과에 따라 선수들에게 점수와 순위를 부여하..

들어가며 SASS(Syntactically Awesome Style Sheets) 전처리기 환경에서 자주 쓰이는 기능 중 various, mixin을 이용해 코드를 모듈화하여 코드의 생산성, 재활용성을 높여 편리하게 사용할 수 있습니다. 프로젝트에 공통으로 자주 쓰이는 mixin을 정리해보았습니다. 아이콘 CSS로 그리기 프로젝트 디자인 파일에서 X, | , ▲, ⌃ 아이콘들의 집합체를 보신 적 있으신가요? 이런 아이콘을 볼 때 크기, 색상별로 구분하다가 눈으로 확연히 보이지도 않고, 중간에 생겨나는 애매한 크기들로 이름 규칙에 혼란이 생기기도 하고 이미지 리소스 관리나 사용적인 면도 어려움이 생깁니다. (분명히 없을 것 같지만, 1px ~ 2px씩 아이콘이 커진다든지 아이콘 컬러들이 전체적으로 톤업/톤..

블록체인 지갑, 몇 개나 갖고 있으신가요? 가방 속 지갑은 하나인데 블록체인 지갑은 왜 여러 개여야만 할까, 의문이 들었던 때가 있진 않으신가요. 네트워크 하나하나 다른 지갑을 사용하다 지치거나, 이용 방법이 너무 복잡해 ‘OO 지갑에서 토큰 보내는 법’을 검색하는 데에 시간을 쏟았던 때도요. 하지만 이젠 걱정하지 마세요. 더 이상 “블록체인 지갑은 원래 그런 거니까.”라며 불편을 감수할 필요가 없습니다. 즐거운 블록체인 생활, una Wallet(우나 월렛) 하나면 충분하니까요. 지갑 하나로 충분해진 디지털 자산 관리 블록체인 시장의 코인과 토큰은 다양한 네트워크 종류만큼이나 제각기 다른 가치를 갖기 때문에 이용자 입장에서는 ‘내 자산이 얼마인지’ 곧바로 파악하기가 어려운데요. Arbitrum(아비트럼..

‘벽을 눕히면 다리가 된다.’라는 말이 있습니다. 지금은 우리를 가로막고 있는 하나의 벽일지라도, 이 벽을 눕히는 데 성공한다면 더 큰 가능성으로 향하는 다리가 되어줄 수 있다는 의미입니다. 블록체인 생태계에도 벽은 존재합니다. 생태계 속 각각의 블록체인은 독자적인 네트워크를 구축하고 있고, 이 네트워크들 사이의 자산의 이동이나 데이터의 교류가 어렵다는 점이 바로 블록체인 생태계에 놓인 하나의 벽입니다. 지금까지 체인과 체인 사이를 연결해 보려는 움직임이 없었던 것은 아닙니다. 브릿지로 대표되는 크로스 체인 기술이 있고 지금도 사용되고 있죠. 하지만 이용자의 관점에서 바라볼 때 완전하게 체인 간의 연결을 이뤄냈다고 말하기는 어렵습니다. 체인 간의 토큰을 교환할 수 있는 활동 정도에 그칠뿐더러 이용 과정이..

pxd talks는 여러 분야의 연사님을 초빙해 인사이트를 나누는 시간입니다. pxd 구성원들이 더 넓은 시야로 무언가를 새롭게 발견하거나 자신을 성장시킬 수 있는 기회를 얻을 수 있도록 말이죠. 그리고 그 경험은 [pxd talks] 아티클로 기록합니다. pxd 구성원들이 함께 보고 듣고 느끼고 배운 것들이 사라지지 않고 pxd story에 남아 더 넓은 세상으로 뻗어갈 수 있기를 바랍니다. 들어가며지난 9월 토스의 프로덕트 브랜드 디자이너 김지윤 연사님을 통해 인하우스에서 BX 디자이너가 일하는 방법을 주제로 pxd talks를 진행했습니다.본 글에서는 pxd talks의 강연 내용 중 토스의 브랜드 자산 운용과 인지 전략, 프로덕트와 브랜딩 간의 상관관계를 전달해 보려 합니다. 브랜드 자산 운용과..

들어가며 얼마 전 사파리 브라우저에서 레이어 팝업 창을 닫을 때 바닥화면의 스크롤이 예상치 못하게 튕기는 현상을 발견하여 이게 무슨 일인가 싶어 원인 파악을 해봤습니다. 원인은 레이어 팝업이 닫힐 때 클릭했던 요소에 포커스를 옮겨주는 기능으로 인해 발행하였던 문제였는데요. 사파리 브라우저에서는 이 포커스가 클릭했던 요소가 아닌 부모의 요소에 포커스가 되고 있어 스크롤이 상단으로 튕겨지는 문제였는데요. 이 과정에서의 원인 파악과 문제를 해결한 내용에 대해 작성하였습니다. 포커스를 옮겨주는 기능이 꼭 필요한가? 우선 포커스를 클릭했던 요소에 옮겨주는 기능은 웹 접근성 및 사용자 경험 향상에 있어 중요한 요소입니다. 포커스를 옮겨줘야 하는 이유 또한 매우 명확하고 납득이 가능한데, 다음과 같습니다. 사용자 경..

들어가며 현재 업무가 블록체인 기술과 관련되어 있는데, 생각보다 블록체인 기술에 대해 아는 게 많이 없는 거 같아 개인적으로 공부를 시작하게 되었습니다. 블록체인 공부를 시작하다 보면 필연적으로 드는 의문이 있는데, 첫 번째가 블록체인이라는 기술이 정말 필요한가? 두 번째가 그래서 “미래가치가 있나?”였습니다. 그래서 이 의문을 해소하고자 들었던 강의 및 간단히 찾아보았던 내용들을 간단히 정리해 보았습니다. 블록체인? 블록체인은 비트코인 논문에서 처음 등장했다고 합니다. 그렇다 보니 블록체인 = 비트코인이라고 생각하는 분들도 많은 것 같습니다. 비트코인을 만들 때 블록체인이라는 기술이 필요해 만들어진 게 블록체인이라고 합니다. 그러니깐 비트코인이라는 탈중앙화된 화폐를 만들기 위해서는 탈중앙화된 장부가 필..

들어가며 최근 블로그 작업을 진행하며 알게된 NodeJS에서 HTML을 파싱하여 웹을 스크래핑 할수있는 NodeJS 모듈을 알게되었는데요 사용법 또한 쉽고 간단한 편이라 웹스크래핑을 해야할 작업이 생긴다면 상당히 요긴하게 쓰일것 같아 오늘 해당 모듈에 대해서 소개해 보려고 합니다. 사전준비 npm install cheerio // or yarn add cheerio npm install axios// or yarn add axios 우선 npm 또는 yarn 을 이용해 cheerio와 axios(axios는 편의상 같이 사용하였고 필수는X)를 설치해 줍니다. import * as cheerio from 'cheerio'; import axios from 'axios'; 그다음 두 모듈을 사용할곳에 imp..

“OOO, 메인넷 출범!” 경제 관련 소식에서 꼭 이런 제목을 볼 수 있죠. 누군가 ‘메인넷(Mainnet)’이란 걸 세상에 내놨다는 사실은 알 수 있지만, 그게 가까운 일상부터 먼 미래까지 나의 삶에서 어떤 의미인지는 잘 와닿지 않아요. 메인넷은 대체 무엇일까요? 왜 여러 기업이 너도나도 비장하게 메인넷을 만드는 걸까요? 궁금증이 해소되지 않았던 여행자를 위해 메인넷 안내서를 준비했어요. 네트워크는 아는데, 메인넷은 모른다면 메인넷은 메인 네트워크의 준말로, 여기서의 네트워크는 ‘블록체인 네트워크’를 의미해요. P2P(Peer To Peer)를 기반으로 데이터를 분산해 저장하는 기술이라는 건 DeFi 편에서도 잠깐 설명해드렸죠. 이 네트워크에선 일정 시간 단위로 저장된 데이터가 하나의 ‘블록’을 이루고..

뉴스에서 우리는 부동산이나 은행 금리의 움직임에 관한 보도를 접합니다. 어제와 오늘의 환율이 다르고 오늘과 내일의 주가가 다른 것은 자연스러운 일이죠. 이렇듯 자산의 가치는 우리의 예상과 다르게 바뀌기도 하므로 사람들은 자산을 좀 더 안전하게 지키면서 키울 수 있는 환경을 원합니다. 자산의 가치를 지켜주는 어떤 안전장치가 있다면, 그리고 더 나아가 미래의 가치 상승까지 기대하게 만드는 무언가가 정말 있다면 어떨까요? 그런데 NILE(나일)의 NFT 세계에는 그런 무언가가 있습니다. 창조의 신 ‘네이트’가 NFT에 담아둔 약속, NEITH Covenant(네이트 커버넌트)가 바로 그것이죠. NFT의 가치를 위한 약속, NEITH Covenant NEITH Covenant는 네이트가 약속한 미래의 시점인 C..

들어가며 약관 자동화 코드 적용 부분을 보다 Resize Observer API라는 존재를 처음 알게 되었습니다. (약관 자동화 코드가 궁금하신 분은 링크 참고해 주세요). 이 API 또한 굉장히 유용할 것 같다고 생각되어 Intersection Observer API 연장선으로 WEB APIs인 Resize Observer API를 소개하려 합니다. Resize Observer API 란? Resize Observer API는 요소의 크기를 감시하는 API입니다. 예를 들면 보통 width가 100%인 div의 넓이를 화면이 리사이즈 될 때마다 알고 싶다면 어떻게 구하시나요? React 코드로 예시를 들어보면 필자는 글에서 소개하고 있는 API를 알기 전에는 아래와 같이 resize 이벤트를 통해서 구..

들어가며 React form API에서 가장 많이 사용하고 있는 React Hook Form 라이브러리에 대해서 알아보려고 합니다. 프로젝트 진행하면서 해당 라이브러리가 채택된 이유는 React Hook Form이 종속성이 없는 가벼운 라이브러리이고, 재 렌더링 횟수를 최소화하여 성능에 안정적이고 타입스크립트를 기본으로 제공해 작업 환경에 큰 어려움 없이 적용하기 좋아 선정하게 되었습니다. React-hook-form 시작하기 react-hook-form 설치는 자바스크립트 패키지 매니저인 npm을 이용하여 간편하게 설정이 가능합니다. npm install react-hook-form useForm Hook 이용하기 우리가 일반적으로 작업해야 하는 Form 요소 요건 사항은 아래와 같습니다. 입력 필수 ..