Category분류 전체보기 (187)

명암 대비를 고려한 디자인 - WCGA 2.1 Contrast

명암대비를 고려한 디자인 - WCGA Contrast 우리가 사용하는 모든 디자인은 명암대비를 고려해서 디자인됩니다. 버튼의 배경색과 글자색, 컴포넌트의 배경색 등 우리가 알게 모르게 적용되어있습니다. 이런 명도 대비는 단순히 이쁘게 혹은 보기 좋게 만들기 위해서가 아닌, 노안, 약시 혹은 일시적으로 정상시력을 가지지 못한 사람들을 위해서 적용이 고려됩니다. W3C에서는 이런 인식 및 시각과 관련된 요소를 WCGA 가이드라인에 명시해 놓고 있습니다. WCGA란? WCGA는 W3C에서 정한 웹 콘텐츠 접근성 가이드라인의 표준 권고안입니다. 하지만 이 접근성이 엄청나게 광범위한 부분을 포함하고 있기 때문에 이 포스트에서는 Contrast 카테고리에 관해서 이야기합니다. 가장 최근에는 모바일 접근성도 고려된 ..

독서 모임을 유지하기 위한 방법

독서 모임 작년 중순부터 올해 초까지 독서모임을 진행했습니다. + 판데믹 관련하여 온타리오주의 모임 규정을 준수하였습니다. 이 포스트에서는 많이들 물어보는 왜 독서를 하는지와 어떻게 하는지에 대해서 적어보려고 합니다. 독서 모임을 하는 이유 독서 모임을 한다고 했을 때, 주위 사람들로부터 가장 많이 받았던 질문입니다. 현대인이라면 하루하루 시간이 부족하다는 생각이 들겠지만, 2020년은 살면서 제가 느낀 최고로 바쁜 한해였고, 문득 생각이 들었습니다. 바쁘고 시간이 없을 때 적은 시간으로 최대한의 가성비를 뽑을 수 있는 게 무엇일까? 제가 찾은 답은 독서였습니다. 허나 혼자 하기에는 제가 꾸준히 못 할 거라는 메타인지가 되어있었기 때문에(주제파악을 잘하는 편...) 자연스러운 독서 환경 설정을 하기 위해..

홈페이지 디자인을 위한 줄 바꿈 위치 제안 - ­

홈페이지 디자인을 위한 줄 바꿈 위치 제안 ­ facial covering are required라는 문장을 한정된 공간에 넣는다면 어떻게 보일까요? 클라이언트에게 작업을 수주받았다고 생각해 봅시다. 작업 요청사항을 보니 Hi There라는 타이틀과 마스크 필수라는 문장이 쓰여 있는 문구가 필요하다고 합니다. 대충 CSS를 넣고 만들어보니 아래와 같이 보입니다. 물론 width를 늘리면 되지 않냐고 할 수 있지만 클라이언트가 고집부려서 Hi there와 같은 width를 가지고 싶다고 가정합니다 :) ­ Hi There facial cover­ing are requir­ed 당연하게도 covering과 required라는 글자가 밖으로 삐져나오게 됩니다. 작업을 시작하자마자 생각지도 못한 Rabbit h..

마케팅 - 콜드 메일(Cold mail)이란?

콜드 메일(Cold mail)이란? 알지 못하는 사람에게 보내는 홍보 이메일이며, Cold mail, Cold emailing 등으로 불립니다. 홍보라 해서 세일즈에만 사용하는 건 아니고 협업 및 인맥 쌓기 혹은 취업 할 때도 사용할 수 있습니다. 모르는 사람에게 메일을 보내기 때문에 언뜻 보면 스팸메일 같지만, 콜드 메일은 스팸으로 구분되지 않고 다음 단계(답신 등)로 갈 수 있게 대상에 맞춰서 내용을 전달합니다. 대신 흥미를 유발하지 못하거나 부족한 내용이라면 스팸이나 진배없겠죠? 이런 형식의 홍보를 메일이 아닌 전화로 한다면 콜드 콜(Cold Call)이라고 합니다. 가령 스타트업을 만들었을 때, 제품을 어떻게 홍보해야 할까요? Product Hunt나 Reddit에서 글을 올려도 좋겠지만 특정 c..

Paywall을 위한 CSS linear-gradient

paywall을 위한 CSS Gradient Paywall이란 Paywall이란 유저가 찾는 약간의 컨텐츠만 제공하고, 전체 컨텐츠를 보고 싶을 때는 돈을 내서 구독하게 하는 방법입니다. 지난 수년동안 많은 서비스가 페이월을 사용 중입니다.. 예를 들어 뉴스 사이트들이나 Medium 그리고 Wired도 사용하고 있습니다. (지금은 안쓰는 곳도 많지만요) 이 포스트에서는 paywall에서 사용되는 팝업이나 백엔드 처리가 아닌, 단순히 linear-gradient CSS style을 통해 아래로 갈수록 사라지는 효과를 어떻게 작성하는지 설명합니다. Gradient로 흐려지는 효과 적용하기 단순히 CSS의 linear-gradient를 통해 사라지는 효과를 어떻게 구현하는지에 대해서 알아보겠습니다. CodeP..

2020년 회고

2020년 회고 지난 회고 모음 'Notice' 카테고리의 글 목록 캐나다 토론토에서 일하는 개발자 입니다. 프로그래밍 관련 아티클을 다룹니다. blog.sonim1.com 2019년이 지나고 2020년이 마무리되었습니다. 올해도 시간이 순식간에 지나갔네요. 특히 COVID19... 세계적인 이슈로 인해서 모든 사람이 정신없고 분노하고 걱정스러운 시간을 보냈습니다. 다들 최악의 한해를 잘 넘기셨고 이제 시작되는 2021년은 좋은 이벤트 맞이했으면 합니다. 지난 2년 동안 블로그 활동을 부지런하게 하지 못했기 때문에 메인화면에 회고가 2개가 한 번에 보이네요. ㅋㅋㅋ... 이제는 3개가 보이겠군요. 내년에는 올해 회고가 보이지 않게 꾸준히 작성해야겠습니다. 아무쪼록 지난 1년간의 행보를 간략하게 적어봅니다..

Mac OS Big Sur 메뉴바 밝기 이슈

Mac OS Big Sur 메뉴바 밝기 이슈 지난 Catalina 업데이트부터 잘 쓰고 있던 다크모드가 Big Sur를 사용하고부터 뭔가 이상해졌습니다. 전체적으로 UI가 다시 뭔가 밝아진 느낌? 저는 크롬을 사용할 때, Incognito 모드와 구분하기 위해서 크롬만 다크 모드 를 끄고 사용하기 때문에 모르고 있었는데, 메뉴바에 하얀색 아이콘이 아예 안 보이더군요.(카카오톡) 하얗게 나오는 메뉴바, 그리고 뭔가 흐리멍텅한 사파리 알고 보니 업데이트 이후, OS에서 현재 배경화면의 전체적인 색에 따라서 transparent를 조절하기 때문이었습니다. 바뀌는 건 상관없는데 contrast나 색상을 체크 안 해서 하얀색 아이콘이 아예 안 보이는 게 계속 눈에 띄어서 아래 방법으로 해결했습니다. 1. Syst..

안돈 코드 - Andon Cord

안돈 코드 Andon Cord 예상치 못한 상황이 발생했을 때 문제 해결을 위해서 인력이 동원되어야 합니다. 이 포스트에서 소개하려는 도요타의 안돈코드가 무엇인지 알아보고, 이를 IT 개발 환경에서 어떻게 활용할 수 있는지 알아봅시다. 도요타의 안돈 코드 도요타의 생산공장에는 모든 근로자와 관리자가 문제 발생 시 잡아당길 수 있는 코드가 있습니다. 작업에 문제가 발생하거나 부품에 결함이 있을 때 혹은 작업 시간이 예정 시간보다 길어질 때 바로 이 코드를 잡아당깁니다. 안돈 코드가 당겨지면 팀장은 바로 문제 해결에 착수하며, 생산 라인이 중단되고 대응책이 마련될 때까지 전체 조직이 동원되기도 합니다. 하루에 1000번의 안돈코드가 발생하면 작업이 1000번 멈추는 것이 아니고 팀장이 짧은 시간 내에 판단(..

Git에 공동 Author 추가하기

Git에 공동 Author 추가하기 현재 저는 회사에서 새로운 기능을 추가하는 프로젝트를 진행 중입니다. 하지만 프로젝트 시작하자마자 작은 고민이 생겼습니다. 미리 설계해 놓은 문서를 바탕으로 제가 프로토타입을 만들고, 같은 팀원이 제 프로토타입 코드를 실제 서비스에 반영할 수 있게 작업해 주긴 했으나 지저분한 커밋이 많고 추가로 수정하고 싶은 부분이 생겨서 어떻게 할까 고민에 빠졌습니다. 결국 커밋을 전부 reset 후 새로 작성하기로 합니다. Feature Flag를 통해서 추가되는 새로운 기능이기 때문에 기존 코드를 변경하지 않기도 하고, 첫 릴리즈 이전에 발생한 변경사항들이 Commit에 존재하는 의미가 없으며 또한 rebase하기에는 손이 더 많이 갈 것 같아서 말이죠. 이때 한가지 고민이 생겼..

콘웨이의 법칙 - Conway's law

콘웨이의 법칙 - Conway's law "시스템을 설계하는 조직은 필연적으로 해당 조직의 커뮤니케이션 구조를 복제한 설계물을 만들게 된다" Any organization that designs a system (defined broadly) will produce a design whose structure is a copy of the organization's communication structure. - Melvin E. Conway 해커들의 Slang을 모아놓은 Jargon File에서는 이를 아래와 같이 설명하고 있습니다. 소프트웨어 구조는 소프트웨어 개발팀의 구조와 같아질 것이다. 일반적으로 4개의 팀이 컴파일러 작업을 하고 있다면, 4단계의 컴파일러가 만들어질 것이다. 간단히 요약하자면...

다양한 소프트웨어 버전 명명 (Software versioning)

다양한 소프트웨어 버전 명명 (Software versioning) 세월이 흐르면서 여러 가지 방법의 소프트웨어 버전 명명이 존재했었습니다. 결국 추세는 Symantic Versioning으로 기울었고, 현재는 많은 개발자가 Semantic Versioning을 따르기를 당연 시 하며, 왜 써야 하는지도 이해하고 있습니다. 하지만 의외로 많은 서비스들이 시맨틱 버전을 따르지 않습니다. 왜일까요? 당장 제가 다니고 있는 회사만 보더라도 Semantic Versioning과 다른 방식의 버전 명명법 두 가지를 사용하고 있습니다. 이와 관련하여 예전에 고민했던 내용을 이번 기회에 정리해서 포스트를 올려 봅니다. Semantic Versioning Major, Minor 그리고 Patch의 의미를 담고 있는 버..

Athena를 이용한 AWS ELB Access Log 분석 - Part 2

우리는 지난 포스트에서 왜 Athena를 써야 하며, 무슨 혜택이 있는지 알아보았습니다. 이제 간단한 예제와 Access Log를 분석해 보도록 합시다. 이 포스트는 AWS ELB의 기본 경로 규칙을 따르고 있습니다 데이터베이스 및 테이블 생성하기 /* 데이터베이스 생성 */ create database alb_db /* 테이블 생성 참고로 현재시간(2020년 3월 2일) 이후로 AWS에 의해 스키마 정보가 업데이트될 수 있으니 테이블 생성 시 아래 링크를 참고하시면 더 좋습니다. https://docs.aws.amazon.com/athena/latest/ug/application-load-balancer-logs.html */ CREATE EXTERNAL TABLE IF NOT EXISTS alb_lo..