담백한 웹 개발 이야기

스프린트(Sprint) 스프린트란 프로젝트를 작은 단위로 나누고, 각 단위마다 제품을 개발하고 배포하는 방식입니다. 스프린트는 보통 2주에서 4주 정도의 기간으로 정해지며, 프로젝트의 변화에 유연하게 대처할 수 있습니다. 스프린트 플래닝(Sprint Planning) 스프린트 플래닝은 스프린트가 시작하기 전에 하는 회의입니다. 이 회의에서는 팀과 고객이 함께 다음 스프린트의 목표와 방법을 정합니다. 스프린트 플래닝은 프로젝트의 우선순위와 기대치를 맞추고, 팀워크를 강화하는 데 도움이 됩니다. 플래닝 포커(Planning Poker) 플래닝 포커는 스프린트 플래닝에서 일정을 산정하는 방법입니다. 이 방법은 팀원들이 카드를 이용하여 일정 활동의 기간을 비밀리에 표시하고, 공개한 후, 의견을 나누고 합의하는 ..

1 KISS(Keep It Simple, Stupid / Keep It Short and Simple) 코드를 작성할 때 최우선 가치를 단순성과 간결성에 둬야 한다는 격언입니다. 복잡한 코드는 읽기 어렵고 수정하기 어렵습니다. 코딩 중에도 코드가 동작할 수 있는 가장 간단한 방법은 무엇인지 항상 질문을 던져야 합니다. 복잡함으로 향하는 상황 1 새롭게 배운 기술을 사용하고 싶을 때 2 장래의 필요에 대비하고 싶을 때 3 멋대로 요구사항을 추가할 때 2 YAGNI(You Aren't Going to Need it) 확장성을 고려해서 넣은 설계라도 예상은 대부분 빗나갑니다. 빗나간다는 것은 거기에 들인 시간이 낭비되었고 버려진다는 의미입니다. 범용성보다는 단순성을 생각해야 합니다. 범용성이 가져다주는 재사용..

미국의 화가이자 색채 교육자인 알버트 헨리 먼셀(Albert Henry Munsell)이 색체계를 확립함 색상(Hue), 명도(Value), 채도(Chroma)에 따라 색상을 배치 1927년 'The Munsell Book of color'을 발간하여 색체계를 확립 1940년 미국 광학회(OAS)에 의해 'Munsell renotation'으로 수정 색상(Hue): 색 종류 빨강, 노랑, 초록, 파랑, 보라의 다섯 가지 색을 기분으로함 이들 사이에 색을 섞어 10가지 색을 만듦 이를 다시 10등분하여 100가지 색상으로 만듦 명도(Value): 밝기 0~10 숫자로 11단계로 조정 0과 10은 검은색과 흰색임으로 실질적으로 9단계 조절 명도축은 그레이 스케일이라고 부름 채도(Chroma): 맑고 탁한 정..

기술 문서를 통해 다른 사람들과 지식이나 기술을 공유하려면 명확하고 도움이 되는 방식으로 작성해야 합니다. 기술 문서 작성할 때 도움이 될 만한 몇 가지를 정리해 봤습니다. 1. 목차 작성하기 글쓰기를 시작하기 전에 무엇을 전달하고 싶은지, 어떻게 전달하고 싶은지에 대한 명확한 준비가 있어야 합니다. 목차는 생각을 정리하고 내용을 계획하는 데 도움이 될 수 있습니다. 목차는 구체적이고 난이도가 낮은 것부터 높은 것 순으로 정렬하면 좋습니다. 2. 상세 목차 작성하기 기본 목차가 있으면 더 자세한 내용으로 살을 붙여야 합니다. 상세 목차는 글을 더 빠르고 효과적으로 작성하는 데 도움이 될 수 있습니다. 목차에서 각 섹션에서 다룰 내용을 간략하게 요약해서 상세 목차로 만드는 것이 좋습니다. 3. 내용 작성하..

회사에서 개발자와 같이 일을 할 때 대화가 어려웠던 경험이 있으셨나요? 개발자가 된지 얼마 안 됐을 때 그런 경험이 있었는데요. 그런 경험이 있으셨다면 서로 전문성이 다르기 때문에 그런 일이 생겼을 거라 생각합니다. 이 포스트에서는 대화가 잘 안되는 이유와 대처 방법에 대해서 정리해 봤습니다. 용어에 대해 이해하기 어려울 때 개발자와 비개발자는 기술 용어와 개념에 대한 이해 수준이 다르기 때문에 소통에서 오류가 발생할 수 있습니다. 이를 대처하기 위해서 서로가 이야기한 용어와 개념을 알도록 노력하고, 이해하지 못할 때는 질문하고 설명을 듣는 것이 좋은 방법입니다. 무언가 모호할 때 기능이나 서비스에 대한 설명이나 요청이 모호할 경우, 상대방은 작업의 일부를 추측해야 하며, 이로 인해 예상과 다른 결과를 ..

프런트엔드 개발자로서 UI에 대한 기본적인 용어를 알고 있어야 합니다. UI는 사용자와 상호작용하는 인터페이스를 의미하며, 다양한 요소들로 구성됩니다. 이번 글에서는 UI 요소의 상태, GNB와 LNB, 메인 배너 또는 히어로 배너, 드롭 다운 리스트, 모달과 팝업, 스낵바와 토글, 툴팁과 인풋 필드, 체크박스와 아코디언, 브레드 크럼에 대해 간단히 설명하겠습니다. UI 요소의 상태 UI 요소의 상태는 UI 요소들이 사용자의 입력에 따라 변화하는 것을 말합니다. 예를 들어, 버튼은 일반 상태에서는 회색이지만, 클릭하면 파란색으로 바뀌고, 비활성화되면 흐릿하게 보이는 등의 변화가 있습니다. UI 요소의 상태는 일반, 활성, 비활성, 포커스, 선택 등 다섯 가지의 상태 값을 가질 수 있습니다. GNB와 LN..

User-Agent의 문제점 User-Agent는 브라우저를 구분할 때 사용하곤 합니다. 하지만 아래와 같이 Chromium 기반 브라우저에서 window.navigator.userAgent로 User-Agent를 조회하면 동일한 문자열을 볼 수 있습니다. // Chrome Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36 // Opera Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 OPR/38.0.2220.41 // Edg..

들어가며: 개발자가 이야기하는 비용이란? 간혹 협업할 때 "이것은 비용이 많이 드는 작업이다", "이렇게 하면 비용을 절약할 수 있다" 등 비용에 대한 이야기를 할 때가 있다. 여기서 비용은 개발자의 시간 사용을 의미하는데, 애플리케이션 개발에서 많이 발생되는 비용 중 하나가 개발자 인건비라 이런 식으로 비용 이야기를 하곤 한다. 개발자의 인건비는 경우에 따라 하루에 20만원 정도로 산정되고 하루에 8시간 근무로 봤을 때 1시간당 2만 5천원이다. 30분 정도 비효율적인 업무로 인해 낭비하면 1만 2천 5백원 정도 손해 보는 것이다. 월급을 받는 입장이지만 시간을 돈으로 환산하니 함부로 사용하는 게 아까워서 최대한 효율적으로 업무를 하려고 노력했었다. Note: 사실상 기업에서 개발자에게 사용되는 비용은..

서론 이 글은 TypeScript와 Swagger를 사용하는 프로젝트 사례를 소개합니다. REST API를 사용하기 전에 Swagger 문서를 보고 DTO 파일을 정의하곤 합니다. 수동으로 DTO 파일을 작성 가능하지만 오픈 소스를 활용해서 자동화하면 별도로 코딩 룰을 정의할 필요 없고, DTO가 변경되었을 때 쉽게 변경할 수 있습니다. 이 글을 통해서 Swagger 문서에 정의된 DTO를 자동으로 생성하는 방법과 큰 규모 프로젝트에서 개발 생산성을 위해 라우팅 파일을 번들링 하는 방법을 소개합니다. Swagger 문서에 정의된 DTO 자동 생성 Swagger 문서의 DTO는 swagger-typescript-api 를 사용하면 자동으로 프로젝트의 TypeScript 파일로 생성할 수 있습니다. 도입 초..

소프트웨어에서 버전은 배포된 시점을 기록하는 것이다. 배포된 시점을 알 수 있으면 서비스 장애 해결에 용이할 뿐만 아니라 소프트웨어의 의존성을 파악하기 쉽다. 프로젝트에 따라서 두 가지 방법으로 버전 기록했는데, 그 경험을 공유하고자 한다. 날짜로 버전 사용 현재는 종료된 카카오 영화예매 서비스를 담당할 때 버전은 날짜를 사용했다. YYYYMMDD 형식을 사용했는데, 예를 들어 20230101처럼 연월일을 모두 기입하는 방식이다. 이 방식을 활용하면 언제 배포했는지 쉽게 파악할 수 있다. 배포 시점에 따라 장애가 발생하기도 하기 때문에 시점을 알고 싶을 때 유용하다. 서비스는 여러 개의 서버 장비에 배포가 되기 때문에 간혹 배포 이슈로 특정 서버 장비에 배포가 안되는 경우가 있다. 이 경우에는 Sentr..

전 직장에서 web3 관련 커뮤니티 서비스를 담당했었다. 사용자가 프로필 이미지를 NFT로 설정하면 육각형으로 표현해 줘야 하는 데, 처음에는 모양을 자유롭게 다룰 수 있는 SVG를 활용했었다. 하지만 iPhone에서 웹 뷰어의 프로세싱이 많아지면 SVG는 네모 박스로 표현되는 이슈가 있어서 CSS Mask 기능을 활용해서 해결했다. 이 글에서는 SVG와 CSS Mask를 활용해서 육각형 프로필을 만드는 방법을 소개한다. 이 기능들을 활용하면 다른 모양으로도 가능하다. SVG로 육각형 프로필 만들기 1. path 태그로 육각형 모양 만들기 2. image 태그로 프로필 이미지 사용 3. clipPath로 path 바깥 영역 자르기 CSS Mask로 육각형 프로필 만들기 1. img 태그로 프로필 이미지를..

LCH LCH (Lightness, Chroma, Hue)는 색상 공간의 일종입니다. LCH 공간에서는 밝기(Lightness)는 큐브의 수직축으로 표현되며, 채도(Chroma)와 휘색(Hue)는 큐브의 수평축으로 표현됩니다. LCH 공간은 채도(Chroma)를 직접적으로 나타내기 때문에 RGB, CMYK 등과 같은 색상 공간에서의 채도 값의 정의와 다릅니다. 채도(Chroma) 값은 휘색(Hue)와 밝기(Lightness) 값에 의존하지 않습니다. 따라서, LCH 공간에서 색상의 이질성을 더 잘 나타낼 수 있습니다. 출력 장치에서의 색상 표현을 위해서는 LCH 공간에서 RGB나 CMYK 등의 색상 공간으로 변환이 필요합니다. Lightness (L) Lightness는 색상의 밝기를 나타낸다. 0에 가..