본문 바로가기

Client

(40)
<FE> Frontend-DevOps: 모던 프론트엔드의 역할 1. 소개 DevOps 라는 분야를 들어본적이 있을 것이다. DevOps는 개발(Dev)과 운영(Ops)의 결합을 통해 소프트웨어 개발 생명주기 전반에 걸쳐 효율성과 품질을 향상시키는 방법론과 도구 집합을 의미한다. 이는 지속적인 통합(Continuous Integration), 지속적인 배포(Continuous Deployment), 자동화된 테스트, 인프라스트럭처 코드화(Infrastructure as Code), 모니터링 및 로깅 등 다양한 관행과 도구를 포함한다. 이러한 방법론이 최근 Front-end 개발자에게도 요구되기 시작했다. 현대의 웹과 애플리케이션 개발 환경은 빠른 기술 변화와 다양한 요구 사항이 빠르게 변화하는 특성을 가지고 있다. 이러한 환경에서 프론트엔드 개발자들은 사용자 인터페이..
<UX심리학> 피크엔드 법칙 1. 소개 인간의 감정 반응은 복잡하다. 우리는 다양한 순간에 대한 수많은 감정을 느낀다. 하지만 어떤 순간이 우리의 전체 경험을 결정짓는가? 어떤 순간이 가장 인상적이고 기억에 남는가? 그것은 바로 가장 강렬한 순간과 마지막 순간이다. 이 두 순간은 우리가 어떤 경험을 어떻게 평가하고 기억하게 될지 결정한다. 이것은 '피크엔드 법칙'이라는 고객 경험 디자인 원칙의 핵심이다. 피크엔드 법칙은 소비자 심리학, 마케팅, 제품 디자인 등 여러 분야에서 활용되는 원칙이다. 이 원칙은 인간이 전체 경험을 기억하고 평가할 때 가장 높은 감정적 반응을 보였던 순간, 즉 '피크'와 마지막 순간, 즉 '엔드'가 결정적인 역할을 한다는 것이다. 이 원칙은 사용자 경험이 어떻게 구성되고 평가되는지에 대한 통찰력을 제공한다...
<UX심리학> 포스텔의 법칙 1. 소개 포스텔의 법칙은 사용자 중심의 경험 디자인에서 중요한 원칙 중 하나다. 이 원칙은 "자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게"라는 원칙을 통해 인터페이스나 시스템이 안정적이고 접근 가능해야 한다는 요구를 제시한다. 사용자가 어떤 기기를 사용하든, 어떤 기능이나 입력 메커니즘, 보조 기술을 사용하든, 심지어 어떤 연결 속도를 가지고 있든 간에, 인터페이스는 계속해서 제대로 작동해야 한다. 2. 포스텔의 법칙 * 포스텔의 법칙 기원 포스텔의 법칙은 미국의 컴퓨터 과학자 존 포스텔이 TCP 프로토콜 구현 과정에서 개발한 원칙이다. 포스텔은 스스로 견고함의 원칙이라고 명명한 법칙을 TCP명세에 도입한다. 이 원칙은 데이터를 전송하는 프로그램은 해당 데이터를 엄격하게 검사하고, ..
<FE> Next.js 13 으로 알아보는 FE 렌더링 방식 (SSR vs RSC) 1. 소개 FE 개발자라면 CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)이라는 용어는 매우 익숙할 것이다. 이번 포스팅에서는 이와 같은 렌더링 방식에 대해 다룰 예정이다. 최근에 Server Components가 Next.js 13의 출시와 함께 등장하면서 렌더링 방식이 획기적으로 변했기 때문에 지금까지의 렌더링 방식의 변화과정과 RSC(React Server Components)와 SSR을 Next.js를 통해 비교해볼 것이다. 결론부터 확인하고싶다면 "3.비교" 부분부터 봐도 좋다. * 렌더링 방식의 변화 비교적 최근 FE에서 자주 볼 수 있는 렌더링 방식의 변화과정이다. 리액트와 같은 도구의 등장으로 CSR(Client-Side Rendering)..
<UX심리학> 밀러의 법칙 1. 소개 - 밀러의 법칙은 "보통 사람은 작업 기억에 7(±2)개의 항목밖에 저장하지 못한다"라고 직관적으로 받아들이고 오해하는 사람들이 많다. 이 때문에 네비게이션 항목 개수는 7개 이하로 제한해야 한다는 등의 디자인 결정을 정당화하는 데 쓰이곤 한다. - 이 법칙은 주로 인간의 단기 기억 용량과 관련하여 이해되지만, UX 디자인에도 실질적인 도움을 주는 원리로 활용된다. 이번 포스팅에서는 밀러의 법칙의 개념과 UX 디자인에서 어떻게 유용한지 살펴보도록 하겠다. 2. 밀러의 법칙 * 기원 - 밀러의 법칙은 1956년 인지심리학자 조지 밀러(George Miller)가 "The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity f..
<BFF> BFF 개발 시의 고려요소 1. 소개 - 지난 포스팅에서는 BFF란 무엇인지, 어떻게 구현될 수 있는지 알아보았다. BFF는 프론트엔드와 백엔드 사이에서 중간 계층으로 동작하는 서버이다. 서버이기 때문에 BFF를 개발할 때는 데이터 통신, 보안, 성능 최적화, 배포 등을 고려해야 한다. 이 포스팅에서는 BFF 개발 시 이 네 가지 요소에 대해 자세히 알아보고, 각 요소의 중요성과 고려사항을 살펴보겠다. 2. 고려사항 * 데이터 통신 - BFF의 데이터 통신은 프론트엔드와 백엔드 간의 효율적인 데이터 전송을 위해 중요한 요소다. 데이터 통신을 최적화하기 위해 다음과 같은 전략과 기법을 고려할 수 있다. 비동기적인 방식으로 API 호출을 처리하여 응답 시간을 단축한다. 이를 통해 클라이언트는 여러 개의 API 요청을 병렬로 처리할 수..
<UX심리학> 힉의 법칙 1.소개 - 힉의 법칙은 UI/UX를 다루는 사람이라면 알아야 할 중요한 원칙 중 하나이다. 이 법칙은 선택지의 개수와 복잡성이 의사결정에 걸리는 시간에 어떤 영향을 미치는지를 설명한다. 사용자가 원하는 작업을 빠르고 효율적으로 수행하기 위해 선택지를 최소화하는 방법을 제시한다. - 이 포스팅에서는 힉의 법칙에 대해 자세히 알아보고, 디자인에 어떻게 적용할 수 있는지, 그리고 그로 인해 얻을 수 있는 이점과 주의해야 할 사항들을 다루어 보고자 한다. 2. 힉의 법칙 * 힉의 법칙이란? - 힉의 법칙은 심리학자 윌리엄 에드먼드 힉과 레이 하이먼에 의해 1952년에 처음 제시된 개념이다. 이 법칙은 선택지의 개수와 의사결정에 걸리는 시간 사이에 로그 함수적인 상관관계가 있다는 것을 보여준다. 즉, 선택지가 ..
<BFF> BFF에 대한 이해와 구현 1. 소개 * 개요 BFF(Baackend for Frontend)는 프론트엔드 개발자가 클라이언트와 백엔드 사이에서 인터페이스 역할을 수행하는 개념이다. 이번 포스팅에서는 BFF에 대한 개념과 구현 방법에 대해 다뤄볼 것이다. * BFF 개념 이해 - BFF는 "Backend for Frontend"의 약자로, 프론트엔드 개발자가 클라이언트와 백엔드 사이에서 인터페이스 역할을 수행하는 개념이다. 기존의 모놀리틱 아키텍처에서는 백엔드가 클라이언트의 요청을 직접 처리하는 구조였지만, 마이크로서비스 아키텍처에서는 백엔드가 여러 개의 독립적인 서비스로 분리되는 경향이 생기면서 BFF의 필요성이 대두되었다. - BFF의 주요 목적은 다음과 같다. 첫째, 클라이언트와 백엔드 간의 통신을 관리하고 처리하여 클라이언..
<UX심리학> 피츠의 법칙 1. 소개 * 소개 - 사용자 인터랙션은 사용자가 불편함 없이 간단하게 이루어져야 한다. 디자이너는 이를 위해 인터랙티브 요소의 크기와 위치를 적절하게 배치해야 한다. 이 과정에서 피츠의 법칙(Fitts’s law)이 큰 도움이 된다. 이 법칙은 사용자가 대상을 사용하기까지 걸리는 시간이 대상의 크기와 대상까지의 거리와 연관이 있다는 것을 말한다. * 의미 - 피츠의 법칙은 1954년 미국의 심리학자 폴 피츠(Paul Fitts)가 터치 대상까지 움직이는 데 드는 시간을 대상까지 거리와 대상 너비 간의 비율에 관한 함수를 통해 예측한 것에서 도출되었다. 이는 물리적 세계에서의 인체 움직임을 이해하기 위한 모델이었지만, 디지털 인터페이스에서도 그대로 적용된다. - 이러한 피츠의 법칙을 디자인에 적용하기 위..
<UX심리학> 제이콥의 법칙 1. 소개 * 소개 - 사용자들은 인터넷을 이용하면서, 자연스럽게 자신이 경험한 다른 사이트들과 동일한 방식으로 새로운 사이트가 작동하길 기대한다. 이는 인터페이스를 배우는 데 드는 정신적 에너지를 최소화하고, 사용자가 그들의 목표에 초점을 맞추도록 돕기 때문이다. - 이 글을 읽는 우리(디자이너, 기획자, 개발자)의 임무는 인터페이스를 만들면서 이러한 방해 요소를 최대한 줄이고, 사용자가 목적을 달성하도록 도와주는 것이다. 이를 달성하기 위해, 일반적인 디자인 패턴이나 관례를 사용하여 페이지 구조, 작업 흐름, 내비게이션, 검색 등의 전략적 영역을 구성하는 것이 일반적일 것이다. 이를 통해, 사용자들은 새로운 웹사이트나 애플리케이션의 작동 방식을 따로 익히지 않아도 즉시 사용할 수 있게 된다. * 의미..