허도경, limewhale

요즘은 워낙 다양한 웹 폰트가 있고 각 회사마다 자신들의 회사에 맞는 아이덴티티를 갖는 폰트도 직접 제작해서 사용하는 회사도 생기고 있습니다. 가장 대표적인 예가 현대카드입니다. 동일한 사이트라도 폰트의 적용 여부만 다르게 해도 사이트의 느낌과 톤 앤 매너, 콘텐츠의 가독성이 변한다는 것을 쉽게 알 수 있습니다. 💡 웹 폰트란? 정확히 무엇일까요? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다. ✔ typeface와 font 구분하기 typeface: 한글로는 서체라고 하며 공통 디자인을 공유하는 글꼴 전체를 의미합니다. 이 서체에는 굵기나 스타일 등이 포함될 수 있습니다. 예를 들어 Helvetica는 서체의..

자신의 사이트나 회사의 사이트가 웹에 잘 검색이 되어야 우리가 필요한 정보를 검색했을 때 원하는 정보와 서비스를 이용할 수 있게 됩니다. SEO(Search Engine Optimization, 검색엔진 최적화)란 검색 엔진이 웹 사이트의 정보를 찾기 쉽도록 사이트를 개선하는 프로세스입니다. 우리가 웹에 정보를 검색하면 검색 사이트는 정보를 크롤링(신규 또는 업데이트된 웹페이지를 찾는 프로세스)하게 됩니다. 이때 SEO에 최적화되어 있는 사이트가 검색엔진 상위에 노출되게 되고 우리는 그 정보를 가장 먼저 얻게 되는 방식입니다. 그럼 SEO 최적화 방법에 대해 알아봅시다. 1. 고유하고 정확한 페이지 제목 만들기 요소는 사용자는 물론 검색엔진에 특정 페이지의 주제가 무엇인지 알려 줍니다. HTML 문서의 ..

프로젝트를 하다 보면 CSR과 SSR이란 단어를 한 번쯤은 들어보게 됩니다. 유저가 최종적으로 바라보게되는 브라우저 화면이 클라이언트와 서버 중 어디에 중점을 두고 랜더링을 하여 유저에게 보여주게 될 것인가가 CSR로 결정할지 SSR로 결정하게 되는 이유가 됩니다. 🍓 CSR CSR이란 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식입니다. 장점 처음의 로딩만 기다리면, 동적으로 빠르게 렌더링이 되기 때문에 사용자 입장에서 UX가 좋습니다. 처음 페이지를 로드 하였기 때문에 서버에게 요청하는 횟수가 훨씬 적어져 서버의 부담이 적습니다. 단점 처음 로딩 시 모든 스크립트 파일을 로드하기 때문에 모..

안드로이드(Android)와 IOS는 태어난 환경이 서로 다르기 때문에 같은 코드와 CSS 속성이 브라우저 엔진에서 다르게 랜더링 되어 화면에 우리가 예측한 값과 다르게 도출되는 경우가 발생합니다. 이 경우 사용자의 유저가 접속한 디바이스가 무엇인지 구분하여 안드로이드 유저에게는 안드로이드 화면이 노출되고 아이폰 유저에게는 아이폰 화면이 노출된다면 우리가 원하는 최적의 결과를 얻을 수 있습니다. 이 방법을 적용하기 위해선 사용자가 접속한 OS가 무엇인지 확인을 해야 합니다. 아래 스크립트를 적용하면 사용자가 접속한 OS에 따라 안드로이드, IOS, 그 외 세가지로 구분하여 body 태그에 해당 Class를 붙여주는 코드입니다. 감사합니다. function deviceModel(){ let currentO..

많은 사용자들이 스크립트를 작성할 때 가장 많이 사용하는 것 중 한 가지를 고르라면 jQuery가 아닐까 생각됩니다. jQuery가 많은 사랑을 받게 된 이유는 처음 입문하기가 쉽다는 것과 높은 가독성, 편리한 사용성이 아닐까 생각됩니다. 하지만 Vue와 React와 같은 라이브러리와 프레임웍이 나타나고 많은 프로젝트에서 Vue와 React를 사용하기 시작하면서부터 프로젝트 작업을 할 때 jQuery를 사용해서 작업하기가 꺼려지는 측면이 있습니다. 물론 Vue와 React에서도 NPM을 이용하여 jQuery를 사용할 순 있지만 Vue와 React 모두 가상 DOM을 활용하고 가상의 DOM을 추상화하여 사용하기 때문에 jQuery와 같은 DOM을 순차적으로 읽으며 스크립트를 동작시키는 것은 스크립트 충돌을..

어느 유머 사이트에서 개발자가 가장 분노하는 순간이라는 글을 보았습니다. 1위부터 15위까지의 순위를 적어 놓은 리스트였는데 어느 부분은 공감이 가서 웃기도 하였습니다. 아래 리스트는 "개발자"라는 화두를 중심으로 나열되어 있지만 사실 IT업종, 어쩌면 사회에서 조직이라는 그룹에서 여러 타인과 일을 하는 사람이라면 그 대상의 차이일 뿐 모두들 조금씩은 공감할 것 같은 내용이라 글을 쓰게 되었습니다. 사실 조금씩만 입장을 바꾸어서 생각해보면 지금보다는 좀 더 유연하고 기분 좋게 일을 할 수 있지 않을까 싶네요. 올해가 정말 얼마 남지 않았는데 남은 올해에 안 좋았던 기억은 모두 내려놓고 내년에는 모두들 즐겁게 일을 하고 이 글을 읽는 모든 분들에게 좋은 일만 생겼으면 좋겠습니다. 감사합니다. 개발자가 가장..

우리가 스크립트를 작성하다 보면 아주 어려운 코드를 제외하곤 대부분은 특정한 이벤트가 발생했을 때 그 값이 참(True), 거짓(False)인지 구분하여 그 값에 맞게 화면을 처리하는 스크립트가 대부분이라고 생각합니다. 그런데 이와 같은 분기 조건절 스크립트를 이벤트마다 적어서 작성하면 그 코드는 중복 코드와 함께 비 효율적으로 코드가 동작하게 됩니다. 물론 각 이벤트마다 중복 코드를 작성하는 게 틀렸다는 건 절대 아닙니다. 일단 무리 없이 코드가 동작하면 그 코드는 이상이 없다는 코드라는 말과 같습니다. 다만 우리가 최적화의 방법을 모를 때는 어쩔 수 없지만 코드의 가독성과 유지 보수를 위해서 중복된 코드를 제거하는 건 좋은 코드를 만드는 첫 번째 방법이라고 생각합니다. 저와 같이 이번에 중복 코드 제..

안드로이드(Android)와 아이폰의 운영체제(IOS)의 차이점은 여러 가지가 있지만 그 중 대표적으로 UI 측면에서 구분되는 차이점이 화면 스크롤(Scrolling)입니다. 💡모멘텀 스크롤이란? 안드로이드는 모바일에서 화면을 스크롤(Android)링 하게 되는 상황을 예로 들어볼게요. 손가락으로 화면을 터치를 한 후 위나 아래로 손가락의 제스처를 주게 되면 사용자가 움직인 화면의 방향으로 일정 영역만큼 스크롤에 가속도가 생기면서 이동되었다가 서서히 가속도가 줄어들면서 스크롤링이 멈추는 스크롤링을 볼 수 있는데 이것을 모멘텀 스크롤이라합니다. 우리말로 바꾸면 관성 스크롤 또는 가속도 스크롤이라고 말할 수도 있을 거 같습니다. 💡 근데 모멘텀 스크롤을 왜 아이폰(IOS)에 적용해야 하나요? 안드로이드에는 ..

일반적으로 스크립트를 작성하다 보면 공통적으로 상용되는 스크립트는 별도의 공통 함수로 빼서 작업을 하는 게 일반적입니다. 그래야 관리 이슈도 적고 해당 함수를 호출하게 될 때에도 쉽게 파악하여 스크립트를 사용할 수 있습니다. 이 방식은 정의되어 있는 스크립트를 화면에서 호출할 때에는 아무런 문제가 발생하지 않습니다. 그렇다면 공통 함수를 별도의 다른 스크립트에서 사용해야만 하는 상황이 발생하게 된다면 어떻게 될까요? 위의 상황을 조금 더 쉽게 예시를 들어서 이야기 해 보겠습니다. 우리는 공통 스크립트 "common.js"라는 파일을 만들었습니다. 그리고 특수한 페이지에서만 사용하는 "others.js" 스크립트도 만들어서 사용하고 있습니다. 그런데 작업을 진행하다 보니 별도의 함수에서만 사용하는 스크립트..

요즘 웹 사이트들이 사용자의 편의성을 위해서 웹 화면의 모드 변경(*다크 모드) 기능을 제공하고 있습니다. 또는 하나의 프로토타입 구조에 마크업이나 별도의 구조 변경 없이 컬러 값, 배경색의 변경을 통해서 다양한 테마형태로 전혀 다른 분위기의 화면을 연출하고 싶은 경우도 생기게 됩니다. 이를 CSS로 제어하기 위해서 모든 태그에 적용되는 CSS에 해당 테마에 맞는 컬러 값을 정의하는 것은 매우 힘든 작업이 됩니다. 이를 조금은 효율적으로 활용하기 위한 방법을 공유합니다. 그것은 :root 속성을 활용하는 방법입니다. CSS의 :root는 문서 트리의 루트 요소를 선택합니다. HTML의 루트 요소는 요소 선택자를 나타냅니다. :root { background: yellow; } CSS의 :root 선택자에..