허도경, limewhale

웹 접근성에서 키보드의 포커스 이동은 굉장히 중요한 요소입니다. 그리고 웹 접근성이 아니더라도 마크업이 순차적으로 잘 적용되어 있으면 콘텐츠의 논리적인 흐름에 따라서 focus가 당연히 올바르게 이동하겠지만 프로젝트상의 우리가 제어할 수 없는 환경적 이슈라던지 상황에 따른 여러 이유로 인해 포커스의 흐름이 우리가 원치 않는 방향으로 이동하는 경우가 발생합니다. 그럴 때는 어쩔 수 없이 강제적으로 포커스의 이동을 처리해 줘야 하는데 조금 더 이해하기 쉽게 예를 들어 볼게요. 특정 버튼을 클릭할 때 해당 Event로 레이어 팝업이 화면에 보이게 된다고 가정해 봅시다. 여기서 레이어 팝업에 조건을 둘게요. 이 레이어 팝업이 처음부터 화면에 마크업으로 되어 있지 않고 버튼을 클릭하면 그때 스크립트에서 동적으로 ..

이전에 작성한 프로젝트 시 자주 사용하는 단어 10가지 1탄 에 이어서 2번째 정리 시간을 가져 볼게요. 1. UX(유엑스), UI(유아이) UX(User eXperience)는 영어의 뜻대로 사용자의 경험이라는 뜻을 가지고 있습니다. 어떠한 서비스나 제품을 사용하면서 얻게 되는 직, 간접적인 경험들을 바탕을 서비스에 접목시키면 보다 나은 방향으로 UX를 발전시킬 수 있습니다. 예를 들어 전철을 이용할 때 전철에 4-4와 같은 위치 알림 표시를 통해 자신이 몇 번째 칸에 타고 있는지를 직관적으로 알려주는 마크가 좋은 UX의 예라고 할 수 있습니다. UI(User Interface)는 사용자가 해당 기능을 사용하는 방법을 나타내는 말로 버튼을 설계한다고 가정했을 때 아무 구도에 배치하는 것이 아니라 UX를..

지금이야 경력도 있고 업무 경험도 있어서 괜찮지만 저도 IT 직군에 처음 신입으로 입사해서 일을 시작했을 때 생소한 용어들로 인해서 많이 힘들었던 경험이 있습니다. 프로젝트를 처음 경험하는 신입들은 업무 흐름 파악도 어렵고 분위기도 적응이 잘 안되는데 자신이 알아듣지 못하는 용어를 접하게 되면 흔히 말하는 멘붕이 옵니다. (타인의 알아듣지 못하는 말들이 아웃사이더 속사포 랩처럼 들립니다.) 더욱이 용어를 문서로 접하면 그나마 이해하기가 괜찮지만 대부분 회의에서 구두로 전해 듣기 때문에 처음에는 의미를 알고 있지 않다면 더욱 이해하기 힘들 수 있습니다. 처음 IT에 발걸음을 내딛는 분들에게 조금이나마 도움이 되었으면 좋겠습니다. 최대한 이해가 용이하도록 기본 단어는 영어이지만 한글 표기음도 같이 적어두었습..

Input 요소나 Textarea에 가이드 텍스트를 제공할 때 아주 손쉽게 사용할 수 있는 게 html5 속성 중 placeholder속성입니다. 아주 예전에는 크로스 브라우징을 위해 스크립트를 이용하여 구현을 많이 했지만 요즘은 placeholder속성을 기본적으로 사용하는것 같습니다. 다만 이렇게 편리한 placeholder기능을 우리가 CSS로 수정하고 싶을 때 CSS에서 요소를 바로 수정해 보면 수정이 되지 않는 걸 알 수 있습니다. placeholder 속성의 컬러값을 바꾸고 싶으면 웹킷 전용 속성을 CSS에 사용해 주어야 하며 placeholder 속성은 IE 9 이상부터 정상적으로 지원합니다. /* 웹킷 전용 속성 */ input::-moz-input-placeholder {} input::..

우리는 마크업을 하면서 가장 먼저 CSS의 박스 모델(Box Model) 개념을 배우게 됩니다. 이 개념을 바탕으로 다양한 GUI를 구현하게 되는데요. 기본적으로 박스 모델에서 요소에 할당 한 width 및 height 값은 사용자가 지정한 요소의 콘텐츠 상자에만 적용됩니다. 요소에 테두리(border) 또는 패딩(padding)이 있는 경우에는 width 및 height에 해당 값이 추가되어 자신이 지정한 값보다 더 큰 값이 화면에 렌더링 되는 결과를 얻게 됩니다. 하지만 우리는 box-sizing속성을 활용하면 테두리(border) 또는 패딩(padding) 요소가 추가되더라도 처음에 사용자가 의도한 값을 얻을 수 있습니다. (와우!) 그럼 지금부터 조금 더 심도 있게 box-sizing에 대해 알아..

모바일은 이제 단순히 전화만 받는 의미를 가지는 사람은 더 이상 없을 거라 생각합니다. 이전에는 PC화면이 주이고 모바일 화면이 보조의 느낌이었다면 지금은 그 위세가 역전되어 모바일 화면이 더 사용자 유입이 많고 그렇기 때문에 UI 기획을 할 때도 더 신경을 많이 쓰고 디자이너도 조금 더 나은 환경을 위해 GUI를 구현하고 있다는 게 느껴집니다. 모바일은 모든 동작을 손으로 스크롤 하면서 사용하게 됩니다. 그렇기 때문에 PC처럼 클릭을 통한 페이지 이동은 화면의 성격이 달라지는 경우가 아니라면 잘 사용하지 않습니다. 그렇지만 한 번에 너무 많은 데이터를 불러와서 노출하면 사용자는 페이지에 속도 저하 문제가 발생하기 때문에 대부분의 회사들은 이런 문제를 해결하기 위해서 속도에 크게 영향이 없는 일정 양만큼..

스크립트를 구현하다 보면 전체값에 대한 퍼센트 값이 필요할 때가 있습니다. 일반적으로 UI개발을 하시는 분이라면 그래프와 관련된 작업을 진행할 때 퍼센트 계산값이 필요할거라 생각합니다. 그리고 개발을 반드시 하지 않더라도 퍼센트 공식을 알아두면 우리 일상생활속에서도 유용하게 사용될 수 있습니다. 내가 사용한 카드금액 중 음식, 레저등이 각 몇 %인지도 계산으로 가능하고 쇼핑을 가서 할인율이 되는 금액이 얼마인지도 쉽게 계산되죠. 수치값 계산을 어려워 하시는 분들이 있어서 그 부분에 대한 개념을 정리하고자 합니다. 이번에 한번 이해해 두시면 잊어버리지 않으실거에요. 1.퍼센트(%) 계산 이해하기 쉽게 예로 설명을 들을께요. 우리에게 100개가 물건이 있다고 가정합시다. 그 중 내가 10개의 물건을 팔았다면..

이제는 많은 분들이 아시지만 다시 예전의 내용을 정리하게 되면서 내용을 정리해 봅니다. 요즘은 동영상이나 youtube 영상을 웹에 바로 보여주는 경우가 많습니다. 이럴 때 가로 사이즈가 고정된 사이즈면 상관없지만 다양한 사이즈의 모바일이나 반응형 웹 화면으로 화면을 구성한다면 가로 화면 폭 사이즈에 맞게 해당 세로 값 화면 값을 유동적으로 변경될 수 있도록 해 주어야 화면이 틀어지거나 비율이 이상하게 나오지 않고 정상적인 화면이 유지됩니다. 요즘 영상은 16:9 화면 비율이 일반적이기 때문에 해당 화면을 비례식으로 놓고 계산하면 대략 56.26% 라는 값이 나오게 됩니다. 비율 값은 어떤 값으로 적용하냐에 따라서 조금은 차이가 있을 수 있습니다. 참고 : 비례식 공식 기본값(100) : 사용할 영상(박..

정말 프로그래밍에서 자주 사용하는 배열에 대해 알아볼게요. 배열은 우리가 스크립트로 다중 값을 핸들링해야 할 때 반드시 필요한 요소입니다. 아마 배열에 대해 잘 아시는 분도 있고 전혀 모르시는 분도 있을 거라 생각합니다. 배열은 객체(Object)와 마찬가지로 여러 가지 값을 저장할 수 있는 데이터 주머니라고 이해하시면 될 거 같아요. 다만 객체와 다른 점은 배열에 저장된 값에 접근할 때 객체처럼 Key : Velue 형태가 아닌 값이 저장된 인덱스(순서)로 접근을 한다는 것이 차이점일 거 같습니다. 그럼 좀 더 자세히 객체에 대해 알아볼게요. 배열은 하나의 변수에 여러 개의 값을 가져와서 사용해야 할 경우 사용합니다. 배열 Array 함수를 이용하여 사용하게 되며 배열의 첫 번째 값은 0부터 시작됩니다..

객체를 활용하면 우리가 스크립트로 무언가를 구현할 때 굉장히 편리하다는 것을 알 수 있습니다. 이 객체는 사실 우리가 Json이라고 말하는 같다고 생각하시면 됩니다. 중괄호로 값을 포함하고 Key : Velue 형태로 값을 호출하는 방법인데 어디선가 Key : Velue 형태로 값을 호출하는 방법이라는 단어가 이상하게 친숙하지 않나요? (저만 그런 거면 죄송합니다.) 이전에 소개해 드렸던 html5의 data- 속성에 관한 글에서도 Key : Velue에 대한 이야기가 잠깐 나왔습니다. 궁금하신 분들은 위에 링크에 있는 글을 참고해 주세요. 그럼 이제 객체에 대해서 한번 알아볼께요. 모두 설레는 마음으로 같이 알아봐요. 1. 객체는 키와 그에 매칭하는 속성 값으로 선언합니다. 앞에서 말했듯이 객체는 Ke..