본문 바로가기

UX 개발

[VSCode] 화면을 나누어서 파일 열기 및 나누어 열려진 창(splited window pane)끼리 커서 이동하기 VSCODE는 2019년 기준 가장 많은 프론트엔드 개발자들이 사용하는 텍스트에디터라고 볼 수 있는 Visusal Studios Code의 약자입니다. 화면을 나누어서 파일 열기 화면을 나누어서 파일을 여는 방법은 기본적으로 가장 쉬운 방법을 파일을 오픈할 때 드래그를 통해서 원하는 공간에 배치하면, 자동으로 스플릿 뷰를 만들어서 배치할 수 있게 VS Code가 도와줍니다. 또 다른 방법은 Control+P를 통해서 파일을 서치해서 여는 경우나, 사이드바의 파일탐색기를 통해서 파일을 여는 경우 파일이 선택된 상황에서 Control+Enter를 하면 자동으로 오른쪽 공간에 스플릿 뷰를 만들어서 파일이 열리는 것을 확인하실 수 있습니다. 맥의 경우는 Control이 아닌 CMD를 눌러야 합니다. 나누어지 열..
HTML 테이블로 이메일용 반응형 레이아웃 구성하기 (No Media Query, 반응형 테이블) 미디어쿼리 없이 테이블로 반응형 레이아웃을 구성이 가능하다는 걸 알고 계셨나요? 아니 그것보다 왜 그런 방법을 써야 하냐고 물으실 거 같습니다. 사실 미디어쿼리를 쓰면 되기 때문에 이 방법은 딱히 효용이 없다고 느끼실 수도 있습니다. 다만 레가시한 환경에서 반응형 구성이 필요할 때 유용한 방법이 될 수 있습니다. 미디어쿼리가 적용되지 않는 예전 Ie 브라우저에 최적화를 해야 하는 웹페이지이거나, 특히 '이메일' 템플릿을 구성하는 데 있어서 여러 클라이언트와 아웃룩 등의 독특한 랜더링 환경에서 정상적으로 웹페이지를 표시하는 데에 있어서 특히 유용할 수 있습니다. 반응형 테이블: 이메일 템플릿 제작에 유용 용도에 대해 앞서 말씀드렸는데 사실 주된 용도는 바로 이 이메일 템플릿 제작에 활용하는 것이라고 볼 수..
[SEO] 웹페이지 프리뷰이미지(썸네일) 디자인가이드 메타데이터를 통해 웹페이지에 대한 정보로 등록되는 항목 중 이미지는 각종 소셜미디어나 인스턴트메신저 등을 통해서 웹페이지에 대해서 표시되는 주요 정보 중 하나입니다. 보통 open graph에서 제공되는 하나의 항목 중 하나로 취급됩니다. 다만 서비스 또는 클라이언트 별로 이 프리뷰 이미지를 표기하는 방식이 다르기 때문에 최대한 적응성이 높은 웹페이지 메타데이터 이미지를 디자인하는 방법에 대해서 알아 보고자 합니다. 메타데이터 상에서는 'image'라고 불리우지만 실질적으로 '프리뷰이미지', '썸네일이미지' 등의 이름으로 더욱 자주 불리기에 이하 글에서는 프리뷰이미지라고 부르도록 하겠습니다. 정사각형 또는 직사각형 선택 웹페이지 메타데이터는 표준화되어 있다고 보기가 애매하고, 서비스와 클라이언트 별로 표..
[SEO] 페이스북의 프리뷰 이미지/정보 강제 갱신하기 웹페에지와 관련된 정보를 나타내 주는 메타데이터는 특정 클라이언트나 서비스 종속적인 코드가 존재합니다. 이 중 가장 표준적인 형태의 메타데이터는 title, description, favicon과 같은 기본적인 요소들 외에 og라고 불리우는 open graph를 들 수 있습니다. 페이스북 프리뷰 이미지/정보에 사용되는 메타데이터는 open graph 정보를 토대로 작성이 됩니다. 페이스북은 자체 캐싱 서버를 가지고 있어서 프리뷰 정보를 캐싱처리합니다. 그래서 이전에 이미 공유한 적이 있는 경우 캐싱 데이터를 토대로 프리뷰를 표시합니다. 이같은 페이스북에서 긁어가는 메타데이터 정보를 강제로 갱신하는 방법은 다음 페이스북 쉐어링 디버거를 사용하는 것입니다. 페이스북 쉐어링 디버거 해당 디버거를 통해서 URL..
[MacOS] 용량 관리에서 Other 항목 확인/관리하기 맥OS의 스토리지 정보창을 보면 Other 항목에 많은 할당량이 채워져 있는 상황을 자주 발견할 수 있습니다. 이것은 일반적으로 특수한 확장자를 갖는 파일들(PSD, PDF 등)의 집합이거나 캐시데이터 등 시스템운영데이터를 포함합니다. 이 Other 항목을 관리하는 것이 쉬운 일은 아닌데, 일단 기본적으로 OS 설정에서 이를 관리할 수 있는 툴을 제공하지 않습니다. 관련 클리너 앱들을 사용하는 방법이 있을 수도 있지만, 클리너 앱을 새로 까는 것 자체가 주는 리소스에 대한 부담 및 검증되지 않은 서드파티 프로바이더에게 시스템 팡리 접근을 허용하는 것에 대한 부담 등이 있어 이러한 프로그램 사용을 개인적으로는 좋아하지 않는 편입니다. Other 항목 파일 직접 찾기 Finder 앱을 열고 Find 메뉴를 ..
CSS 한글 웹폰트 자간(letter-spacing) 자동으로(상대적으로) 조정하기 (내용수정, 2020-04-21) em의 수치가 %와 비슷하게 작동한다는 내용 추가  타이포그래피라는 단어가 영어라는 점에서 알 수 있듯 기본적인 이론과 기술의 근원이 영어 즉, 라틴문자를 중심으로 구성이 되어 있습니다. 하지만 한글은 기본적으로 영어와는 전혀 다른 특성을 가지고 있는 글자체계이기 때문에 적용 기술이 영어를 대상으로 하는 것과는 달라야 합니다. 그 중에 특히 차이가 심한 요소가 자간입니다. 한글 웹폰트의 자간웹폰트를 떠나서 대부분 한글 디지털타입페이스는 자간이 다소 넓습니다. 글자 요소별 kerning이 이루어져 있는 영어와 달리 기술적 제약이 있는 것인지 모르겠지만, 대부분의 디지털타입페이스가 그러합니다. 그래서 한글의 경우 자간조정이 거의 필수적으로 이루어지는 경우가 많습니다.  CS..
아이프레임(iframe) 높이 자동으로 맞추기 아이프레임은 기본적으로 로드를 호스트하는 페이지에 정적인 높이값을 지니게 됩니다. 로드되는 페이지의 높이에 맞춰 값을 조정하기 위해서는 별도의 자바스크립트 코드가 필요합니다. 다만 아래 방법들은 같은 도메인 또는 같은 서버 안에 소스들이 있을 때만 유효합니다. 다른 도메인이나 서버에 있는 소스들을 iFrame을 불러오고 이에 자바스크립트를 적용하는 과정에는 별도 리서치가 필요합니다. 방법1 : JS 코드 이 방법은 같은 서버 내에서 페이지를 로드할 때 유효한 것으로 보입니다. 자료출처 : Make iframe automatically adjust height according to the contents without using scrollbar? [duplicate] 방법2 : jQuery 플러그인 이..
Reduced/비애니메이션 이슈/디바이스 대응 CSS 작성법 CSS 애니메이션 테스팅 in 애니메이션 저하 환경 디바이스 및 OS의 설정에서 애니메이션을 감소시키는 설정이 켜져 있는 경우가 있습니다. 이 경우 웹브라우저에도 영향을 주어 CSS 애니메이션이 일부 작동하지 않게 됩니다. 특히 opacity를 0에서 1로 바꿔서 컨텐츠를 표시하는 애니메이션을 구성한 경우, 자칫 웹사이트의 컨텐츠 자체가 표현되지 않는 문제가 발생할 수 있습니다. 특히 유명한 라이브러리 중 하나인 animate.css를 활용한 애니메이션을 구성할 때 이러한 구성이 자주 발생합니다. 이같은 문제에 대응하기 위해서는 애니메이션이 저하된 디바이스에 대응하기 위해 구성된 미디어쿼리를 설정해 주어야 합니다. 이는 다음 코드에서 확인하실 수 있습니다. 비애니메이션 대응은 단순히 특정 환경이라고 치부..
❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝

티스토리툴바