archuive

웹에 아이콘을 넣는 방식은 다양하다. 이미지(png, gif등)로 불러오기, SVG를 불러오기 그리고 웹폰트로 만들어 추가할 수도 있다. Fontello는 미리 제공하는 아이콘 중 원하는 아이콘을 선택해 경량화된 웹폰트로 만들수 있으며 특히 SVG 파일을 업로드해 원하는 아이콘을 추가할 수 있다. 아이콘을 폰트로 넣게되면 CSS의 color 속성을 사용해 코드의 컬러를 변경할 수 있으므로 이미지 리소스보다 유지보수에 효율적이다. 사용법 Fontello 사이트에서 원하는 아이콘을 선택하거나 Drag&Drop으로 폰트를 등록하고 Download webfont 버튼으로 다운받는다 HTML 문서에 다운받은 fontello.css파일을 불러온다 Demo 페이지에 있는 아이콘의 이름을 참고하여 형태로 클래스 명을 ..

기원 도요타 자동차의 독특한 색산 방식 원칙과 실천법을 정리하는데서 시작되었다. 우리나라 제조/생산 업계에서는 이미 도요타 생산 방식(TPS)를 오래 전부터 벤치마킹 해왔다. 린 (Lean)에서 중요한 개념은 JIT(Just In Time)이다. JIT는 필요한 시점에 필요한 만큼만 생산하는 것을 의미하며 이를 통해 재고를 최소화하고 비용도 최소로 줄여나간다. 또 하나의 중요한 용어가 칸반(Kanban)이다. 칸반은 일종의 작업 지시서로서 Pull 방식의 생산시스템을 구축하는데 중요한 역할을 한다 린 소프트웨어 개발의 시작 생산 방식으로서 린을 SW 개발에 적용하려는 시도는 여러번 있었다. 이를 체계적으로 정리한 것은 포펜딕(톰 포펜딕, 메리 포펜딕)부부이다. 린의 중요한 목표인 재구 절감을 SW개발에 ..

XP는 eXtreme Programing의 약자로 애자일 소프트웨어 개발 방식의 하나이다. 보통 개발조직 기반의 중소규모 팀에 적합한 경량화된 개발방식임. 다른 애자일 개발 방식과 마찬가지로 '방법론'이라 불리는데 이견이 있을 수 있다. 특히나 XP는 테스트 주도 개발 (Test Driven Development), 일일 빌드 (Daily Build), 지속적인 통합 (Continous Integration) 등 개발 테크닉과 연관된 부분이 많기 때문에 종종 '방법론'으로 규정 짓는 것에 대해 논란이 되곤 한다. 팀의 개발 문화가 제대로 정립되어 있지 않거나, 계획 및 관리 중심으로 프로젝트를 유지하던 팀의 경우 XP 도입 초기에 난관이 존재하기도 한다. 최근에는 XP만 사용하기보다 스크럼등 보완적 애자..

스크럼은 프로젝트 관리를 위한 애자일 방법론으로 추정 및 조정 기반의 경험적 관리 기법의 대표적인 형태이다. 기원 1986년 타케우치 & 노나카 교수가 HBR에 기고한 "The New New Product Development Game"을 기원으로 본다. 1995년 켄 슈와버와 제프 서덜랜드가 이 방법을 소프트웨어 개발에 소개하며 스크럼이라 부름 역할 제품 책임자 (Product Owner) 제품 기능 목록에 해당하는 백로그 (product backlog)를 만들고, 우선순위를 조정하거나 새로운 항목을 추가하는 일을 관리한다. 스프린트에 대해 계획을 수립할 때까지 중요한 역할을 하지만, 스프린트가 시작되면 최대한 팀 운영에 관여하지 않는걸 권장한다. 스크럼 마스터 (Scrum Master) 스크럼 원칙과..

CSS를 작업하다보면 하나의 클래스에 여러개 속성을 선언하는 경우가 자주 발생한다. 속성 작성에 규칙이 있다면 추후 코드를 들여다볼 때 조금 더 내용 파악이 쉽지 않을까? 하는 마음에 구글링을 해보니, 역시나 CSS 선언 순서와 관련된 내용이 방대하고도 자세하게 정리되어 있었다. NHN 코딩 컨벤션 속성을 선언할 때는 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다. 관련 속성은 대표되는 속성 다음으로 선언하며, 아래에 표기된 순서대로 선언한다. 레이아웃 display visibility overflow float clear position top right bottom left zindex Box width height margin padding border 배경..

colorbox.io 를 활용해 디자인 시스템의 컬러 팔레트를 구성해보자. lyft의 디자이너였던 Kevyn Arnott가 새로운 ColorBox를 만들었다. 간단하게 특징을 요약해보자. 멀티 컬러 생성 한 워크스페이스에서 여러 개의 색상 팔레트를 추가할 수 있다 접근성 표시 내장 색상을 알고리즘 접근 방식으로 풀어나간 이유는 모든 사람이 접근성에 최적화된 색상 시스템을 제작할 수 있도록 돕고싶었기 때문이라고 한다. ColorBox에서 접근성과 관련하여 디테일하게 라벨까지 선택이 가능하다. 오른쪽 패널에서 색상 대비 레벨도 껐다 켤 수 있다. Constast Colors에는 작성한 컬러 팔레트가 텍스트로 들어갈 배경 색상을 정의해준다고 생각하면 좋다. 다크 모드 컬러를 선택한 뒤, 옵션 탭에서 다크모드를..

포토샵과 같은 일부 현대 디자인 애플리케이션은 여전히 'leading'라는 용어를 사용하는 반면 HTML과 CSS에서는 이 속성을 'line-height'라고 부른다. leading, line spacing, line height는 모두 같은 것을 말합니다. line height 또는 line spacing은 일반적으로 글꼴 크기의 백분율로 측정됩니다. 일반적인 통념으로는 130-150%의 행간격이 가독성에 이상적이지만 200%까지 허용됩니다. 완벽한 line height는 글꼴 자체의 디자인과 크기에 따라 달라집니다. 모든 텍스트에 적용되는 매직 넘버는 없습니다. 글꼴 크기의 1.5배 선 높이로 시작하는 것이 좋은 시작이며, 그에 따라 조정할 수 있습니다. 1.5 라인 높이를 사용할 때는 8 포인트 그..

Lazy loading이란? 페이지 내에 바로 필요하지 않은 이미지들의 로딩 시점을 뒤로 미룬다. 성능 향상 페이지 초기 로딩 시 필요한 이미지의 수를 줄일 수 있다. 리소스 요청을 줄이는것은 다운로드 bytes를 줄이는 것이다. 비용 감소 이미지가 보여지지 않으면 절대 로딩하지 않으므로, 페이지 내에서 전달할 총 바이트 용량을 줄일 수 있다. 기술 태그를 이용한 일반적인 방법 이미지 로딩을 사전에 막는다. 태그를 사용하는 경우, 이미지를 가져올 때 src 속성을 사용하는데, HTML은 무조건 모든 이미지의 src를 로드한다. 이를 막기 위해 src 가 아닌 data-src 에 이미지 URL을 지정한다. 그리고 이미지가 뷰포트에 들어오자마자 로딩할 수 있도록 브라우저에게 알려준다. 자바 스크립트 이벤트로..

개발자 도구 (F12) 에서 More tools → Rendering 메뉴 스크롤을 아래로 내리다보면 색맹을 시뮬레이션 해볼 수 있는 기능이 있음 Blurred vision: 흐린 시야 Protanopia: 적녹색약 blue와 green, red와 green 구분이 어려움), 적색과 녹색을 혼동하거나 적색과 녹색 또는 청록색을 혼동하는 색맹의 한 형태입니다. Deuteranopia: 제2색각이상(녹색약) 색조 감별에 영향을 미치는 것은 프로토노피아와 비슷하지만, 흐릿한 효과는 없다. 남성 인구의 약 1%에서 발견된다. Tritanopia: 제 3색각이상(청색맹) 청색 망막 수용체가 전혀 없는 채 적색과 녹색 원추 색소만 존재하는 매우 드문 색각 장애다. 파란색은 초록색, 노란색과 오렌지는 분홍색, 그리고..

피그마는 (오토 세이브 되는..) 버전 히스토리 기능도 매우 훌륭하다고 생각했는데, 어느새 워크 플로우를 관리하기 위한 브랜치 기능까지 추가되었다. 피그마에 작성된 브랜치 문서를 살펴보았다. 최근 브로들리 사용중이다. 이전 툴과는 다르다. 첫번째 원칙으로 단순성과 일관성에 초점을 맞췄다. 브랜치를 사용하기 적절한 예제 이미 존재하는 소스를 기반으로 작업을 시작할 때 고려하면 좋다. 특히 실험적이고, 반복적인 경우 디자인 라이브러리 유지보수 메인 파일은 항상 하나로 유지됨 공통 스타일 추가하거나 수정할때 기존에 존재하던 컴포넌트나 배리언츠 수정할때 라이브러리에 새로운 콤포넌트 만들때 컴포넌트 수정 제안이 편리해짐 의사 결정권자 혹은 콜라보레이터에게 공유할 때 개발 파트에 시안을 전달하기 위해 작업을 멈춰야..