본문 바로가기
간단한 pure JS & CSS와 AJAX 활용 페이지 트랜지션 페이지 트랜지션을 만드는 방법에 있어서, swup 같은 라이브러리를 이용할 수도 있고 GSAP과 같은 advanced한 애니메이션 라이브러리를 활용할 수 있을 것입니다. 이 포스트에서는 기초 학습 차원에서 pure JS, CSS, AJAX(xhttp)를 이용해서 간단한 페이지 트랜지션을 만드는 방법을 학습하고자 했으며, 이를 구현해 보았습니다. 기본적인 원리는 overlay-screen이라는 클래스의 z-index 최상위 값을 갖는 요소를 width와 height를 0으로 숨겨 놓습니다. AJAX 콜을 날릴 때 overlay-screen에 width와 height을 변경시키는 애니메이션을 classList.add()를 통해 걸어 줍니다. animationend 이벤트를 받아서 classList.remov..
색 (Color) 색은 다루기가 매우 힘든 디자인 요소 중에 하나입니다. 무한에 가까운 색 조합 패턴 속에서 적절하지 못하거나 일관성 없는 색상 사용으로 이어지기도 매우 쉽습니다. 색에 대한 이론적 이해나 실용적 활용법 등은 이미 다른 수없이 많은 자료들이 있기에, 이 부분들은 제하고 디자인 시스템 제작 관점에서 색을 시스템화하는 일반적인 패턴과 관련 지식을 알아 보고자 합니다. 디자인 시스템의 색 체계화: 디자인에 최적화된 컬러 팔레트를 구축하는 과정디자인 시스템에서 색을 정의한다는 것은 디자인에 활용할 컬러 팔레트를 정의하는 과정이라고도 볼 수 있습니다. 이 과정에서 단순히 주관적인 판단이 아닌, 브랜드와 서비스 특성 및 사용자 등 복합적인 디자인 제반 요소들을 고려하여 최적의 효율/효과성을 지닐 수 있는 컬러 팔레트..
라디오 버튼 (Radio Button) 라디오 버튼? 라디오 버튼 역시 명칭과 기능이 현실에서의 메타포를 기반으로 합니다. 지금 세대는 모를 수 있지만, 과거 라디오 플레이어의 주요 버튼들의 의 동작은 하나의 버튼을 누르면 다른 버튼들은 모두 비활성 상태로 튀어 나오는 형태를 갖고 있었습니다. 아래 이미지를 참고하시면 이해가 편하실 수 있습니다. 이 버튼들은 라디오 주파수를 기억하는 Preset을 저장하는 데에 사용되거나, 아니면 카세트 테이프 이후 시대에는 카세트 테이프를 조작하는 용도로 사용되었는데, 공통적으로 하나의 선택값만을 활성화할 수 있다는 특징이 있었습니다. 하나의 선택값만을 활성화하는 속성을 그대로 유지하면서, 이와 같은 기능을 하는 GUI 상의 컨트롤 타입을 라디오 버튼이라는 이름으로 부르기 시작했습니다. 동그란 형태의 라디오..
메뉴 (Menu) 메뉴란? 디자인 시스템과 디자인 컴포넌트의 정의는 사용자 경험 설계에 관계한 환경과 디자인 철학에 따라 시스템별로 상이한 규칙성을 지니게 됩니다. '메뉴'라는 일반적인 용어조차 시스템별로 다른 용도로 사용이 됩니다. GUI의 대부분의 요소들이 그렇듯, 메뉴 또한 현실의 메타포에 기반합니다. 식당에서 고르는 그 메뉴에서 기반한 것이며, 문화적으로 송나라에서 미리 음식을 만들어 골라서 먹을 수 있게 제공하던 서비스에서 기원하며 어원 상으로는 라틴어 'minutus(작게 만들어진 물건)'에서 파생된 불어 'menu'에서 기원한다고 합니다. '선택할 수 있는 작은 단위' 정도의 의미로 파악하는 것이 적절한 메뉴의 의미가 아닐까 싶습니다. 다소 넓은 범위의 이와 같은 정의는 사용자가 컨트롤할 수 있는 대부분의 항..
display: none에 애니메이션 추가하기 display: none을 활용한 element의 숨김/표시는 가장 기본적인 방식의 show/hide 처리방법입니다. 다만 CSS transition이 적용되지 않기 때문에 자연스러운 애니메이션을 구현하기 위해서는 약간의 추가적인 작업을 필요로 합니다. 간단한 클래스 추가 과정을 통해서 display: none을 활용한 show/hide 처리에 애니메이션을 추가하는 방법을 알아보고자 합니다. 기본적으로 animation을 display 개체에 추가해서 애니메이션을 추가함과 함께 display: none 속성을 애니메이션 재생 이후에 딜레이를 주어 추가함으로써 자연스러운 트랜지션이 가능하게 하는 방식입니다. [2022-02/2022-06 내용 추가] 본 내용은 display: none에 애니메이션을 추가하..
[MacOS] 언어전환(한영전환) 단축키 shift + space로 변경하기 2022년 07월 07일 추가 내용: 최신 MacOS 버전 업그레이드 이후 아래 기재한 Shift를 통한 키맵핑 방법은 작동하지 않습니다. 다른 키보드 맵핑 프로그램을 활용하거나, 시스템 설정을 변경하는 등의 방법을 취해야 합니다. 2016년경부터 맥OS에서 언어전환 단축키 기본값은, 영문의 대문자 고정용으로 사용되던 CAPS LOCK키가 사용되기 시작했습니다. 버튼의 위치나 크기는 큼직해서 누르기 좋아 보일 수 있으나, 어떤 이유에서인지 CAPS LOCK키를 사용하는 경우에는 언어전환에 있어서 딜레이가 발생하는 이슈가 있었습니다. 이것은 아마 오래 누르고 있으면 대문자 고정 기능을 수행해야 되는 기능 중복으로 인한 문제가 아닌가 싶습니다. 그래서 예전부터 사용되어 오던 CMD + Space 나 CTRL..
피그마 데스크탑앱에서 export 또는 작업시 색상이 다르게 나오는 문제 해결 피그마 데스크탑앱에서 컬러가 다르게 export 되거나, 작업 환경 상에서 다르게 표시되는 상황이 발생하곤 합니다. 이는 데스크탑앱이 사용중인 컴퓨터의 color space를 그대로 상속받아 사용하기 때문에 발생하는 문제입니다. 문제를 정확히 이해하기 위해서는 color space를 비롯한 디지털색상 관련 추가 리서치가 필요할 것으로 보입니다. 이 포스트에서는 색상이 다르게 보이는 문제해결에 우선순위를 두도록 하고, color space를 비롯한 보다 세부적인 디지털색상 관련 지식은 관련 링크를 포스트 하단에 배치하는 것으로 대체하고자 합니다. 피그마는 기본적으로 sRGB 컬러 스페이스를 사용한다고 합니다. 그렇기에 웹브라우저로 접속시에는 sRGB color space로 표시가 되며, 이는 가장 일반적인..
피그마(Figma) 기능 - 픽셀 그리드와 픽셀 스냅, 그리고 서브 픽셀 피그마는 기본적으로 디지털에서 픽셀 단위로 표현되는 디스플레이에 초점을 두고 제작된 디자인 프로그램입니다. 하지만 동시에 벡터 프로그램이라는 특성을 지니고 있습니다. 벡터 그래픽이 픽셀 단위로 표현될 때 이해가 필요한 부분이 바로 픽셀 그리드와 픽셀 스냅, 그리고 서브 픽셀입니다. 간략하게 이 개념들에 대해 알아 보고 피그마에서 이들을 활용할 수 있는 방법에 대해 알아 보겠습니다. 피그마의 뷰 설정 픽셀 그리드, 픽셀 스냅, 서브 픽셀 등의 개념과 관련된 항목들은 피그마의 '뷰' 메뉴에서 확인할 수 있습니다. 메인 인터페이스의 우측 상단에 있는 뷰의 퍼센테이지를 나타내는 드롭다운 버튼이 '뷰' 메뉴의 주요 메뉴들을 모아 놓은 버튼이기도 합니다. 픽셀 그리드 줌 레벨을 일정 레벨 이상으로 확대하면 나타나는..
외주/과외 문의

티스토리툴바