FED로 UX하기는 총 2편의 시리즈로 구성되어 있습니다. FED로 UX하기 FED로 UX하기 : 실전편 (현재글) 들어가며 조직별, 개인별, 프로젝트별 구성원들의 실시간 근무량을 쉽게 파악할 수 있다. 매니저들이 팀원 근무 피로도 관리에 있어 유용한 도움이 될 수 있어야 한다. 이러한 목표를 가지고 프로젝트가 시작되었습니다. 그동안 일반적인 프로젝트의 진행 방식은 기획/디자인이 선행되고 그 후에 프런트엔드 개발을 진행하였지만, 이번 프로젝트는 기획/디자인 없이 개발을 시작하게 되었습니다. 이를 통해 새로운 경험과 함께 난항이 있을 것으로 예상되었습니다. 이 과정에서 얻은 경험을 공유하고자 합니다. 진행 과정 우선적으로 근무량을 파악하기 위한 데이터 수집이 필요했습니다. 이미 주간보고를 매일 인트라넷에 ..

들어가며 알고리즘은 개발자들에게 보통 대기업 입사를 위한 코딩테스트, 혹은 AI와 같은 어나더 레벨의 개발에 쓰인다고 인식되고 있습니다. 하지만 알고리즘은 개발자에게 뗄 수 없는 굉장히 중요한 요소라고 생각합니다. 그 이유는 기업이 구인 시 코딩테스트를 보는 이유에 대해 생각해 보면 나옵니다. 코딩테스트는 넓게 보면 굉장히 단순한 구조입니다. 문제를 읽는다 → 문제가 요구하는 대로 구현한다. 여기서 더 자세히 들여다보면 우선 문제의 요구 사항을 명확하게 파악해야 합니다. 어떤 범위의 입력을 받고 그것을 통해 어떤 결과물을 내야 하는지 한 치의 오차도 없이 파악해야 정확성, 효율성 모두 만족하는 결과를 낼 수 있습니다. 문제의 조건에 맞춰서 어떤 알고리즘을 써야 하는지 생각해야 하기도 합니다. 가장 중요한..

들어가며 실무에서 스크롤을 내리다 특정 시점에 실행되어야 하는 이벤트를 구현하는 일이 있었습니다. 자연스럽게 window scroll 이벤트를 이용해서 작업을 했는데, 더 나은 방법인 Intersection Observer API라는 걸 알게 되면서 적용해 보고 느낀 점을 적어보려 합니다. Intersection Observer API 란? 구글 번역기로 Intersection Observer를 직역해 보면 ‘교차로 관찰자’라고 합니다. ‘교차로 관찰자’, 너무 직역된 것 같죠? 이해하기 쉽게 의역해 보자면 브라우저의 뷰포트와 타깃 엘리먼트의 교차점을 관찰하는 API라고 합니다. 더 쉽게 말해보면 브라우저에 우리가 지정한 요소가 지금 보이는지 구별하는 기능을 제공한다고 생각하면 됩니다. 앞서 이 API가..

들어가며 React는 사용자 인터페이스를 구축하기 위해 많이 사용되는 JavaScript 라이브러리입니다. 그러나 React 애플리케이션을 개발할 때, 복잡한 상태 관리 문제를 다루어야 하는 경우가 종종 발생합니다. 예를 들면 최상위 부모 컴포넌트에서 보내주는 데이터가 몇단계의 자식 컴포넌트로 전달되어야 하며 전달받은 데이터로 인해서 상위의 상태값이 업데이트되어야 할 때… 쉽진 않겠죠? 이러한 문제를 해결하기 위해 상태 관리 라이브러리를 사용할 수 있습니다. 이번 글에서는 Jotai라는 React 상태 관리 라이브러리에 대해 간단히 살펴보겠습니다. Jotai란? React의 상태관리 라이브러리중 하나입니다. Jotai란 뜻은 일본어로 “상태”라는 의미인데요 Jotai를 사용했을때 리액트 애플리케이션에서 ..

들어가며 최근 모바일 애플리케이션과 연계되는 웹사이트를 오픈하면서 딥링크(Deeplink)를 사용하게 되었어요. 자주 사용되지는 않지만 알아두어야 하는 것이어서 짧게 포스트로 남겨놓아요. 딥링크(Deeplink)란? 딥링크는 특정 주소 혹은 값을 입력하면 앱이 실행되거나 앱 내 특정 화면으로 이동시키는 기능을 수행해요. 딥링크는 3가지 방식으로 구분돼요. URI 스킴 방식 : 앱에 URI 스킴(scheme) 값을 등록하여 딥링크 사용 앱링크(App Link) : Android 제공 - 도메인 주소를 이용한 딥링크 사용 유니버설 링크 (Universal Link) : iOS 제공 - 도메인 주소를 이용한 딥링크 사용 그중에서도 URI Scheme 방식을 사용했어요. URI Scheme 방식의 딥링크 URI..

들어가며 요즘 여기저기서 심심치 않게 들려오는 CHAT GPT 관심이 없는 사람도 한 번쯤은 들어볼 수밖에 없을 만큼 미디어에서 뜨거운 감자입니다. 그럼 CHAT GPT가 무엇일까요? ChatGPT란? ChatGPT는 Generative Pre-trained Transformer(GPT)와 Chat의 합성어로 OpenAI가 개발한 프로토타입 대화형 인공지능 챗봇이다. 대화형 인공지능 챗봇. ChatGPT는 챗봇 기술과 GPT-3 기술을 결합한 기술로, 인공지능 분야에서 많은 주목을 받고 있습니다. 자연어 처리 기술을 이용하여 자연스러운 대화가 가능한 AI 챗봇 정도로 정리하면 가장 이해가 쉬울 것 같습니다. ChatGPT를 프론트엔드 개발에 어떻게 활용할 수 있을까? 저는 Chat GPT에 다음과 같은 ..

들어가며 요즘 대부분의 사이트, 콘텐츠를 URL로 공유하고 있는데, 이때 해당 경로에 대한 썸네일과 함께 전달이 될 텐데요. 이 부분을 설정하는 것이 OG입니다. 프로젝트를 진행하면서 알고는 있었지만 직접 등록을 하지는 않아 넘겨두었다가 이번에 작업을 진행하면서 생각보다 쉽게 내가 작업한 사이트에 대한 정보를 제공함으로써 사용자에게는 더 나은 UX를 제공할 수 있고, 코드적으로는 적용하기 쉬운 것 같지만 알아두어야 할 부분들도 경험하게 되어 공유하면 좋을 것 같아 몇 자 적게 되었습니다. OG란? 풀 명칭은 Open Graph Protocol이라고 합니다. 오픈 그래프 프로토콜은 어떠한 인터넷 웹사이트의 HTML 문서에서 head -> meta 태그 중 “og:XXX”가 있는 태그들을 찾아내어 보여주는 ..

들어가며 우리는 적게는 3-4명, 많게는 10명 이상의 인원이 협업하면서 프로젝트를 진행합니다. 어떻게 하면 팀원들 간에 더 나은 협업을 할 수 있는지, 좋은 팀을 만들 수 있는지 고민이 한 번쯤은 있으셨으리라 생각합니다. 협업의 기술이란 책에서 소개하는 HRT 베푸는 방법과 비판을 받아들이는 방법 모두 배우기. 를 통해 좋은 협업, 좋은 팀을 만들기 위해 무엇이 필요한지 내용을 조금 공유하고자 합니다. HRT란? 개발은 팀 스포츠 이며, 한 사람에 의해 만들어진 성공적인 소프트웨어라고 부를 수 있는 것 중에 대중화된 것은 거의 없다. 훌륭하게 기능하는 팀은 황금과도 같으며, 성공을 위한 진정한 핵심이다. 라고 이야기 하며 HRT란 무엇인지에 대해 설명합니다. 겸손(Humility) 당신은 우주의 중심이..

들어가며 저희 선임님과 오전 스터디 중 pxd 웹 접근성 프로젝트가 SSR 환경으로 만들어졌는데 웹 접근성의 어떤 장점이 있냐 물어보셨습니다. "SSR이기 때문에 SEO가 좋다." 라고 대답했지만, SSR이 왜 SEO가 좋은지 설명을 못 드렸습니다. 웹 관련해서 일하고 있다면 상식으로 알아야 할 지식! 그래서 알아보게 된 CSR과 SSR의 차이점같이 알아볼까요?? SPA? MPA? 우선 CSR과 SSR을 설명해 드리기 전에 SPA와 MPA의 개념을 알아야 하는데요. 서로 밀접한 관계라고 볼 수 있습니다! 우리에게 좀 더 친숙한 SPA부터 알아봅시다! SPA(Single Page Application) SPA 싱글 페이지 애플리케이션 이란? 싱글 페이지 즉, 하나의 페이지로 이루어진 홈페이지입니다. 하나의..

들어가며 지난 글에서 web3가 무엇인지 살펴보았는데요. (WEB 3.0 - web3가 뭐죠?) 이번에는 프론트엔드 시점에서 바라본 web 3.0에 대해 이야기해 보고자 합니다. 사용자는 주로 웹브라우저를 통해 프론트엔드에 접근하여 디앱을 구동하고 서비스를 이용할 수 있는데 그 가운데에서 우리가 가장 영향력을 펼칠 수 있는 디앱에 대해 알아보아요. DApp (Decentralized Application)이란? 디앱(DApp, Decentralized Application)은 분산형 애플리케이션을 말해요. 디앱은 블록체인 기술(암호화폐와 블록체인, 스마트 콘트랙트 등)을 기반으로 구축되며, 중앙 관리자가 없는 분산형 시스템이에요. 누구나 읽고 쓸 수 있는 공개된 블록체인 네트워크에서 동작하고, 데이터를 ..

들어가며 웹 3.0 시대를 맞이하는 현재 시점에 스마트 콘트랙트(smart contract)의 기본 개념에 조금이나마 이해를 돕고자 이번 블로그 글을 작성했습니다. 스마트 콘트랙트란? 스마트 콘트랙트는 전산으로 이루어지는 전자 계약 기술을 뜻합니다. 스마트 콘트랙트의 특징은 블록체인 기반 기술을 사용해 상호 간 계약에 있어서 제3의 인증기관이나 중개인이 필요 없이 계약 당사자 간 사전에 협의한 내용을 미리 프로그래밍하여 전자 계약서 문서 안에 넣어두고, 이 계약 조건이 모두 충족되면 자동으로 계약 내용이 실행되도록 하는 시스템입니다. 동작 원리 블록체인 기반 스마트 콘트랙트는 기본적으로 모든 트랜잭션 로그가 저장된 블록체인 데이터베이스와 스마트 콘트랙트의 상태를 저장하는 데이터베이스 두 가지가 존재합니다..

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