본문 바로가기

UX 개발

아이폰으로 모바일웹(사파리) 개발자 모드 디버깅 환경 구축하기 크롬을 통해서 안드로이드 기기의 모바일웹 디버깅 환경이 구축한 것처럼, 사파리를 통해서 아이폰의 모바일웹 디버깅 환경 또한 구축이 가능합니다. 다만 사파리의 경우 맥에서만 구동되는 어플리케이션이기 때문에 맥 기기를 통해서 진행하셔야 합니다. 윈도우용 사파리가 과거에 있었기 때문에, 윈도우에서도 사파리 구동이 가능하다고 생각하는 경우가 있는데 해당 버전은 2011년 이후로 지원이 끊긴, 사장된 어플리케이션입니다. 사파리는 맥과 iOS 전용 어플리케이션입니다. 1. 맥 컴퓨터 사파리에서 개발자 도구 활성화 사파리의 옵션 메뉴에서 개발자 도구를 활성화합니다. 2. 아이폰 또는 iOS 기기 사파리에서 Web Inspector 활성화 설정 메뉴의 사파리, 그리고 고급 기능 중 Web Inspector를 활성화합니..
안드로이드 기기로 모바일웹(크롬) 개발자 모드 디버깅 환경 구축하기 데스크탑 컴퓨팅 환경에서 제작된 개발산출물은 모바일 컴퓨팅 환경을 정확하게 시뮬레이션하지 못합니다. 그런 이유로 가장 확실한 모바일웹 디버깅 환경을 구축하는 방법은 모바일 기기를 통해서 디버깅을 하는 것입니다. 안드로이드 기기의 경우 크롬 웹브라우저를 통해 맥이든 윈도우든 상관 없이 쉽게 디버깅 환경을 구축할 수 있습니다. 유선 케이블을 이용하지 않고 무선으로 연결하거나, 크롬 외 다른 브라우저로도 모바일웹을 디버깅할 수 있는 방법은 별도로 존재하니, 해당 내용 확인이 필요한 경우에는 별도 리서치를 추가적으로 진행하시기를 권장 드립니다. 1. 안드로이드 기기의 개발자 모드 활성화하기 안드로이드 설정에 들어가서 개발자 옵션 메뉴에 진입해 USB 디버깅 기능을 활성화합니다. 더불어 원활한 디버깅 환경 구축을..
CSS 클래스 네이밍 시 container vs wrapper 차이 구분하기 콘테이너로 정할까, 랩퍼로 정할까... container와 wrapper 모두 일반적으로 엘레먼트를 포괄하는 요소로서의 의미를 지니고, 클래스 이름으로 많이 사용되는 단어들입니다. 무언가를 포함한단는 데에서 같은 의미의 단어로 사용할 수 있고, 작성자와 해독자 입장에서 구분 없이 해당 내용을 받아들이는 데에 큰 문제가 없을 것입니다. 다만 보다 엄격하게 두 단어를 구분하여 사용한다고 하면 다음과 같은 내용을 참고하여 의미 구분을 할 수 있을 것으로 보입니다. 본 내용은 스택오버플로우에서 2010년 논의된 'CSS Language Speak: Container vs Wrapper?'의 내용을 기반으로 작성되었습니다. 해당 논의 내용을 보면, 기보적으로 차이를 두지 않고서 사용해도 무방하지만, 엄격하게 구분..
Border 속성이 부여된 박스 내부에 absolute 포지션 사용하기 Border는 CSS 박스의 콘테이닝 영역에서 제외되는 특징을 지닙니다 Border 속성은 CSS 박스 모델에서 별도의 고유 구성체계를 지니는 것처럼 보입니다. 값이 지정되면 border가 속하는 박스의 width와 height 값에 상관없이 영역을 차지하지만, 박스에 종속된 것이 아닌 별도의 개체처럼 활용이 됩니다. Border 속성의 개별성이 가장 잘 드러나는 특징은 border가 속하는 박스의 실제 콘텐츠를 감싸는 콘테이닝 영역에서 제외된다는 점입니다. 100px x 100px의 박스를 만들고 2px의 border를 부여한 박스가 있다고 했을 때 border는 콘테이닝 영역에서 분리됩니다. 이것은 박스 내부에 자식 엘리먼트의 위치를 정하는 데에 불편요소로 작용할 수 있습니다. Absolute 등의 ..
간단한 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..
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..
[MacOS] 프리뷰 앱으로 이미지 사이즈 조절하기 이미지의 직접 편집보다 사이즈만을 수정하는 경우는 굉장히 빈번하게 발생합니다. 이런 경우 이미지 리사이징만을 위해 포토샵을 켜는 것도 다소 리소스를 과잉하는 것이라고도 볼 수 있습니다. 물론 포토샵을 통해서 이미지 리사이징을 하면 리사이징 방식에서부터 압축율 최적화 등에까지 상세한 설정이 가능합니다. 다만 인스턴트하게 이미지 리사이징만을 하는 경우라면 맥에서는 기본 이미지 뷰어 앱은 프리뷰에서 쉽게 할 수 있습니다. 이미지를 프리뷰 앱을 통해서 실행한 후 Tools 메뉴에서 Adjust Size... 메뉴를 확인하실 수 있습니다. 이 메뉴를 통해서 DPI까지 설정할 수 있는 등 비교적 상세하게 이미지 리사이징 옵션을 설정할 수 있습니다. 별도의 써드파티 앱을 설치하지 않고 이미지 리사이징을 간단하게 수행..
외주/과외 문의

티스토리툴바