FE/UI & UX 썸네일형 리스트형 FE/UI & UX 디자인 시스템은 언제 도입해야 할까? 디자인 시스템 도입 시 고려 사항 디자인 시스템을 만들고 유지하는 업무는 꽤 시간이 걸리며 보통 이를 전담하는 부서가 필요하다. 구성원들이 디자인 시스템을 사용 및 적용하기 위한 교육이 필요하다. 고정된 정보를 제공하는 프로젝트(e.g. 기업 소개 웹사이트) 또는 일회성 프로젝트(e.g. 프로모션용 랜딩 페이지)에는 재사용할 수 있는 컴포넌트가 필요하지 않을 수 있다. 작은 규모의 서비스에서는 디자인 시스템을 도입하는 것이 비효율적일 수 있다. 미리 확장성을 고려해 시스템을 구축하기 때문에 시간과 비용이 많이 들기 때문이다. 따라서 작은 규모에서는 디자이너와 개발자가 일관성이 필요한 디자인 요소들을 직접 디자인하고 관리하는 것이 더 빠를 수 있다. 하지만 서비스 규모가 점점 커진다면 디자인 요소들의 양도.. FE/UI & UX 디자인 시스템 디자인 시스템이란? 디자인 시스템(Design System)은 디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성된 시스템을 의미합니다. 이는 전체 서비스에 효율적이고 일관된 디자인을 적용할 수 있도록 도와준다. 종종 디자인 요소를 모은 UI 키트를 디자인 시스템으로 혼동하기도 하지만, 디자인 시스템은 디자인 원칙, 스타일 가이드, 컴포넌트, 패턴 그리고 디자인 및 개발 프로세스에 대한 지침까지 포함하는 포괄적인 개념이다. 이런 점에서 디자인 시스템은 단순한 “디자인” 가이드가 아니라, 디자인 팀과 개발팀이 업무 전반 프로세스와 방식을 일관되게 가져갈 수 있도록 도와주는 협업 “시스템”에 가깝다. 이를 통해 제품 개발에 관련된 인원들이 통일된 규칙하에 사용자에게 일관된 디자인과 사용성을.. FE/UI & UX 웹 접근성에 맞게 Cmarket 리팩토링하기 1. 삭제 버튼 재확인 기존 코드 const handleDelete = (itemId) => { setCheckedItems(checkedItems.filter((el) => el !== itemId)) dispatch(removeFromCart(itemId)) } 문제점 장바구니 화면에서 '삭제' 버튼을 누르면 '삭제 버튼'이라고 읽어줌과 동시에 해당 항목이 바로 삭제가 되는 문제가 발생했다. 청각장애인이 해당 서비스를 사용하는 경우, 해당 버튼의 의미를 알아보기 위해 클릭했을 때 의도치 않는 -물건이 삭제 되는- 상황이 발생할 수 있다. 리팩토링 const handleDelete = (itemId) => { if (window.confirm(`장바구니에서 삭제할까요?`)) { setCheckedIte.. FE/UI & UX 웹 접근성 개선해보기 웹 표준에 맞는 시맨틱한 HTML 코드 작성하기 그리고 웹 콘텐츠 접근성 지침 중 일부를 충족해보기 (WAI-ARIA 등) 스크린 리더를 활용하여 웹 접근성 개선해보기 스크린 리더 설치 시작하기 전에, 화면의 구성 요소를 읽어주는 스크린 리더를 설치해야 한다. 스크린 리더를 사용해서 시각적 요소를 제대로 인지할 수 없는 환경에서 화면 구성을 어떻게 파악하게 되는지 직접 확인해볼 수 있다. Chrome 확장 프로그램인 ChromeVox Screen Reader를 설치하여 사용한다. 설치 후 확인하고자 하는 요소를 클릭하면 스크린 리더가 요소를 인식하여 읽어주게 된다. Chrome창 우측 상단에 있는 더보기 버튼 → 도구 더보기 → 확장 프로그램 페이지에서 스크린 리더 활성화 및 비활성화를 할 수 있다. 필.. FE/UI & UX 웹 접근성 & 웹 콘텐츠 접근성 지침 웹 접근성이란? (Web Accessibility) 컴퓨터와 스마트폰만 있으면 정보를 찾고, 사람들과 소통하고, 물건을 살 수 있다. 클릭 몇 번, 터치 몇 번이면 우리 집 문 앞에 내가 산 물건, 음식이 배달되기도 합니다. 그런데 당장 화면이 고장 난 상태에서 물건을 사려면? 아마 상상만 해도 어렵고 막막한 상황일 것이다. 동영상 플랫폼과 동영상 콘텐츠도 넘쳐난다. 아무 생각 없이 재미있는 영상을 보다 보면 하루가 금방 지나가버리기도 한다. 그런데 갑자기 소리가 들리지 않는다면 어떨까? 자막이 있다면 다행이지만, 그렇지 않다면 당장 영상에서 무슨 말을 하고 있는지 조차 알기 힘든 영상도 많을 것이다. 이런 상상만 해도 답답한 상황을 매일 겪는 사람들이 있다. 단지 몸이 조금 불편하다는 이유로 그렇지 않.. FE/UI & UX SEO * SEO의 개념과 종류, 필요성 * SEO에 영향을 미치는 요소의 종류와 작성 방법 검색엔진에서 무언가를 검색하여 원하는 결과를 찾은 후, 굳이 마지막 페이지까지 매번 보는 경우는 잘 없을 것이다 심지어 원하는 결과가 상위에 있다면 1 페이지조차 전부 확인 안 하고 넘어가는 경우가 대부분일 것 이다. 즉, 열심히 웹 페이지를 만들어도, 검색했을 때 검색 결과 상위에 없거나 뒤 페이지로 밀려난다면 아무도 찾지 않는 웹 페이지가 되어버린다. 이런 사태를 방지하기 위해서는 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해 주는 작업, SEO(Search Engine Optimization, 검색 엔진 최적화)가 필요하다. SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 .. FE/UI & UX 웹표준 * 웹 표준의 개념과 등장 배경 * Semantic HTML의 개념과 종류 그리고 사용법 * 자주 틀리는 마크업 규칙들과 맞는 표현 * 크로스 브라우징 개념과 방법 웹이란? Q. 🤔 인터넷은 웹 기반으로 작동한다. ( O / X ) A. 정답은 X이다. 이유는 인터넷이 웹보다 좀 더 포괄적인 개념이기 때문이다. 인터넷은 ‘전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망’을 의미하며, 웹뿐만 아니라 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함한다. 웹을 두 글자로 정의한다면 ‘공간’으로 정의할 수 있다. 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간이 ‘웹’이다. 웹 표준 2000년대 초에는 인터넷 익스플로러에서는 작동이 되어도 사파.. FE/UI & UX [UI] 컴포넌트 UI 개발을 위한 Storybook Component Driven Development 가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기) 가 등장했다. Component Explorer에는 많은 UI 개발 도구가 다양하게 있는데 그중 하나가 Storybook이다. Storybook이란? Storybook은 UI 개발 즉, Component Driven Development를 하기 위한 도구이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다. Storybook은 재사용성을 확대.. FE/UI & UX [UI/UX] 와이어프레임 & 프로토타입 * 와이어프레임과 프로토타입의 특징과 차이점 * 와이어프레임과 프로토타입을 피델리티에 따라서 구분하기 와이어프레임과 프로토타입은 제품 개발 이전에 화면 구조를 설계하기 위해 작성하는 것이라는 공통점을 가지며, 두 개념을 혼동해서 사용하는 경우도 종종 있다. 하지만 둘은 작성 시점도 작성 목적도 완전히 다르다. 와이어프레임(wireframe) 와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만든다. 피델리티(fidelity) 와이어프레임을 표현할때의 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨로 나뉜다. 1. Low Fidelity Wireframe (Lo-Fi Wireframe) .. FE/UI & UX [UI] UI 디자인 패턴 / UI 레이아웃 구성법 (컬럼 그리드 시스템) * UI 디자인 패턴 : 화면에 배치할 수 있는 자주 쓰이는 컴포넌트 * UI 레이아웃 구성법 : 컴포넌트들을 화면에 어떻게 배치할 것인지를 정하는 방법론 - 컬럼 그리드 시스템 UI 디자인 패턴 UI 디자인 패턴은 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴을 말한다. 쉽게 말하면 자주 사용되는 UI 컴포넌트라고 할 수 있다. 재귀로 구현해 보았던 Tree UI도 자주 쓰이는 UI 패턴 중에 하나이다. 자주 쓰이는 UI 디자인 패턴을 익혀두면 UI를 디자인하기 보다 쉬워지고, 프론트엔드 개발자, 디자이너, PM 과의 의사소통도 원활해져 협업 효율도 높아진다. 다음은 자주 쓰이는 UI 디자인 패턴의 예시이다. 모달 (Mo.. FE/UI & UX [UX] 피터 모빌(Peter Morville)의 UX 7요소 / User Flow 피터 모빌(Peter Morville)의 UX 7요소를 만드는 요소 User flow의 개념과 활용법 UX를 디자인한다는 것은 사용자들을 이해하고 배려하여 최상의 경험을 제공하고자 노력한다는 뜻이다. 단순히 기능하는 페이지를 만드는 것을 넘어서 더 완성도 있는 서비스를 만들 수 있게 된다. 좋은 UX를 만드는 요소 " 좋은 UX를 만들려면 무엇을 고려해야 할까? " 피터 모빌의 벌집 모형 피터 모빌(Peter Morville)의 벌집 모형은 이 질문에 대한 답을 준다. 이 모형에서 제시한 UX의 7가지 요소를 알아보자. 1. 유용성(Useful) : 사용 가능한가? 유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소이다. 계산기라면 계산을 틀리지 않고 맞는 결괏값이 .. FE/UI & UX [UI/UX] UI와 UX / 제이콥 닐슨의 10가지 사용성 평가 기준 UI와 UX 두 키워드 모두 사용자에게 보이는 화면을 구성하는 방법, 사용자가 사용하게 될 기능을 구현하는 방식과 관련이 있다는 점에서 프론트엔드 개발과 밀접한 관련이 있다. UI UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다. 예시: 휴대폰 휴대폰을 예시로 들어보면, 스마트폰 이전의 피처폰들은 디스플레이가 있긴 했지만, 터치로 상호 작용할 순 없었다. 물론 화면 터치가 가능한 모델도 있었지만, 그 수가 많지 않았다. 그래서 숫자 버튼, 방향 버튼 등 다양한 종류의 물리적 UI가 있는 형태.. ⬆︎ 이전 1 다음
