WIT – NTS UIT Blog

포용적 컴포넌트: 토글 스위치 컴포넌트 제작기

Posted by in Research

담당 서비스에서 신규 추가되는 UI를 제작하다가, 토글 스위치가 등장하는 부분이 있어서 이를 시험삼아 컴포넌트화 해보기로 마음 먹었습니다. 만들기 전에 우선 포용적 컴포넌트: 토글 버튼편(Inclusive Components – Toggle Button) 번역글을 읽어보니 도움이 많이 되었습니다. 마지막 부분에 핵심이 다 적혀 있습니다. 토글 버튼을 만들 때 체크해야 하는 사항들은 다음과 같습니다. 사용자들에게 체크박스와 같은 폼 요소들이 폼 데이터 제출용이 아니라 켜기/끄기 토글용임을 인지시킬 수 있다면, 폼 요소들을 사용해도 됩니다. aria-pressed와 aria-checked는 링크가 아니라 <button>과 함께 사용하세요. 레이블과 상태를 같이 바꾸지 마세요. “켜짐”, “꺼짐”과 같이 눈으로 볼 수 있는 텍스트 레이블(혹은 이와 비슷한 것)을 사용할 때는 aria-labelledby를 사용해 텍스트를 덮어쓰기를…read more

(번역) 포용적 컴포넌트: 토글 버튼

Posted by in Research, Translation

원문: https://inclusive-components.design/toggle-button/ 본 번역문은 원작자의 동의하에 번역 및 게시되었습니다. 원문 게시일: 2017년 3월 31일 번역글 1차 수정: 2018년 1월 5일 토글 버튼 토글 버튼 중 어떤 것들은 껐다가 킬 수 있지만, 어떤 것들은 킬 수가 없기도(혹은 못 끄기도)하고, 어떤 것들은 반드시 꺼야만(혹은 반드시 켜야만) 합니다. 토글 버튼의 컨셉 자체는 너무나 간단합니다. 앞 문장은 제가 일부러 온오프 스위치, 즉 토글 버튼이라고 해서 모두 똑같지는 않다는 것을 알려드리기 위해 일부러 복잡하게 만들었을 뿐입니다. 토글 버튼의 용도는 간단하지만, 이것의 사용처나 형태는 매우 다양하게 나뉘어 졌습니다. 수용적인 컴포넌트(Inclusive Component) 시리즈의 첫 공식 포스트인 이 글에서,…read more

HTML5 비디오 플레이어 마크업 작업기

Posted by in Research

서론 네이버 메인에는 광고가 군데군데 들어가 있는데, 저는 이 중에 롤링보드라는 영역의 비디오 플레이어 마크업 작업을 진행해야 하는 상황이었습니다. 기존에는 플래시로 광고 영상 플레이어가 구현이 되어 있었기 때문에, 이를 순수 HTML5로 변환하는 작업이었습니다.   그림 1: 네이버 메인 롤링보드 영역 처음 해보는 플레이어 마크업 이었기 때문에, 어떻게 시작을 해야 할지 약간 감이 잡히지 않아서 본격적인 마크업을 시작하기 전에 다른 서비스를 레퍼런스 삼아 분석해 보기로 하였고, 주요 비디오 스트리밍 서비스 사이트 3개(유투브, 비메오, 네이버TV)를 조사해 보았습니다. 이 글에서는 레퍼런스 사이트들의 UI와 마크업 구조를 먼저 살펴보고, 실제 구현했던 마크업 구조는 어떤 식으로 개발하였는지 그리고 작업을…read more