당근에서 진행한 세션을 참고해 디자인 시스템을 구축하는 과정을 적었습니다. 졸업프로젝트 기획을 시작했다. PC 웹 + 모바일 웹 + iOS 앱 디자인이 필요하다. 그런데 어떻게 각각의 플랫폼에서 UI 컴포넌트를 일관성 있게 구성할 수 있을까? 또 어떻게 우리 서비스의 PC버전에 익숙한 사람들이 모바일을 접했을 때, 혹은 반대의 경우에 어색하지 않도록 일관된 UX를 설계할 수 있을까? 지금까지는 네이밍 통일을 통해 피그마의 디자인 시스템을 그대로 코드로 옮기는 식으로 구성을 했었으나, 디자인을 바꾸게 된다면 어떻게 될까? 웹개발자(나)와 iOS 개발자 모두 자신의 코드를 수정해야 한다. 우리끼리 같은 디자인을 공유한다고 믿을 수 있을까...? 디자인 시스템의 필요성이 느껴지는 순간이었다. 어차피 디자인부터..
Effective Typescript 5장, 6장을 읽고 선정한 인터뷰 질문과 스터디 내용입니다. 내용요약 5장 요약 링크 6장 요약 링크 인터뷰질문 Q. any 타입 대신 어떤 방법을 써볼 수 있을까? A. any타입의 범위 좁히기 함수의 매개변수 - 매개변수 그 자체에 any타입 단언 객체 - 객체 전체가 아닌 문제가 되는 부분만 any타입 단언 @ts-ignore사용하기 any 보다는 any[], {[key: string]: any}, ()=>any등의 표현 사용하기 모르는 값에는 any보다 unknown사용하기 npm type-coverage 패키지를 이용하여 any추적하기 Q. object vs Object vs {} vs {[key: string]: any} A. {} null과 undefin..
브라우저 렌더링 과정 사용자가 브라우저를 통해 웹사이트 접속 브라우저가 리소스 다운받음 (HTML, CSS, JS 등) 렌더링 엔진이 HTML을 파싱해 DOM 트리를 만듦 렌더링 엔진이 CSS를 파싱해 CSSOM 트리를 만듦 DOM 트리 + CSSOM 트리 = Render 트리 구축 Layout: 각 요소의 배치 결정 Paint: 구축된 Render 트리를 화면에 어떻게 그릴 지 결정하는 페인트 레코드 생성 Layerize: Paint 결과물을 특정한 레이어들로 쪼갬 Commit: Layerize 결과물을 Composite Thread로 옮김 Composite: Render 트리에 존재하는 레이어들을 합치는 과정 Display: 렌더링 ~~ Layer 여기서 말하는 레이어란, 포토샵의 레이어처럼 페인팅 ..
위와 같이 참고자료 https://searchadvisor.naver.com/ 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com
이미지 스프라이트란? 웹사이트들을 개발자도구로 뜯어보면 네트워크 탭에서 가끔 저런 이미지의 모음들을 볼 수 있다. 이게 이미지 스프라이트이다! 이미지 스프라이트란, 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법이다. 이미지 스프라이트, 장점과 단점 장점 단점 서버 요청 횟수를 줄여 로딩 속도를 줄여준다 하나의 스프라이트 이미지 파일만 관리하면 된다 img 태그가 아니라 css의 background-image로 처리되기 때문에 alt 속성을 사용할 수 없다 일부 이미지의 수정이 필요한 경우 파일을 다시 수정해야 한다 언제 사용할까? 의미상 크게 중요하지 않고 디자인적인 이미지의 경우 수정이 자주 되지 않는 이미지의 경우 어떻게 ..
vendor prefix란? CSS를 작성하면서 위와 같은 코드를 본 적이 있을 것이다. -webkit/-moz 등이 바로 벤더 프리픽스이다. 벤더 프리픽스(vendor prefix)란, 주요 웹 브라우저 공급자(vendor)가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹브라우저에 해당 기능을 알리기 위해 사용하는 접두사(prefix)를 의미한다. 주요 브라우저와 vendor prefix 브라우저 prefix Chrome, Safari 등 크로미움 기반 브라우저 -webkit 파이어폭스 -moz 엣지 (크로미움 이전) -ms 오페라 -o 지금까지는 남발했던 vendor prefix 나는 지금까지 이렇게 벤더 프리픽스를 활용했다. caniuse 를 활용해서 확인 (특이한 속성 이용할 경우) 크로스 브..
토스에서 진행한 세션을 참고해, 직접 스크린리더 UX 개선을 도입한 과정을 적었습니다. Accessible Name 스크린리더가 요소를 포커스했을 때 읽는 값 author - 특별한 속성을 사용해서 정하는 값 aria-label aria-labelledby alt ( 태그의 경우) contents - 요소의 텍스트 값 우선순위 - author > contents html 태그의 속성들 role 시멘틱태그는 암시적으로 role 을 갖고 있음 - role=“button” - role=“link” - role=“checkbox” Children Presentational 특정 role이 가진 특징 자식 요소의 Accessible Name 을 모아서 contents 로 사용 자식 요소를 스크린리더가 읽지 않도록..
웹 표준과 웹 접근성 웹 표준 - 어떤 환경(운영체제, 브라우저)에서도 이용할 수 있는 웹페이지를 만드는 방법 W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙 웹 접근성 - 어떤 사람이든 이용할 수 있는 웹페이지를 만드는 방법 웹 표준의 장점 호환성, 접근성 향상, SEO향상, 유지보수 용이 웹 표준을 준수하는 방법 1. DOCTYPE 선언 웹 페이지의 최상단에 DOCTYPE을 선언하여 웹 페이지가 어떤 버전의 HTML을 사용하는지 명시한다. DOCTYPE을 제대로 선언하지 않는다면? 각 DOCTYPE 별로 유효한 html 태그 상이 브라우저가 비표준 방식으로 해석하게 된다 2. 시멘틱 태그 사용 HTML5에서 새로 추가된 태그 "의미 있는" 태그를 활용하여 웹 페이지의 구조를 더욱 명확하게..
