레진 기술 블로그

제가 일하고 있는 서비스 개발팀은 레진코믹스의 백엔드 서비스를 책임지고 있는 팀입니다. 저희는 작년부터 Kotlin과 Spring WebFlux를 메인 스택으로 선정하여 개발하고 있습니다. 이 글에선 WebFlux 기반의 컨텐츠 인증 서비스를 개발하면서 경험한 이슈들을 공유하려 합니다. 이 글은 WebFlux 또는 리액티브 프로그래밍에 대한 기초 지식을 다루진 않으므로 다소 불친절하게 느껴질 수 있는 점 양해 바랍니다. WebFlux에 대한 기초적인 내용은 제 블로그의 Spring WebFlux와 Kotlin으로 만드는 Todo 서비스 - 1편을 참고하시기 바랍니다. 이 글의 예제는 저희가 서비스하고 있는 코드를...

레진코믹스는 다양한 웹툰을 글로벌 서비스하고 있는 회사입니다. 저희 개발구성원들은 항상 더 빠르고 안정적인 서비스를 하기 위해 각자 맡은 영역에서 최선을 다하고 있습니다. 그 노력의 일환으로 백엔드 관점에서 차세대 포맷인 WebP를 적용하면서 겪었던 경험담을 공유하려 합니다. WebP 란 무엇인가? 2010년 구글이 만든 이미지 포맷으로 홈페이지에서 JPEG(손실)나 PNG(비손실) 포맷대비 30% 정도 더 사이즈가 작다고 설명하고 있습니다. WebP를 지원하는 브라우저 Google Chrome (desktop) 17+ Google Chrome for Android version 25+ Microsoft Edge 18+ Firefox 65+ Opera 11.10+ Native...

우리 모두는 하나의 프로젝트를 만드는데 더 효과적인 구조를 만들기 위해 노력합니다. 어떠한 구조를 완성하게 되면, 그 구조가 다른 프로젝트에 영향을 끼치거나, 심지어 프로젝트의 시작단계에서 그 구조의 규약대로 파일을 초기화시켜야할때가 생기게됩니다. Template이 왜 필요할까? 혹시 다음과 같은 고민을 하신적이 있으신가요? 우리가 정한 규약대로 파일을 반복적으로 생성하는 작업이 귀찮아요 새로 입사했는데, 팀내에서 정해진 규약이 있다는데 구조를 한눈에 보기 힘들어서 이게 맞는 규약인지 모르겠어요 개발하면서 이게 맞는 규약이었는지 가물가물해요 모든 규약을 모두 정의하긴 어렵지만, Xcode Template은 파일 생성단계에서...

CSS position: sticky 속성을 소개합니다. position: sticky 속성을 적용한 박스는 평소에 문서 안에서 position: static 상태와 같이 일반적인 흐름에 따르지만 스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있는 속성입니다. 아직 Working Draft 단계이고요. IE 11 브라우저와 안드로이드 4.x 이하 버전에서 지원하지 않습니다. 하지만 점진적 향상 기법의 한 예로 들기에 적절해 보여요. 최신 명세를 지원하는 브라우저에서는 이 속성이 멋지게 동작하지만 그렇지 않은 브라우저에서는 position: static 상태만 표시하기 때문에 어색하지 않게 표시할 수...

오늘 레진 챌린지 서비스를 오픈하면서 CSS 개발했던 일을 회고합니다. 전처리 도구, BEM, 새로운 CSS 규칙을 활용했던 이야기입니다. CSS 전처리 도구 활용: CSS 분리, 병합, 재사용 BEM 명명 규칙 활용: .block__element--modifier BEM 가장 흔한 실수: .a__b__c--d, .a__b--c--d 냄새나는 CSS 코드: 선택자 특이성을 고려하지 못한 새로운 CSS 규칙: @supports, position: sticky; CSS 전처리 도구 활용: CSS 분리, 병합, 재사용 # 우리 팀에서는 CSS 전처리 도구로 Sass를 사용하고 있습니다. 전처리 도구의 장점은 콤포넌트 단위로 파일을 쪼개어 관리할 수...