Lemonade Engineering

Sign in

디자인 시스템의 필요성과 중요성에 대해서는 잘 알겠다고요? 하지만 어디서부터 시작할지, 어떻게 하는 것인지 가늠은 되지만 구체적으로 우리가 가진 문제점은 어떻게 해결하면 좋은지, Figma의 Auto layout과 Variant, Property는 어떻게 사용해야 효율적인지, 어떻게해야 고생은 덜하는지! 자잘 자잘한 디테일에 대한 실용적인 대답은 찾지 못하셨나요? 아무리 디자인에 정답은 없다지만, 출발점은 있어야하지 않을까요? 저 또한 같은 질문을 했지만 20만원짜리 강의들, 실리콘밸리의 영문 기사에서도 찾을 수 없었습니다. 지난 반년간 디자인 시스템을 만들면서 마주한 질문과 해답을 공유해드리겠습니다!

패스트원의 피그마 파일 구조

디자이너 1인, 기획자 1인, 개발자 4인,
2달, 101개 화면, 605 컴포넌트, 149색상, 17텍스트 스타일, Monorepo

Background & Overview

2020.11, 가 …


1편, Javascript 부터 React까지

어느 가을날 저녁, 늦은 나이에 막 자바스크립트를 배우기 시작한 친구 판주가 물었다.

“형 state가 뭐야? 그리고 Redux는 뭐야?”

나는 웹 페이지가 우리나라에 막 퍼지기 시작할 때부터 시작했고, 대략 2년 전부터 직업으로써 자바스크립트와 React, Redux 등 관련된 다양한 웹 기술을 사용하고 있었지만, 워낙 드문드문 사용했던 웹(Web) 관련 기술이라 쉽게 대답할 수 없었다.

또한, 나 역시 Redux 을Redux를 이해하기 위해 수많은 자신의스스로의 질문들이 있었고 여전히 이에 대해 확실한 설명을 할 수준의 깊이 있는 공부를 못한 상태(State?)지만 지금까지 이해한 것을 바탕으로 이제 막 자바스크립트를 배우고 …


by jingi & seunghwan

현재 Fastcampus Language(이하 FCL) 개발팀에서 진행하고 있는 Fastone Online 프로젝트에는 학생, 강사, 관리자 총 세 가지 프론트엔드가 있다. 원래대로라면 관리자는 기존 관리자 전용 사이트에 합쳐지고, 학생과 강사는 각각의 저장소를 만들었을 것이다.

하지만 우리 팀 슈퍼 디자이너 상은님(쌍따봉)의 놀라운 능력으로 학생과 강사 두 프론트엔드가 같은 컴포넌트들을 공유하도록 디자인 됐고!(두둥) 컴포넌트들 크기나 레이아웃만 변경해서 구현이 가능할 것 같다는 생각이 들었다.

“공용 컴포넌트들 위한 저장소를 따로 파서 관리해볼까?”라는 생각도 해봤지만 이를 관리 …


배경

우리 서비스에 사용되는 sms 발송 업체를 기존 비즈엠(웹에서 발송하는 카카오톡 및 SMS 기능 제공 서비스 업체)에서 ncloud(NAVER에서 운영하는 각종 클라우드 서비스)로 변경하기로 했다. 이를 위해 API 사용법을 알아보고 스웨거(Swagger — API 스펙 확인 및 테스트 가능한 환경)에서 테스트까지 수월하게 마쳤다.

그런데 실제 코드 단에서 테스트를 해보니 계속 401 Unauthorized 에러가 났다. 이유는 헤더에 전송하는 암호화한 데이터가 잘못되었던 것인데, 이를 해결하기 위해 암호화 알고리즘에 대해 많이 찾아보게 되었고 그 과정에서 알게 된 것들과 에러 해결 과정을 정리해 보려고 한다.

암호화 알고리즘?

암호화는 사 …


by Jingi

서비스를 만들다보면 파일 다운로드 링크를 만들어야 할 때가 있다. 이런 경우 클라우드에 파일을 업로드하고, 해당 파일의 링크를 DB에 저장해 다운로드 링크로 제공하게 된다. 이 부분을 구현하며 다운로드 파일명이 생각보다 마음대로 설정되지 않았던 문제와 이를 해결하는 경험에 대해 써봤다.

왜 다운로드할 때 파일명이 이상하지?!

보통 인터넷에서 파일을 다운로드 받을 때는 링크를 클릭한다. 이 때 설정되는 파일명이 링크의 텍스트나 특정 속성의 값으로 자동 설정되는 것인 줄 알았는데 아니었다!!!(충격)

파일 다운로드를 제공해야하는 입장에서 어떻게 파일명을 설정해야할까? 우리 팀에서 사용하는 Google Cloud Storage를 기준으로 생각해봤다.

<a> 태그의 download 속성

먼저 구글링해보니 <a>태그의 download 속성이 파일명을 설정할 수 있도록 해준다고 나왔다 …


by skchoi

Contents

  1. 소프트웨어 테스트는 필요한 일일까
  2. 패스트캠퍼스랭귀지(FCL)의 테스트 방법 소개
  3. 실제 업무에 테스트 적용해 보기
  4. 소프트웨어 테스트 활용 후기

소프트웨어 테스트는 필요한 일일까?

개발자로서 작업이 끝나고 그 내용을 위한 테스트 코드를 작성해야 한다는 것은 꽤 귀찮은 일이다.

단기적으로 보면 개발 시간이 연장될 뿐 아니라 그 효용성에 대해서도 의구심이 들기 때문이다. 거기에 더해 어차피 User Action은 전부 고려할 수 없고, 단순한 API 동작 테스트만 하는 게 과연 도움이 될까 하는 회의감도 한 몫 더한다.

지금껏 제대로 동작하는 테스트를 경험해 볼 기회가 없었기에, 위와 같은 의문만 가진 채 테스트 작성을 등한시 해왔었는데, 이번 패스트캠퍼 …


by Sang-eun

2020년 12월, 가벼운 학습지 이벤트 페이지 기획&개발에 해프닝이 있었다. 기획에서 디자인 컴펌까지 걸린 시간은 총 ( 14 )일, ( 약 70 )시간 중간 피드백 요청 회수는 ( 제발 그만좀 해 할정도로 많다 ).

다들 지쳐가고, 머리가 아프고, 뭐가 문제일까? 초기 인터뷰가 이 문제를 해결해줄 수 있을까? 이해관계자를 인터뷰해야 하는 이유 2가지를 FCL의 Event page 프로젝트의 협업 히스토리를 보고 알아보자!

*이해관계자(영어: Stakeholder)는 기업·행정·NPO 등과 관련하여 직접·간접적으로 이해관계를 가지는 사람을 가리킨다.. 프로젝트에서는 같이 협업하는 모든 사람들 + 프로젝트의 일정 및 방향에 따라 직접적으로 영향받는 사람들을 떠올릴 수 있다. 디자이너, 마케터, 기획자, 개발자, 의사결정자(CEO) 등이 해당된다. 이 중 프로젝트에 관해 가장 많은 정보를 가지고 있는 분을 인터뷰하면 좋다.

1.작업 번복을 피해 ✔️ 커뮤니케이션 시간 비용을 아낄 수 있다. ✔️

우리는 대화하면서 머리속으로 서로 다른 그림을 그린다. 말을 나눠보지 않으면, 우리는 한참을 작업하다가 어느 순간 생각이 맞지 않다는 것을 확인하고 작업을 초기화한다. 그리고 다시 시작한다. 이것을 해결하는 안전장치가 초기 인터뷰다. 가볍게 대화하는 3분의 시간에서도 우리는 많은 정보를 얻을 수 있다. 지도를 가지고 길을 걷게 되는 것과 같다. 이것이 인터뷰를 해야하는 이유다 …


by saegeul

구글태그매니저

구글 태그매니저는 구글에서 개발한 태그를 관리할 수 있는 툴이다. 태그란 html, javascript 코드를 지칭하는 것으로 이를 직접 사이트에 심지 않아도 구글 태그매니저를 통해 필요한 태그가 필요한 시점에 사이트의 특정위치에 로드되어 실행되는 것처럼 활용할 수 있다.

Dependency

이 글에서 설명하는대로 구글 태그매니저를 활용하기 위해서는 다음의 dependency가 클라이언트(프론트엔드)에 설치되어야 한다. 또한 아래의 링크 문서를 읽어보고 이해하고 적용해야 한다. 이 패키지는 구글 태그매니저를 웹사이트에 적용하기 쉽게 도와준다.

npm install react-gtm-module --save

태그매니저가 필요한 이유

웹사이트에 꼭 필요 …


by seunghwan

목적 : 워드프레스로 만들어진 페이지에 이미지와 같은 정적리소스를 캐시하여 클라이언트 요청에 빠르게 반응하고 원서버에 부하를 줄이는 인프라를 구축

CDN(content delivery network) 은 전 세계에 분산된 서버를 사용하여 사용자와 가까운 위치에 부하 분산 콘텐츠의 사본을 캐시한다.

캐싱을 통해 정적 요소의 요청을 줄일수 있다. 또한, 캐시된 요청을 전송하므로 클라이언트 요청에 대한 응답 시간을 줄일 수 있다.

gcp 에서 제공하는 cdn을 이용하였다 우선은 gcp 부하 분산를 만들어야한다.

부하 분산 추가하기를 누르면 백엔드 프론트엔드 이 두 부분을 설정해야한다. 백엔드는 리소스들을 저장 …


Author: taehoon

Next.js란?

→ 많은 분 들이 아시다시피 SSR을 베이스로한 React Framework 이다.

하지만 SSR 과 SEO 빼면 사용할 이유가 없다. 라고 하시는 분들 , Next 를 아직 접해보지 않으신 분들이 참고하면 좋을듯 하다.

Next.js 를 알기전 , 만든 회사에 대해서도 알고 있으면 좋다.

Zeit → Vercel 으로 탈바꿈 함으로써 아이텐티티를 재 정립 할 수있는 계기가 되었다. 시리즈 A 투자를 받으며2,100 만 달러 를 확보 함으로써 Next의 탄력적인 성장을 기대할 수 있다.

실제로 Next.js는 2,3 개월 주기로 꾸준한 버전 업을 진행중이며 , 2018년 5버전부터 2020년 10버전까지 놀라운 속도의 버전업을 볼 수 있었다.

Vercel 이 가지고 있는 개발 서비스 철학에 대해서 알아보자.

  • zero-config
  • bes …

Lemonade Engineering

레모네이드 개발팀 기술 블로그입니다. This is an engineering blog from Lemonade Engineering.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store