TailwindCSS

tailwind CSS는 utility-first CSS 프레임워크라고 정의 되어 있다. 이는 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.

사용 예시)

<div class="pb-10 sm:pb-12 md:pb-8 lg:pb-4">
    Hello world
</div>

장점

• Utility-First의 편리함과 빠른 개발

스타일 코드도 HTML 코드 안에 있기 때문에 HTML와 CSS 파일을 별도로 관리할 필요가 없다. 그 덕분에 원하는 태그의 스타일을 변경하기 위해 클래스명을 검색해가며 일일이 필요한 CSS 코드를 찾을 수고도 사라진다. 또한 반대로 꼭 미리 셋팅된 클래스만 써야해서 더 어렵다고 느낄 수도 있는데, Intelli Sense 플러그인을 제공하여 미리보기, 자동완성, 신택스 하이라이팅, 린팅을 지원하기 때문에 조금만 익숙해지면 금방 문서 없이 개발할 수 있다.

• 클래스명을 고민하지 않아도 된다.

개발을 하다보면 css 적용을 위해 클래스명을 고민하게 되는데 미리 세팅된 유틸리티 클래스를 활용하기 때문에 클래스 명을 고민하지 않아도 된다.

• 작고 가벼운 사이즈

일단 모듈 사이즈도 다른 css frameworks 보다 작은 사이즈 이고, 또한 프로덕션을 위해 빌드 할 때 항상 Tailwind의 purge옵션과 을 사용하여 사용 하지 않는 스타일을 설정해서 최종 빌드 크기를 최적화가 가능하다.

purge 속성은 css 최적화와 관련된 속성으로써, 현재 프로젝트 내에서 사용하고 있는 tailwind css 속성만 해석해서 build할 수 있도록 해주는 일종의 최적화 모듈 번들러와 비슷한 역할을 한다

또한 좀 더 최적화 시키고 싶으면 cssnano와 같은 툴을 함께 이용하면 좋다. cssnano 툴은 만들어진 css 파일을 한 번 더 압축하는 역할을 한다.

단점

• 코드 가독성 떨어짐

다양한 css 속성을 넣다보면 코드의 길이가 길어져서 가독성이 떨어진다.

Sass 방식

Sass 방식은 Syntactically Awesome Style Sheets의 줄일말로 css를 더 간단하고 효율적으로 만든다. 또한 Sass는 전처리기 라고도 하는데, CSS가 만들어지기 전에 다양한 일들을 한다.

Sass를 사용하면 변수, 수학 연산, 믹스인, 루프, 함수, 가져오기 및 CSS 작성을 훨씬 더 강력하게 만드는 도구를 사용할 수 있다.

사용 예시) 변수 중첩 믹스인

장점

• 높은 생산성을 가져온다.

Styled-Component

기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부른다. css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있다.

사용 예시)

const Button = styled.button`
    font-size: 1rem;
    margin: 1rem;
    padding: 1rem 1rem;
    @media (min-width: 768px) {
        padding: 2rem 2rem;
    }
    border-radius: 0.25rem;
    border: 2px solid blue;
    background-color: blue;
    color: white;
`;

const TestComponent = () => (
    <>
        <Button>
            Hello world!
        </Button>
    </>
);

장점

• 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다.

• Sass 와 관련된 모든 기능을 사용할 수 있어 생산성 측면이 뛰어나다.

• 모듈성으로 관리 되기 때문에 유지 보수에 용의하다.

단점

• 별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다.

• 인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다. 그렇게 되면 FOCU(Flash of unstyled content) 현상이 일어날 수 있는데, FOCU 현상은 브라우저에 보여줄 것들이 많아짐에 따라, 점차적으로 속도가 느려집니다. 특히, 컴포넌트가 렌더링되며 형태가 잡히기 때문에 원형의 모습이 잠깐 노출되는 현상이다.

해결법 : 이를 개선하기 위해 CSS-in-JS에서도 css를 SSR 방식으로 넣어주는 등 다양한 노력을 이어가고 있다.

1) 디자인 시스템이란 무엇인가?

디자인시스템이란 웹이나 서비스 디자인에 적용된 디자인스타일의 규칙이나 가이드라인을 의미한다.

1) 디자인 시스템의 장점

• 공통으로 사용된 컬러, 폰트, 레이이아웃, UI 컴포넌트들에 대한 정의하고 적용하는 것에 있어서 디자인 작업을 효율적으로 만들고 디자인의 일관성을 유지할 수 있다.
• 사용자에게 컬러, 인터넥션, 패턴은 친숙함과 안정된 느낌을 제공합니다. 잘 계획되고 실행된 디자인시스템은 사용자의 경험을 극대화한다.

2) 왜 식스샵에서 디자인 시스템이 필요했을까?

1) 여러 제품에서 사용해야 한다 → 일관된 경험을 주기 위해서

• 일관성이 없는 디자인

  • 로딩

  • 달력 및 문구

• 기존 CSS 방식의 문제점 - 클래스를 활용 방식중

  • 문서관리가 잘되지않음
  • 일관된 경험을 주기 힘듬
  • 새로운 디자인이 생길때마다 또 만들어주고 비슷한게 있으면 반복 (문서관리가 잘되지않음)

• 디자이너에게 확인을 하기 위해서 2가지 방법 사용

  • 개발 셋팅 해주기
  • 배포후 도메인 알려주기 → 개발 마지막 단계

• 새로운 디자이너 분이 오시면 기존 디자인의 다양성 때문에 어려움을 겪었음

3) 스토리북을 활용하는 이유?

3-1) 스토리북 이란?

컴포넌트 기반의 UI 개발 도구 및 유닛 테스트를 위한 오픈 소스

StoryBook

3-2) 스토리북을 왜 선택하였는지?

• 사용자나 디자이너가 직접 이것저것 만져볼수있다.

• 스토리북을 통한 문서화(개발자들도 쓸 수 있도록) 정의 → 프롭스 정리에 용이하다

• 쉽게 배포 및 테스트를 할 수 있다. → PR단계에서 진행된다.

• 디자인 시스템 뿐만 아니라 다방면으로 활용 가능하다
  • 유닛 테스트 도구
  • 다양한 애드온을 가지고 있다.

4) 어떻게 디자인 시스템을 만들었을까?

4-1) 디자인 분석

디자이너 분께 디자인을 받으면 해당 디자인의 가장 작은 단위(atom)를 확인한다.

확인한 작은 단위가 다른 컴포넌트에도 쓰일 수 있는 단위인지 분리하는 작업을 거친다.

예를 들면 다른 종류의 버튼을 받으면, 해당 버튼들이 공통적으로 사용되는 단위를 확인하고, 어떻게 재사용될수 있는지 확인하는 과정을 거친다.

4-2) 프롭스 분석

1) 어떻게 프롭스를 정의했는지?

• 컴포넌트 라이브러리(mui,부트스트랩)를 참고했다.
• 유명한 리액트 라이브러리를 참고하여 프롭스가 어떻게 쓰이는 지 분석했다.

4-3) 사용성 분석

다만들어진 디자인 시스템에 사용성이 문제가 없는지 확인하는 시간을 가졌다.

만들어진 디자인 시스템을 직접 여러 뱡면으로 사용하면서 놓친 부분은 없는지 어떻게 더 활용하면 좋을지 고민하는 시간을 가졌다.

5) 라이브러리도 그냥 선택하지 않는 우리

컴포넌트 작업을 하다보면, 기존의 ui 라이브러리 커스텀으로는 구현 불가능한 식스샵의 특수한 ui들이 많아 외부 라이브러리를 사용할 때가 생겼다. 이럴 경우 우리는 라이브러리를 사용하기 전에 우리가 사용하기 적합한 라이브러리인지 확인하는 과정을 거친다.

의존성이 어떻게 걸려있는지 확인하기 위해, 사용한 근거와 선택 이유를 아래와 같이 문서로 정리하고 논의하며 협업하고 있다

6) 결과물

스토리북

7) 어려웠던 점?

• 추후 작업에 있어서 생산성을 올라가지만 초기 개발 시간(컴포넌트 작업시간)이 많이 소요된다.
• 해당 컴포넌트들이 어떤 식으로 활용될지 몰라 컴포넌트 활용성 및 프롭스를 다양하게 고민하는 시간이 필요했다.
• 비슷한 컴포넌트들이 많아짐에 따라 헷갈리지 않는 명확한 명칭이 필요했다.

8) 참고 사이트

국내 스타트업들의 디자인 시스템은? 그리고 디자인 시스템에 대한 사례 확인과 공부를 할 수 있는 곳은?

디자인 시스템 모음

더 고도화 된 시점에 오픈소스로 공개할 예정이니, 지켜봐주세요!

더 멋지게 발전할 식스샵 디자인 시스템, 식스샵 프론트 팀을 기대해주세요.

👋 안녕하세요

식스샵에서 프론트엔드 개발을 담당하고 있는 김정빈입니다.

어느덧 식스샵에 들어온 지 1년이 넘었다.

신입 개발자의 첫 직장, 식스샵은 어떤 회사였고, 1년 동안 식스샵에서 어떤 일을 했는지, 신입 개발자로 첫 직장에서 어떻게 지내왔는지 적어보려고 한다.

이외에도 2021년을 어떻게 보내왔는지, 그리고 그 과정에서 어떤 것을 느꼈는지 적어보려고 한다. 두서없이 써보는 식스샵에서의 신입 개발자로써 1년!

2021년 회고

2021년 회고 — part1. 식스샵을 소개합니다 2021년 회고 — part2. 개발자 김정빈을 소개합니다 2021년 회고 — part3. 신년목표 돌아보기

내년 1년은?

올해를 이렇게 보내고 나니 내년에는 얼른 코로나가 종식되어, 하고 싶은 일들이 많아진다.

• 외부 세미나에 발표해도 부끄럽지 않을 세미나 준비해 보기
• 많은 사람들에게 나의 글을 보여주기 부끄럽고 좀더 잘 적어야 하는 부담감에 그동안 노션에만 글이나 회고를 적었는데, 내년에는 조금씩 개인 블로그에 글을 쓰고 싶다.
• 웹 성능 개선 관련하여 공부하고 글을 써보고 싶다.
• 개발 책도 좋지만 일반 책도 읽고 싶다
• 오픈소스에 컨트리뷰션
• 얼른 코로나가 끝나서 풋살 하러 가고 싶다.

...

막상 하고 싶은 일들을 나열해 보니 이렇게 많은 건 지켜질 수 없을 거 같아서!

• 매달 글 1개씩 적기 (외부에 공개되는 블로그에)
• 한 달에 책 1권이상 읽기 (개발 책 관련 X)
• 분기에 한번 오픈소스 컨트리뷰션하기
• 운동 취미 만들기

이렇게 4개는 꼭 지키고 싶다.

식스샵을 1년 동안 다니면서 인원이 2배 이상 늘어난 모습, 투자를 받는 모습 등 다양한 모습을 보면서, 회사가 어떻게 성장해 나가는지 두 눈으로 직접 볼 수 있었다. 그 과정에서 다양한 경험과 배움을 통해 크게 성장한 거 같다.

1년 동안 어떻게 살아왔고 어떤 생각을 가졌는지 정리하는 시간을 가지니 앞으로 1년은 또 어떻게 살면 좋을지 어떤 마인드를 가지면 좋을지 내년 1년도 기대가 된다.

누군가를 위해 서비스를 만들때 즐거움을 느껴 개발에 재미를 붙였던 나는, 식스샵에 입사할 당시 개인적으로 꼭 다른 사람들을 위한 서비스를 만들어야지 하는 목표가 있었다.

그래서 1년 동안 이 목표를 위해서 다양한 사내 서비스를 만들어 보려고 노력했다.

코드리뷰를 위한 서비스 - 리뷰알리미

리뷰에 관련한 여러가지 일화가 있다.

첫 번째 일화는 식스샵을 다니면서 운이 좋게도 면접관을 경험해 볼 수 있었다. 식스샵에 묻고 싶은 질문이 있을 때 모두 하나같이 "개발 문화는 어떤가요?" "리뷰 문화는 잘 정착되어 있나요?" 라는 질문들을 많이 받았다. 이런 질문을 받으면서 많은 사람들이 성장을 위해 좋은 리뷰문화를 기대하고 있다는 것을 느꼈다

또한 나도 회사에 다니면서 리뷰에 강한 문화를 만들고 싶었다. 아니 적어도 리뷰 때문에 배포가 늦어 지는 경우가 없었으면 좋겠다고 생각했다. 나도 매번 리뷰를 늦지않게 해주리라 마음먹었지만, 작업 중에 리뷰를 확인하기에는 업무의 흐름이 끊겨 버리는 까닭에 미루게 되었고, 다음에 해야지 생각하면 항상 까먹곤 했었다.

이런 이슈들이 점점 쌓여 매일 같은 시간에 리뷰를 알려주는 봇이 있으면 좋겠다는 생각에 슬랙 봇을 활용하여 리뷰 알리미를 만들었다.

사내 마케팅을 위한 서비스 - 고객관리 서비스

다른 회사의 팀 구조를 보니 회사의 프로덕트를 만드는 팀 외에도 사내 마케팅 팀이나, CS 팀이 좀 더 효율적인 업무를 위해 사내 개발팀이 있는 걸로 알고 있다. 하지만 기존 식스샵 마케팅팀에서는 고객 사례 인터뷰처럼 웹페이지가 수정되어야 하는 사항이 있을 때, 직접 개발자에게 문의하여 바꾸는 번거로움이 있었다. 이런 일이 있으면 계속해서 큰 리소스가 발생하지 않지만 서로 업무에 지장을 줄 수 있는 상황이 벌어질 수 있다는 것을 깨달았다.

이런 문제를 어떻게 하면 해결할 수 있을 까 고민중 백엔드 개발자 한분이 같이 마케팅팀에서 쉽게 홈페이지에 들어가는 고객사례 인터뷰를 수정할 수 있는 어드민 기능을 같이 만들면 어떻겠냐고 제안 주셔서 흔쾌히 하게 되었다.

해당 어드민 기능에는 직접 식스샵 홈페이지에 고객 사례를 추가하는 기능 외에도 검색 기능, 필터 기능, 사이트 상태를 알아볼 수 있는 기능 등이 존재한다.

기능을 다 만들고 나니, 이 고객 사례를 관리하는 분이 진정으로 좋아해주시는거 같아 너무 기뻤고 뿌듯했다.

CS 알림 및 회사 일정을 볼 수 있는 서비스 - 전광판

현재 식스샵은 모든 직원이 돌아가면서 cs 업무를 하고 있다. 그래서 해당 날짜에 cs 담당자를 알림으로 주고 있지만, 당일 2시간 전에 알림이 가기 때문에 종종 까먹는 사람들도 많고, cs업무를 잊은 채 다른 약속을 잡아 급하게 바꿔야 하는 경우도 종종 생겼다. 그래서 cs 일정을 미리 한눈에 볼 수 있는 상황판과 회사의 주요 일정을 한눈에 볼 수 있었으면 좋겠다는 생각을 하였다.

하지만 이런 식의 정보는 나열만 있다면 사람들이 쉽게 쓰지 않을 수도 있겠다고 생각이 들어 서핏 처럼 사람들이 쉽게 검색도 할 수 있고 이런 알림과 더불어 회사에 어떤 이슈가 있는지, 각 셀의 휴가자는 누가 있는지, 셀의 목표는 뭐인지 등에 대한 다양한 정보를 보여주면 좋겠다는 생각을 하였다.

이러한 고민 끝에 위와 같은 시안이 나오게 되었다.

원래 2021년이 끝나기 전에는 꼭 출시하고 싶었지만, 개발일정이 딜레이 되어 1월 중순에는 꼭 출시할 예정이다.무조건!!

식스샵의 디자인을 한 곳에 볼 수 있는 서비스 - 디자인 리소스 센터

식스샵의 디자인 시스템을 만드는 업무를 하면서 많은 회사의 디자인 시스템을 보게 되었다.

그러던 중 토스의 디자인 리소스 센터 (https://brand.toss.im/) 를 보게되었는데, 식스샵도 이렇게 한 곳에서 디자인을 모두 볼 수 있는 곳이 있으면 좋겠다는 생각이 들어 진행하게 된 서비스이다.

하지만 토스와 다르게 식스샵은 리소스가 한정되어 있기에, 그냥 만들면 관리도 안 되고 또다시 자료가 무분별하게 흩어질 것 같아서 어떻게 하면 잘 관리될 수 있을까 고민한 결과, 단순 만드는 것 보다는 깃 오픈소스처럼 디자이너 분들이 콘텐츠를 채워나가고 관리하기 편하게 할 수 있도록 큰 틀만 만들고 자동 배포, 자동 관리, 규칙 등만 만들어서 생태계를 형성해 보려고 한다.

현재는 아직 디자인적 요소가 준비가 되지 않았지만, 추후에 design.sixshop.com에 식스샵의 디자인 리소스와 스토리북을 활용한 디자인 시스템이 올라갈 예정이다.

이렇게 간략하게 어떤 이유로 이런 서비스를 만들게 되었는지, 어떤 서비스인지 주로 적어보았다. 해당 서비스를 만들면서 어떤 기술을 사용했는지, 어떻게 만들었는지는, 그 과정에서 무엇을 배우고 느꼈는지는 너무 길어져서 또 따로 적어볼 예정이다.

2021년 김정빈은 식스샵을 다니는 초반에는 아직 학교를 졸업하지 않은 상태였기에 학생 김정빈과 직장인 김정빈 의 2가지 모습이 공존했다.

학생 김정빈

식스샵 동료 분이 사주신 꽃을 들고 찰칵!

학교에서 4개의 전공 수업과 3개의 팀 프로젝트를 해야 했었다. 이미 취업을 해서 수업은 조금 쉬엄쉬엄 들어볼까했지만 학교 수업도 포기하고 싶지 않았고 팀 프로젝트에서 민폐도 끼치지 않고 싶었다. 최선을 다한 결과 만족스러운 학점과 멋진 이미지 처리 기술을 이용한 PDF 편집툴을 만들 수 있었다.

또한 졸업도 할 수 있었다. 드디어 4년의 마침표를 찍었다.

직장인 김정빈

식스샵에서 프론트 엔드 개발자로 일하면서 여러 가지 일을 경험해 볼 수 있었다.

나에게 매번 모든 프로젝트가 의미 있었고, 많이 배울 수 있는 기회였다. 매 프로젝트가 끝날 때마다 그때그때 느꼈던 배움이나 감정들을 정리하고 다음에 좀 더 잘 할 수 있도록 스스로 회고하는 시간을 가졌다.

현금영수증 배포후 스스로 자기회고 시간..

매 프로젝트가 소중하지만, 그중에서 특히 가장 최근에 완료한 2021년 마지막 업무인 디자인 시스템 구축 업무가 가장 기억에 남는다. 식스샵에서 꼭 하고 싶었던 업무인데 2021년 마지막으로 할 수 있게 돼서 매우 열정적으로, 의미있게 한 업무이다.

식스샵 디자인 시스템 개발기 (작성중)

리듬

학업, 회사일 둘 다 포기할 수 없었기에 최대한 규칙적인 생활을 하여 낭비하는 시간을 최소로 줄이고 자기 전까지 시간을 허투루 쓰지 않고 계획적으로 생활하는 것이 가장 큰 목표였다.

이러한 생활의 리듬을 위해 몇가지 규칙을 정했다.

매주 일요일 자기 전에는 다음주에 할일을 정리 하는 시간을 가졌다. TodoList 앱에 다음주에 해야 할 일과 소요 시간을 기입했다. 매일 기상후, 미리 적어놓은 투두 리스트를 보며 그날 해야하는 회사일을 정리했다. 그날 내가 업무에 할애할 수 있는 시간을 체크하고, 주간 투두리스트에서 해야할 일을 옮겼다.

그리고 출근과 함께 좋은 컨디션으로 일할 수 있도록 셋팅을 했는데

대충 내 책상은 이렇게 생겼다

아침에 출근하면 왼쪽의 모니터에는 2개의 데스크탑 화면을 띄어놓았는데, 하나는 코드와 하나는 검색할 수 있는 화면을 띄어 놓았다.

오른쪽 노트북에는 3개의 데스크탑 화면을 띄어놓았는데, 하나는 작업 중인 로컬 화면과 피그마를 반반 나누어 켜 놓았고, 다른 하나는 TIL을 적어 놓을 수 있는 노션과 해야 할 일을 볼 수 있는 TodoList 앱을 반반 나누어 켜 놓았고, 다른 하나는 슬랙을 켜놓았다.

이렇게 해놔야지만 가장 효율적으로 하루 중 해야 할 일을 바로 쉽게 볼 수 있었고, 오늘 배웠던 일들이나 어려운 일들을 까먹지 않고 정리할 수 있었다.

그리고 자기 전에 바빠서 막상 덜 정리했던 부분이나 더 알아보면 좋을 TIL 을 알아보고, 오늘 하려고 했지만 하지 못했던 일들을 다시 할 일에 넣어두었다.

이런 내용을 바탕으로 간단하게 매주 회고를 하였고, 매주 회고를 기점을 매달 회고를 진행하였다.

자기개발

또한 성장을 위해 끊임 없이 노력했다.

회사에서 자기 개발을 위한 책과 강의를 지원해 주는데, 매우 유용하게 사용하고 있다.

강의 정리

책 정리

이런 식으로 보고 싶은 것과, 보고 있는 것, 다본 것으로 나누어 관리 하고 있었다.

이렇게 배웠던 것들이나 좋았던 점, 아쉬운점들을 정리하면 다음에 다시 볼 때 어떤 내용인지 쉽게 알 수 있었다.

친구들과 개발 이슈 회고

운이 좋게도 대학 때부터 함께 공부해오고 같은 꿈을 가지며 지내온 개발자 친구들이 많다. 그러다 보니 함께 공부하고 같이 프로젝트도 만들었다.

이 친구들과 어떻게 하면 좀 더 서로 성장할 수 있을까 고민하다가 매주 모여서 한 주에 있었던 일들을 공유하고 스터디와 함께 일주일 동안 겪었던 문제들과 해결 방법을 공유하며 트러블 슈팅을 진행하였다.

트러블 슈팅을 주목적으로 같이 공부도 하고 놀기도 하며 개발 이야기도 나누었다. 또한 모두 이제 막 개발을 시작한 친구들이었기에 우리끼리 해결할 수 없는 문제나 조언을 듣고 싶은 일이 생겼을 때는 서로의 회사의 다른 선배 개발자분들에게 부탁하여 함께 밥을 먹으면서 좋은 얘기를 같이 듣기도 하였다.

주로 카페나 학교로 가서 같이 공부를 하였지만, 함께 할 수 있어서 전혀 힘들지 않았고 항상 재밌었다. 그 친구들 덕분에 스스로 더 열심히 해야겠다 자극도 많이 되고, 많이 배우고 성장할 수 있었다.

1️⃣ 숫자로 보는 식스샵 생활

💡 1년동안

4개 의 셀

154개 의 Pull Requests

14개 의 프로젝트

3개 의 세미나

5개 의 스터디 모임

한 해를 되돌아보니 생각보다 2020년에 계획하고 생각했던 것을 많이 이루지 못해 아쉬운 점이 많이 남았던 2021년이었다. 이렇게 2021년 활동을 정리하다 보니 후회없이 열심히 살아온 것 같아서 스스로에게 수고했고 앞으로 더 열심히 하라고 말해주고 싶다. 또한 어떻게 하면 더 멋진 2022년을 보낼지 기대가 된다.

취준생 입장에서 바라본 식스샵은 제가 평소에 좋아하고 해보고 싶었던 이커머스와 웹에디터라는 도메인을 모두 가지고 있는 매력적인 회사였다.

식스샵에 다니면서 이커머스와 웹 빌더 도메인 지식을 경험하면서 고도화된 프론트엔드 기술을 이용하여 챌린징한 문제를 해결하고 싶었다. 그리고 작은 스타트업을 다니면서 모든 조직이 하나의 목표를 바라보며 성장하는 것을 지켜볼 수 있을 거 같아서 크게 끌리게 되었다.

또한 식스샵의 사람들이 일하는 이유인 ‘열심히 만든 것들이 새로운 가치를 창조하는 사람들의 성공을 돕기 위한 것’이라는 점도 너무 매력적인 요소 중 하나였다.

이런 이유로 꼭 식스샵에 들어가서 첫 시작을 해보고 싶었다.

❤️ 식스샵 문화

식스샵은 ‘솔직과 정직’을 가지고 ‘고객 중심적 사고’를 하며 ‘팀과 개인 모두 탁월함을 추구’ 하는 3가지의 메인 문화를 가지고 있다.

이런 업무 문화를 바탕으로 식스샵만의 다양한 문화가 있다.

1) 재택근무

재택근무는 코로나의 영향을 많이 받았다. 평소에는 개인의 집중 업무 시간을 위해 주 1일의 재택근무를 했다. 그러나 코로나 4단계에 준하는 방역지침이 있을 시에는 주 3일 재택을 했다.

평소 집 꾸미기에 큰 관심이 없었는데, 효율적인 재택근무를 위해서 업무공간을 예쁘게 꾸며 보기도 했다.

처음에는 재택 때 왕복 2시간 걸리는 출퇴근 시간이 없어지니 괜시리 집중도 잘되고 쾌적한 환경에서 집중도가 점점 올라가고 능률도 좋아졌다. 하지만 이러한 재택근무도 2~3주가 지나가면서 점차 집중도도 낮아지고 능률도 안 좋아진다는 것을 느껴 나름 재택근무를 더 잘하기 위해 많은 노력들을 하였다.

재택근무지만 출근하는 것처럼 아침에 일찍 일어나서 깨끗이 씻고 옷도 단정히 입고 커피를 사고 다시 집으로 돌아와서 일해보기도 했었고, 업무를 하다 잠시 집중이 끊기면 잠깐 밖으로 나가 바람을 쐬고 다시 돌아오기도 했다. 비록 좁은 집이지만 집 안을 이리저리 돌아다니며 근무환경을 바꿔 보기도 했다.

이런 노력 끝에 어느덧 처음 재택근무를 했던 것처럼 집중도도 좋아지고 능률도 높아졌다.

2) 회의 문화

업무 집중 시간을 최대한 늘리기 위해 모든 회의를 금요일에 진행했다.

이전에 회사 규모가 20명 남짓 할 때에 진행됐던 회의는

1) 매 스프린트(2주)마다 하는 다른 팀이 어떤 일을 하는지, 어떤 성과를 냈는지 확인 할 수 있는 전사 회의 2) 업무 계획을 수립하고 공유하는 셀 스프린트 회의 3) 최고의 프론트 팀을 구성하기 위해 노력하고 꿀팁도 나누는 프론트 엔드 회의 4) 1달에 1번 셀체계에서 다른 개발자들이 어떤 개발을 하고, 어떤 고민이 있는지 소통하고 최고의 제품을 만들기위해 노력하는 개발자 회의 5) 디자이너와 프론트엔드가 좀 더 멋진 협업을 통해 높은 능률을 내도록하는 디프(디자인,프론트) 회의 6) 최신 기술 트렌드와 관심사를 공유하는 개발자 세미나 이렇게 총 6개의 공식 회의를 하였다.

사람이 50명대로 많아짐에 따라 회의 방식도 많이 바뀌게 되었고, 없어진 회의나 간격이 조정된 회의도 있다.

첫 직장이어서 그런지 이런 회의 문화는 처음에 익숙지 않았다. 그러다 보니 매 회의가 긴장되고 떨리고 어떤 얘기를 해야 할지 고민도 되었었다. 이런 걱정이 커지고, 어떤 회의가 한두 시간이 흐르는 것을 보며, 정말 이런 회의가 나한테 도움이 되는 회의 일지 회의감이 커졌었다.

그래서 처음에는 적응이 안 돼서, 친구들한테 너희 회사도 이렇게 회의를 많이 하냐고 물어보기도 하였고, 직장 생활을 오래 해오신 부모님께 여쭈어 보기도 하였다. 그러자 부모님께서는 원래 회의에서 많이 배울 수 있고, 다른 사람들 앞에서 자기의 생각을 뚜렷하게 전달하고 잘 흡수하는 건 중요하다고 조언해 주셔서 다른 마음가짐으로 회의에 임했었다.

그때부터 모든 회의를 최대한 적극적으로 임하고, 준비도 잘해가니 점점 나에게 있어서 모든 회의는 배울 점이 많아지는 회의, 유익한 회의로 바뀌어 나가고 있었다.

3) 전직원 CS (customer service) 문화

[식스샵 CPO님 블로그에서 가져온 사진]

입사와 동시에 OJT 와 더불어 CS 교육을 받는다.

CS 업무를 통해 고객의 목소리를 직접 들을 수 있는 서비스 운영 업무에 전 직원이 참여한다.

이러한 상담 업무를 수행함으로써 모두가 고객의 불편, 궁금증에 직접 답하는 문화는 고객 중심 사고의 바탕이 되어주고 있다.

고객 상담은 휴일 포함 매일 오전 9시 부터 밤 11시까지 이어지며 서비스 운영 팀원을 제외한 나머지 구성원들은 영업일 중 오후 채팅, 이메일, 전화 상담과 야간, 휴일 이메일 상담 업무를 로테이션으로 돌아가며 참여 중이다. (다음날 이에 따른 대체 휴가가 제공된다.)

전 직원이 CS 업무에 참여하는 것은 처음에는 너무 낯설고 고객들을 대하는 게 어려웠다. 특히 기능적 질문에서, 하나의 프로덕트를 만들더라도 다양한 동료들이 함께 만들어가는 식스샵이기 때문에 내가 참여하고 만들지 않았으면 모르는 기능들이 많아, 처음에는 개발자지만 기능적 설명을 못하는 부분에서 부끄러움을 느꼈지만 점차 그런 기능 들을 CS 업무를 통해 하나씩 배워나가기도 하였다.

또한 가끔 주시는 고객들의 따뜻한 한마디가 큰 힘이 되기도 하고, 고객들이 진짜 필요한 기능은 무엇인지, 어떤 불편함을 가지고 있는지 직접 들으니 앞으로 좀 더 좋은 프로덕트를 만들겠다는 의지도 생겼다.

4) 개인의 성장을 중요시하는 문화

식스샵은 개인의 성장을 매우 중요시한다. 그러다 보니 개인 성장에 필요한 강의, 책을 모두 지원해 준다.

또한 회사에서 스터디를 할 경우 저녁식사비도 지원이 된다. 회사에 다양한 스터디 모임이 있고, 심지어 책 읽기 모임, 운동 모임도 있다.

5) 팀 내 투명한 정보공유 문화

식스샵 내에서는 #403_개발_정보공유 를 이용하여 회사내에 다양한 정보를 투명하게 공유하고 있으며, 스프린트마다 진행되는 회의에서 월간 재무 현황이니 월 거래액에 영향을 미치는 요소들을 자세히 공유해 준다.

또한 개발적인 부분에서도 #403_개발_정보공유 라는 채널을 이용하여 개발 생태계에서 화수분처럼 쏟아지는 정보들도 역시 지속적으로 정보를 공유하고 있다.

이러한 정보들이 공유되기만 하고 적용되지 않으면 무용지물이 될 수도 있지만, 공유된 정보를 바탕으로 다 같이 모여 세미나를 시청하기도 하고, 실제로 해당 내용을 스터디 하기도 한다.

6) 가족같은 분위기, 친구같은 동료

식스샵은 ‘다른 회사도 이렇게 회사원끼리 친한가?’ 라는 생각이 들 정도로 서로를 챙겨주며 돈독하게 지내는 문화가 있다.

’친한게 문화인가?’라고 생각할 수 있지만, 다른 회사의 직장인에게 들었던 회사 분위기와는 다르게, 식스샵에서는 확실히 구성원끼리 친하고 가족같다는 느낌을 강하게 받았다.

기억에 남는 일화로는, 어느날 몸 컨디션이 굉장히 안좋았던 날이 있었다. 퇴근 시간 즈음 식스샵 동료분께 이렇게 걱정이 담긴 슬렉메세지를 받은 적도 있었다.

또한 다같이 퇴근해서 맛있는거 먹으러 가는날도 있고, 주말에 만나 같이 공부하거나 취미 생활을 같이 즐기러 갈때도 있다.

그외에도 워크샵, 플레이샵, 문화의날 등 다양한 문화가 있었지만, 코로나 때문에 이번 년도에는 워크샵만 진행하였다.

이번 워크샵에는 좀 더 서로 잘 이해하고 조화롭고 평화롭게 일하고 능률을 올리기 위해 버크만 테스트를 통해 서로의 특징과 강점을 알아보는 시간을 가졌고, 마니또를 정해서 선물 증정식과 또한 이달의 상도 수여했다.

사실 이런 문화들은 첫 직장이여서 비교할 대상이 없어 좋은 문화인지 나쁜 문화인지 비교할 수는 없었지만, 하나 확실히 깨달은 건 좋은 문화와 좋은 사람들과 함께 일하는건 정말 큰 행운이라 느꼈고, 식스샵은 충분히 그럴만한 곳이라는 생각이 들었다.