들어가며 이전 글에서는 화면을 그릴 수 있는 간략한 사용법을 설명해 드렸었는데요, 이번 글에서는 프로토타이핑 작업 시 사용하는 기능(메뉴)들에 대해 설명하겠습니다. 피그마 맛보기는 총 2편의 시리즈로 구성되어 있습니다. 피그마 맛보기 #1 피그마 맛보기 #2 (현재글) Prototype 대메뉴 설명 프로토타입을 만들기 위해서는 우측 상단에 있는 Prototype 탭을 선택해 줍니다. Device 항목을 선택하지 않으면 추후 프로토타입 진행 시 PC 기준으로 설정되기 때문에 모바일로 작업하시려면 해당 디바이스를 선택 후 진행하시는 것이 좋습니다. Background 항목은 기본 #000000(Black)으로 설정되어있으나 변경할 수 있습니다. 디바이스 선택 후 상단 # 메뉴를 선택하여 프레임을 생성해 줍니..

텍스트 분석 도구 '모라고'를 만들고 있습니다. PXD UX 테크랩은 자연어 처리 기술을 이용해 텍스트를 분석하는 도구 '모라고'를 만들고 있습니다. CSV 형식의 데이터를 업로드하면 '모라고'가 워드 클라우드처럼 키워드를 추출해 주고, 사용자는 키워드별로 중요한 문장을 선별해 다시 텍스트로 복사하는 방식으로 사용할 수 있습니다. 간단한 사용 예시로 금융 앱 토스의 최근 6개월 iOS 앱 리뷰 46개를 분석 도구로 돌려보았습니다. 분석 도구가 비슷한 주제의 문장을 모아주고 사용자는 그 중에서 눈에 띄는 주제를 살펴봅니다. 이 주제에서 중요하다고 생각하는 문장을 저장하고, 저장한 문장과 키워드를 복사해 추가로 편집할 수 있습니다. (현재 개발 중인 모라고 베타 버전을 이용하실 수 있도록 신청을 받고있습니다..

들어가며 블록체인이란 단어가 점점 더 우리 일상에서 자주 보이고, 실제로 많은 관련 프로젝트들, 이슈들이 언급되고 있습니다. 새로운 기술이 도입되고, 산업이 변화할 때마다 언급되는 Everett Rogers의 The diffusion of innovation curve에 따르면 현재 2.5%의 혁신가들(Innovators)과 13.5% 얼리어답터들(Early Adopters)이 새로운 산업의 시작을 위해 여러 가지 시도를 하고 있는 시기가 아닌가 싶습니다. 이러한 시도들을 기반으로, 프로젝트들의 성공들이 쌓이게 되면 이러한 블록체인 기반 서비스들이 일상이 될 텐데요, 블록체인 서비스를 접하게 될 때 가장 처음 맞닥뜨리는 생소함이 있습니다. 바로 'Sign up'이 아니라 'Connect a wallet'..

화폐는 시대와 필요에 따라 형태가 달라져 왔습니다. 조개, 금속, 태환 등 실물 화폐에서 지류, 신용 거래로 넘어와 최근에는 블록체인 기술을 기반으로 가상화폐로 발전했습니다. 하지만 온체인에서 거래되는 가상화폐는 눈으로 보고 만질 수 있는 실물 화폐와는 차이가 있습니다. 때문에 DeFi의 상품과 서비스를 완벽하게 이해하는 데 다소 어려움이 있죠. 그래서 상품과 서비스 이용을 위해 이에 대한 이해를 도와주는 장치가 반드시 필요합니다. WEMIX.Fi의 상품 및 서비스 그래픽처럼 말이죠. 사용자의 이해를 돕기 위해 WEMIX.Fi의 상품 및 서비스 디자인은 단순하면서 직관적입니다. WEMIX.Fi 브랜드의 심벌인 구체는 가상화폐를 상징하며, 구체의 움직임은 금융 상품의 원리를 표현합니다. 특히, 상품의 특징..

들어가며 오늘은 [프로그래머, 열정을 말하다]라는 책에 대해서 이야기해보고자 합니다. 또한 굉장히 주관적인 견해가 많이 포함된 포스팅이라는 점을 미리 말씀드립니다. 이 책을 읽게 된 계기 최근, 주변의 상황이 급격한 변화를 맞이하게 되면서 나 스스로도 개발자로서의 나의 위치와 상황에 대해서 개인적으로 되돌아보는 시간이 많아졌습니다. 적지 않은 시간을 개발자로서 살아왔지만 그동안 뿌듯함이나 성취감보다는 항상 부족하고 만족스럽지 못한 시간을 보내왔다고 느껴졌어요. 스스로 경쟁력 없는 사람이라고 여기고 나 자신을 하찮게 포장하는 데에만 급급했습니다. 큰 변화를 잘 맞이하기 위해서는 나 자신부터 마음을 잘 잡아야 한다고 생각했어요. 그래서 무작정 이 책을 읽었습니다. 책을 추천받아서 빌린 지는 꽤 되었지만 몸으..

WEMIX.Fi의 브랜드 키워드이자 핵심 가치는 무엇일까요? 유연성과 안전성, 그리고 확장성입니다. WEMIX.Fi의 BX는 이를 시각적으로 형상화했습니다. 형태, 색상, 모션, 질감으로 말이죠. 브랜드의 얼굴인 로고부터 살펴볼까요? 파란색 원이 하나 보입니다. 그러다 이내 모션이 더해지며 형태와 색이 바뀌죠. 파란색 구체에서 두 개의 작은 구체가 튀어 나와 주변을 빠르게 돌더니 다시 큰 구체 안으로 들어갑니다. 색도 변합니다. 파란색에 분홍빛과 보라빛이 감돌며 작은 구체의 존재와 움직임을 부각시키죠. 로고의 형상은 순식간에 1차원에서 3차원으로 바뀝니다. 생각의 전환으로 탄생한 유기적 형태의 BI 사실 처음부터 이처럼 역동적인 로고가 나왔던 것은 아닙니다. 우여곡절이 있었죠. 오랜 시간 공을 들였던 다..

들어가며 처음 React + typescript 조합을 사용했을 때 컴포넌트를 만들기 위해 아래와 같은 코드를 많이 사용했습니다. // Parent type Props = { count: number; }; const Parent: React.FC = ({ count }) => { return Parent {count}; }; export default Parent; // App import Parent from "./Parent"; function App() { return ( ); } export default App; 강의나 여러 예제에서 React.FC를 많이 사용했기 때문에 “함수형 컴포넌트를 만들 때 React.FC를 사용해야 되는구나”라는 생각을 갖게 되었는데요 최근에 React.FC 사용을..

들어가며 규모가 큰 프로젝트를 진행할수록 하나의 파일로 관리하기보다는 여러 개의 파일로 분리하여 작업을 하는데요. scss에서는 기존에 스타일시트를 @import 속성을 이용하여 파일을 연결해서 사용하고 있습니다. 대체로 변수, 자주 사용되는 코드를 각각의 성격에 따라 전체 공통 _variables, _mixin, 혹은 페이지 공통을 추가로 작성하여 연결합니다. 하지만, scss에서 @import 사용을 지양하는 추세로 @use를 새롭게 도입하면서 권장한다는 글을 읽고 사이드 프로젝트에 적용하면서 소개하는 글을 작성하게 되었습니다. @import 여러 scss 혹은 css 파일을 분리하여 관리하여 불러올 때 사용되는 기능으로 파일 최상단에 선언합니다. scss에서는 @import 하는 파일 이름 앞에 ’..

들어가며 Web 3.0(Web3)라는 용어가 여기저기서 심심찮게 눈에 띄고 있어요. 저는 그냥 마케팅 용어겠거니 하고 처음엔 그다지 관심을 두지 않았었는데 지금은 “그래서 웹 3.0이 뭔데?” 하고 궁금해졌어요. 그래서 Web 3.0이 뭔지 한번 알아보았어요. Web3가 뭐죠..? 우선 위키를 검색해 보았습니다. 웹3.0 이란 컴퓨터가 시맨틱 웹 기술을 이용하여 웹페이지에 담긴 내용을 이해하고 개인 맞춤형 정보를 제공할 수 있는 지능형 웹 기술을 말한다. 지능화, 개인화된 맞춤형 웹이다. 웹 3.0은 기본적으로 웹 2.0의 핵심인 읽기와 쓰기를 넘어 ‘소유’의 개념이 더해진 것이다. 세계 곳곳에 흩어진 네트워크 참여자들의 컴퓨터 자원을 활용하는 블록체인 기술 덕분에 자료가 분산 저장되고, 이더리움 같은 ..

들어가며 웹서버와 WAS의 종류들 최근 네트워크에 관련하여 소소하게 책을 읽으며 스터디하는 시간을 가졌는데 그중 관련이 좀 있을법한 주제를 가지고 이번 블로그 포스팅하려고 합니다. 네트워크를 조금 공부해보면서 자연스럽게 관련이 있을 웹서버에 대해서도 좀 알아보게 되었는데 웹서버(Ws)와 웹 어플리케이션 서버(WAS)에 대해 그냥 대략 이렇다~ 할 정도의 지식만 있었지만, 구체적인 차이점과 장단점이라던가 왜 WAS를 쓰면서도 Ws를 따로 두는 것인지 명확한 이유를 알지 못한 채 넘어갔었습니다. 이번 블로그 포스팅을 작성하면서 한 짝 더 학습되면 좋을 것 같아 작성하였습니다. 웹서비스가 어떻게 사용자(client)에 정보를 제공하며 그중 웹서버와 WAS가 하는 역할이 무엇이며 차이점 및 효율성에 대하여 얘기..

들어가며 React는 많은 프론트엔드 개발자들이 사용하고 있는 인기 있는 라이브러리입니다. 이번 포스팅에서는 (저를 포함해) 프론트엔드 개발에 첫발을 내딛고자 하는 분들이라면 가장 처음 찾아보게 되는 기본 입문 지식, 간단한 설치 방법과 구조를 소개해드리도록 하겠습니다. 설치를 위해서 필요한 것 (Node.js, IDE) Node.js React 프로젝트를 만들기 위해서 Node.js와 npm을 설치해야 합니다. Node.js란 브라우저 밖의 javascript. 즉, 브라우저에 내장되어있는 자바스크립트를 웹브라우저 환경이 아닌 곳에서도 사용하여 연산할 수 있게 하는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임입니다. React 앱은 웹 브라우저에서 실행되는 코드이긴 하지만 프로젝트를 개발..

어느 날, 피드에 “칭찬은 꼬마 날라리도 직장인으로 만든다"라는 글이 추천되어 읽고 갑자기 옛 기억이 떠올라서 블로그에 일기를 써 보려고 합니다. 여러분은 떠올리면 언제나 웃음 짓게 되는 기억나는 칭찬이 있으세요? 나도 힘들고 그도 힘들었던 첫 직장 생활 저는 대학원을 마치고 25살에 첫 직장 생활을 시작했어요. 외국계 IT 컨설팅 기업의 첫 웹 디자이너로 입사를 했는데요, 웹 디자이너로서의 스킬도 없었고 업무의 감을 못 잡아 1-2년 정말 고생을 많이 했답니다. 대기업과의 프로젝트에 디자인을 전담하는 인력으로 투입됐지만 클라이언트 분으로부터 모진 말에 상처도 많이 받았고, IT 컨설턴트 동료들의 전문 용어를 이해하는 게 너무 힘들기도 했고요, 부족한 업무를 나름 보완하느라 몸을 혹사시켜 병이 나기도 했..