너드팩토리 블로그

ICT인턴십 후기

Fri, 20 Jan 2023 00:00:00 +0000

안녕하세요! 22년도 하반기 ICT 인턴십에 백엔드 엔지니어로 참여한 포토, 노아입니다. 길다면 길고, 짧다면 짧은 4개월 동안의 인턴십이 끝났습니다! 무사히 끝낸 저희와 옆에서 적응할 수 있도록 도와준 팀원들에게.. 박수~~~! 👏 그동안 너드팩토리에서 ICT인턴십을 진행하면서 보고, 듣고, 경험했던 것들을 적어보고자 합니다 🎉

참여 동기

노아

저는 정보보안을 전공해 보안 전문가로서 꿈을 키우며 전공 공부를 즐겨 하고 있었습니다.

그러나 정보보호병으로 복무하며 실무를 직간접 체험하고 나니 “보안을 계속하는 게 맞을까?” 하는 진로 고민이 들었습니다.

특히 졸업을 앞둔 4학년 복학이었기에 효과적으로 진로를 탐색할 수 있는 경험을 하고자 했고, 마침 ICT인턴십이라는 학기를 병행하면서 실무를 수행할 수 있는 프로그램의 존재를 알게 되어 참여하게 됐습니다.

불편을 해소할 수 있는 도구 만드는 것을 좋아했기 때문에 개발도 도전해보자! 라는 마인드로 세 개의 회사 선택지 중 하나는 개발을, 두 개는 보안을 지원했고 매우 빠른 속도로 너드팩토리 인턴이 되었습니다! (?)

많은 개발 회사 중, 하나의 개발 회사로 플랜아이를 선택했던 이유

ICT 인턴십 프로그램을 초기부터 진행해온 회사로 축적된 인턴 시스템이 갖춰져 있을 것으로 기대되었습니다.
너드 블로그에 게시된 ICT인턴십 후기들을 보았을 때 너드의 문화가 긍정적으로 느꼈습니다.
플랜아이의 “정보를 쉽게 표현하고 명확하게 전달하는 것을 가장 잘 하는 회사” 문구가 와 닿았습니다.

포토

‘인턴십을 해야겠다’라는 생각을 한 건 오직 졸업 학점을 채우기 위해서였습니다. 학교에서 기업과 직접 연계해주는 인턴십에 참여하려던 중 ICT인턴십을 알게 되었습니다.

사실 본래 참여하려던 인턴십은 기업별로 선배들의 후기가 천차만별이었고, 실무와 가까이 경험해볼 수 있는 경우는 극히 드물어 보였습니다. 그에 반해 ICT인턴십은 학점을 부여받으면서 실무와 관련 있는 인턴십을 할 수 있었고, 다양한 지역에서 기회가 열려있었습니다. 더불어, 여러 기관이 연계되어있어서 인턴십 관련 관리가 잘되지 않을까? 하고 생각했고 위 점들이 맞물려 참여하게 되었습니다!

대전이쥬 ~

대전에 연고도, 아무것도 없는 제가 여러 지역 중 대전 소재를 선택한 이유는 ,, 그냥 대전을 좋아해서입니다! 사실 노후에 오려고 했는데,, 시기가 너무 앞당겨졌네요 🫢

플랜아이를 선택한 이유

그러면 왜 플랜아이였나? 너드 팩토리였나? 라고 물어보신다면, 회사 선택에 있어 중요하게 생각한 몇 가지 중 하나는 회사 규모였습니다. 인턴 경험을 통해 회사는 어떻게 돌아가는지, 업무는 어떤 식으로 진행되는지, 타 부서와 협업은 어떻게 하는지 등 전반적인 회사 프로세스와 조직문화를 얻어가고자 했습니다.

그리고 서비스하는 제품들을 보며, 핵심 가치와 미션을 잘 수행하고 있다는 느낌을 받았습니다. 제일 중요한 건! 회사가 지향하는 가치와 미션이 제 가치관과 부합한다고 생각되었습니다. 😀 oO(이건 운명…?)

관리되고 있는 멋들어진 회사 홈페이지에서 좋은 이미지를 받았고, ICT인턴십 프로그램에 참여한 이력이 꽤 되었기에 인턴을 위한 프로세스가 있을 것으로 생각했습니다.

무엇을 했을까요?

첫날은 회사 전반적인 이야기를 들을 수 있던 온보딩 교육을 받은 후, 개발환경 세팅을 하다 끝났습니다. 정말 새롭고 정신없었죠,,

이후 이슈가 좀 있었지만, 과제형 코딩테스트를 받고 코드 리뷰 후 업무를 할당받았습니다.

저희가 맡았던 첫 업무는 실제 서비스되는 개인화 추천 서비스 ‘AIVORY Q’ 버그 수정이었습니다. 추천 기본정보가 표시되지 않는 버그를 수정해야 하는 일로, 지금은 간단한 일이라는걸 알 수 있지만 당시엔 실서비스의 코드를 건드린다는 게 겁도 나고 어디서부터 해야 할지 몰라서 선뜻 손대지 못했던 기억이 있습니다.

AIVORY Q는 Django, Elasticsearch, Docker, MySQL 등의 기술 스택을 사용하고 있습니다. 위 도구들을 처음 사용하는 것이라 학습하는 데 어려움도 있었지만 팀원들의 독려와 이야기 나눌 수 있던 인턴 동기가 있어서 해낼 수 있었습니다. 그리고! 처음 이슈를 해결하고 개발 서버에 반영되는 걸 눈으로 확인한 날은.. 🌟 무지 뿌듯했습니다 🥹

이 경험을 시작으로 스프린트에 참여해 AIVORY Q의 여러 이슈를 처리했습니다. 저희가 처리했던 이슈는 다음과 같습니다.

누적 개인화 추천 수 리스트 값 표기 수정
종료된 추천 그래프 날짜 표기 문제 수정
세그먼트 별 데이터를 볼 수 있도록 수정
노출될 추천 상품 리스트 API 문서 작성

이 이슈들을 처리하면서 백엔드 챕터 내에서 Django 테스트 모듈을 활용해 TDD를 적용해보자는 의견이 나왔습니다.

좋은 경험으로 생각됐기 때문에 TDD 방법론을 따라 단위 테스트를 진행하며 이슈를 대응했습니다. 처음으로 테스트를 먼저 하고 구현하는 경험을 하게 되었는데, 허점이 생길 수 있는 부분을 사전에 방지할 수 있는 장점이 있었습니다.

단점으로는 테스트 코드를 먼저 작성하고 실제 제품화를 위한 코드작성을 후에 하기 때문에 일반적인 경우보다 시간이 더 소요된다는 점이었습니다. 어떤 경우건 100% 정답은 없어서 작업에 따라 유연하게 적용시키면 될 것 같습니다. 저희는 위 작업들을 진행하면서 테스트의 중요성을 느꼈습니다.

치명적인 이슈는 개발자 스스로도 바로 인지가 가능하지만, 사소한 버그들은 바로 인지가 되지 않습니다. 너드에서는 팀원끼리 테스트 해주는 문화가 활발히 자리해있었고, 보다 나은 제품을 개발하고자 하고 있습니다.

이후에는 웹 서비스 데이터 분석 솔루션 ‘VODA’를 분석하고 문제점과 해결방안을 도출했습니다. 제품 분석이 처음이고, 초기엔 목표와 방향성을 잡지 못해서 어려움을 겪었습니다. 이를 해소하기 위해 소장님과 계속 미팅을 진행하면서 방향성을 잡았습니다.

제품 구성을 잘 파악했는지 확인하고 문서화하기 위해서 UML을 작성했습니다. 도식화된 자료를 바탕으로 설명해 보며 이해도를 점검할 수 있었고, 코드 분석을 진행할 때는 레포지토리 별로 분담 후 서로 분석한 것에 대해 질의응답 하며 크로스체크할 수 있었습니다.

VODA 분석은 이름만 익히 듣고 생소했던 AWS, NginX, 배치 스케줄러 설정, 크롤러 등을 자세히 들여다볼 기회였습니다. 제품을 서비스하기 위해 구성된 AWS 서비스들의 역할과 연결고리들을 알 수 있었습니다. 이들을 고려하면서 문제점에 대한 해결방안을 도출해내야 했는데, 클라우드 비용 산정 기준과 효과적인 AWS 구축법을 몰라 꽤 헤매기도 했습니다. ~~(물론.. 지금도 어렵습니다)~~

분석을 진행하면서 제품 분석할 때는 어림짐작으로 넘어가는 것은 절대 금물이라는 것을 알게 되었습니다. 어떠한 데이터를 어디에서 수집해서 어떻게 쓰이고 하는 사소한 부분부터 큼직한 제품의 전반적인 흐름까지 파악해야 했습니다. 제품 분석이 잘 돼야 이후 코드 분석, 제품 개선을 위한 해결방안 도출까지 잘 도달할 수 있기 때문입니다.

앞서 처리한 AIVORY Q의 이슈 처리는 코드 스킬을 향상하고, 인프라에 적응할 수 있도록 하는 경험이었다면 VODA 분석은 코드 스킬 외의 기획에 대한 시각을 넓혀주는 경험이었습니다.

서로의 경험과 지식을 나누는 기술 세미나도 참여했습니다. 너드 멤버 개개인의 분야에서 얻게 된 지식과 경험을 어떻게 하면 너드에 도움이 될 수 있을지 공유하는 시간이었습니다. 저희는 각자 학부생 때의 전공을 살려 보안에 관련한 주제를 선정, 발표했습니다.

노아 - 암호

포토 - Python 시큐어 코딩

( 다른 너드들의 기술세미나 발표 주제는 이 기술블로그에 잘 포스팅되어있으니 한 번 둘러보시길 바랍니다! 😎 )

🔎 배운 점 & 소감

애자일을 지향하고 있는 너드에서 새로운 경험을 많이 할 수 있었습니다.

매일 아침 데일리 스크럼을 진행하며 진행 사항과 특이 이슈를 공유합니다.

또, 애자일하게 일하기 위해서 다양한 도구를 활용하여 소통하고 협업하고 있습니다.

슬랙, 노션, 지라, 깃헙 등 처음 들어보는 것부터 익히 들어본 제품까지 사용해 볼 수 있었습니다.

노아

너드 문화의 전반을 잘 설명하는 문장을 추리자면 곳곳에 있는 너드팩토리 가훈이라고 생각합니다.

애자일하게 일하기를 추구하는 너드팩토리에서는 일단 해보고, 안되면 이를 경험 삼아 더 나은 방법을 선택할 수 있도록 독려합니다. 원래는 실패를 두려워하는 사람 중 한 사람이었으나, 실패는 값진 경험이라고 생각하고 두려워하지 않게 됐습니다.

또한 코드를 작성하는 것이 기승전결을 고려하는 하나의 글을 쓰는 것과 비슷하다고 느꼈고, 이 과정에서 모델링의 중요성을 깨닫는 계기가 됐습니다.

학부에서 많은 공부를 하지만 결국 실무에 적용해봐야 적성에 맞는지 알 수 있다는 걸 경험한 시간이었습니다. 개발자로서의 진로 고민이 든다면 기회가 가득한 팀, 너드팩토리에서 경험해보시는 걸 추천해 드립니다 ^-^b

포토

실서비스의 코드 이슈를 처음 처리하게 되었을 때는 ‘내가 해도 되나?’ 덜컥 겁이 났었는데, 이러다 보니 꽤 시간이 소요됐습니다. 지금은 일단 시도해보자! 라는 태도로 극복 중입니다. 아무것도 하지 않으면 아무 일도 일어나지 않으니까요. (그런데 데이터를 몽땅 날리지 않는 이상 큰일은 안 났을 것 같네요.🧐)

물론 회사와 부서마다 다르겠지만, 실무에서 일하는 방식과 분위기도 알 수 있었습니다.

저는 평소 한 사안에 대해서 넘겨짚거나 대충 이렇겠지~ 하기도 하고, 좋은 게 좋은 거지라는 태도를 가지고 있는데 이게 개발 관점에서는 독이 되는 태도인 것을 알게 되었습니다. 프로그래밍할 때는 데이터 기반으로 생각하고 정확하게, 특히 정책은 명확하게 해야 한다는 것을 깨닫게 되었습니다.

수많은 인턴 후기에 보이는 멘트인 ‘학교에서 배운 것이 이렇게 쓰이는구나’를 생각하게 되다니! 굉장히 뻔한 말 같지만 직접 와서 보고 듣고 경험하니까 크게 와닿았습니다. 또, 그 많은 인턴 후기를 보고 너드팩토리에 와서 느낀 점은 인턴에게도 신입에게도 제한 없는 기회가 열려있다는 거였습니다. 사실 처음 오게 되었을 때는 ‘내가 할 수 있을까?’ 지레 겁을 먹었는데, 상황에 던져지니까 뭐라도 하게 되긴 하더라고요!

소장님께서 저희한테 첫 회사 생활을 너무 좋은 데로 와서 이후 다른 곳으로 갔을 때가 걱정이라고 말씀해주셨는데,, 너무 공감되는 말씀이었습니다. 어쩔 수 없죠.. 저와 플랜아이가 서로를 책임져야겠어요.

⭐여담⭐

노아

출퇴근이 멀다는 건 정말 힘듭니다. 타지역에서 오신다면 꼭 가까운 곳으로 자취하세요. 추가로 공부할 체력이 남지 않아요..

아…. 이건 오면 이해하실 텐데 추후 제 자리에서 “뒷집”을 속삭이시면…. 놀라운 일이 벌어집니다.

포토

인턴 생활 중 지내던 곳이 너무 멀었어요….. 게다가 퇴근길이 극악! 전 환승을 해야 했는데 버스 20분 거리가 퇴근길엔 4~50분이 되는 마법이 펼쳐져요.

참고로 제 출근길 버스 밖 풍경은 … 아시겠죠? 출발한 지 20여 분 지난 뒤랍니다.. 사진은 잘 나왔네요..

그리고!! 중요한 팁이 하나 있어요 뻐근한 날엔 안마의자와 둘만의 오붓한 시간을 보낼 수 있답니다. 사실 뻐근하지 않아도.. 회사가 허락한…. 안마의자와 데이트

우리 서비스에 데이터를 어떻게 보여줄까?

Tue, 04 Oct 2022 00:00:00 +0000

성적이 더 좋은 학생이 누구일까요?

평균 점수만 놓고 본다면 유지하는 학생이 더 좋지만 성장하는 모습을 보이는 학생도 나쁘다고는 볼 수가 없습니다.

이것처럼 데이터를 볼 때에는 해당 지표의 숫자 뿐아니라 데이터의 추이,

즉 시각화를 통한 흐름을 보는 것이 중요합니다.

해서 데이터 시각화에 대해 간단히 보고 우리 서비스에 어떻게 적용했는지를 공유해보려고 합니다.

데이터 시각화란?

수많은 데이터 속에서 유의미한 정보를 찾고, 시각화 하는 것
데이터를 한 눈에 파악하기 좋게 만드는것
데이터의 패턴, 비교 등을 파악하고, 시각화를 통한 인사이트를 얻을 수 있다

데이터 시각화에서 중요한 것

데이터

당연하게도 데이터를 보여주려면 데이터가 필요
더 나아가 풍부하고 유용한 데이터가 필요하다.

독자

흥미와 필요 정도를 고려해서 독자의 범위를 선정해야 한다.
독자가 어떤 정보를 원하는지 요구 사항(+느낀부분들)을 파악해야 한다.

➡️ 최근 진행했던 내부, 외부 QA가 첫 걸음으로 보임

구성

내용 구성은 데이터에서 출발하는 것과, 분석에서 출발하는 것으로 나뉜다.

데이터에서 출발
- 데이터에 대한 복잡한 분석 과정이나, 의미 해석 없이 데이터에서 바로 측정 가능한 수치 값을 이용해서 시각화 하는 방식
- 데이터 그 자체를 내용으로 구성하게 된다.
- 주로 수치정보를 필요로 하는 대시보드, 모니터링 시스템에서 사용한다.
- 예 : 클릭률, 모바일 또는 pc 사용률 등
분석에서 출발
- 데이터에서 보이는 양상으로 소결을 만들며, 데이터 분석과 증명을 반복하고 의미있는 결론을 도출해서 시각화 하는 방식
- 분석으로 도출된 결론과, 그 일련의 과정을 내용으로 구성하게 된다.
- 분석 과정과 결론을 시각화 하기 때문에, 주로 스토리 텔링 방식으로 진행된다.
- 예 : 보다의 미래 예측과 관련된 지표, AB 테스트에서 나온 지표, 추천 효율 지표 등

➡️ 단순한 데이터 및 시각화 제공보다는 이를 통해 활용할 수 있는 지표를 제공하는게 더 유의미하다고 생각됨

+ 좋은 데이터 시각화라고 한다면?

👍 심미성과 명료함을 두루 갖춘, 명료하고 보기 좋은 시각화가 좋은 데이터 시각화다.

심미성과 명료성 중 우선 순위를 따져야 한다면 명료성을 우선하자.
주제에 따른 필요한 정보만을 보여주도록 하자.
인지를 해치지 않는 적절한 시각적 구성을 가지도록 하자.

시각화에 활용되는 컬러

색을 활용하여 데이터를 구분하거나 값을 표현하고 특정 부분을 강조하기도 합니다.

1. 정성적 색상 스케일(qualitative color scale)

질적 팔레트로 불리기도하고 순서나 우선순위 없이 튀는 색상 없이 서로 동등하게 치부되는 색상(범주에 활용)

→ 고객군 비율에 활용하여 현재 쇼핑몰에 분포된 고객 비율을 확인하기

2. 순차적 색상 스케일 (sequential color scale)

색에 순서를 부여해서 값의 크기차이 특정한 두 값의 사이 거리를 보여줌(낮은값 → 높은값)

➡️ 히트맵에 활용할 수 있지만 데이터 차이가 크지 않을 경우 눈에 읽히지 않을수 있을 것 같음

3. 발산형 색상 스케일 (diverging color scale)

두개 공통의 중간점을 연결한 것으로 데이터 범위의 양쪽 끝에서 중간 범위 임계값과 극단값을 동일하게 강조

➡️ 2번 형태의 색상보다는 발산형을 활용하면 보다 데이터 차이를 한눈에 볼 수 있을 것으로 판단됨 추후 VODA 사용자 시간대별 그래프에 활용하기

그래서 서비스에는 어떻게 적용하면 좋을까?

초기 보리큐 디자인

대시보드라고 하기엔 다소 단조로운 형태
개인화 추천 리스트를 통해 볼 수 있는 데이터가 한정되어있음
클릭률과 구매율은 이어지는 지표지만 나뉘어있어서 한눈에 지표의 추이가 보이지 않음

추천 분석을 클릭 했을 때 우측 그래프가 바뀐다고 상상이 잘 안됨
카드 외부에 차트가 있기 때문에 연결된 지표라고 보이지 않음
추천 이름, 기본정보, 추천 분석의 디자인이 통일되지 않은 형태
전체적인 색감이 흐릿하여 명확하지 않음 → 자신감이 없어보임

QA를 통해 얻은 제안들

디자인 관련

제안하고 싶은 형태

추천과 고객군을 나누어서 지표를 확인하자
클릭률과 구매율처럼 연결되어 볼 수 있는 지표는 하나의 차트로 확인하자
중요한건 이목을 끌 수 있는 대시보드가 필요하다 → 생동감있는 화면

👉 고객군 별 추천 이용률의 막대 차트 활용 이유
 : 여러 항목의 수량을 비교하는데 효과적이며 집단간의 데이터 차이(최고, 최저)를 표현하기에 적합함

👉 고객군 별 비율의 도넛 차트 활용 이유
: 각 부분이 차지하는 비율을 보여주기에 적합함
: 색상은 컬러브루어 Set2 발산형태를 적용(그래프지만 눈에 띄지 않고 자연스러운 색상)

👉 추천 지표의 꺾은선 차트 활용 이유
: 시간에 따른 데이터의 변화를 막대그래프보다 확인하기에 적합함

개인화 추천 관리

드롭다운 형태보다 모달로 안정감있게 보는게 더 중요하다고 판단
마찬가지로 생동감을 함께 넣어주자 → 아이콘 및 색상 변경 부분

👉 필요한 정보만 보여주자
→ 데이터가 없는 경우는 제외하고 있는 부분부터 매끄럽게 보일 수있도록 하자
→ 꺾은선 그래프 : 해당 추천이 각 날짜별 어떤 형태의 추이 파악에 막대그래프보다 효과적임

  클릭률, 구매율과 추천 이용률은 따로 나누어서 보여줄 필요가 있을것 같음(아직 고민중)

개인화 추천 분석(새로운 부분)

개인화 추천을 보여주는 것도 중요하지만 어떤 고객군이 어떤 페이지에서 어떤 추천 알고리즘에 대한 활용도를 판단하는 것도 중요하다

필터를 통해 리스트를 정렬해서 보기 : 고객군별 , 적용 페이지별 , 추천 알고리즘별
VODA의 월간 리포트처럼 추천 지표의 결과와 예측을 전달해줄 수 있으면 좋겠다.

아쉬운 부분

보리큐 제품 명과 BI가 확정된 상태가 아닌 것
알파버전 디자인시 선택한 컬러의 대비감이 다소 떨어진다는 점 화면 명암 계산할 경우 색감이 어두워져 전체적인 분위기가 다운되는 문제 발생
새로운 BI를 제작하고 해당 컬러를 통해 차트에 활용할 수 있는 색상을 뽑아 사용하고 싶다.

TDD 적용하기 (Python Django)

Tue, 20 Sep 2022 00:00:00 +0000

1. 개요

‘TDD(Test-Driven-Development) 개발을 적용하자’라는 의견이 제시됐고 팀에서는 동의했다.

하지만, 테스트 코드를 통해 테스트를 진행해본 경험도 적고 TDD가 무엇인지도 리서치가 필요했다.

길을 잃고 또 다시 TDD 적용이 무산되는 것을 지켜만 볼 수 없었기에

직접 적용해보고 공유하기 위해 이 글을 작성했다.

출처: https://wooaoe.tistory.com/33

2. 사전준비

추천 이름 변경 API 개발이 필요한 상황이다.

우선 API에 필요한 기능을 나열해보자.

어떤 테스트 코드를 작성해야하는지 감 잡는데 도움이 된다.

지도 없이 보물을 찾는건 쉽지 않은 일이다.

API를 호출할 수 있는 url이 있다.
header로 테넌트 값을 받는다.
- 해당 테넌트가 있는지 확인한다.
필수 argument인 ak(API 키)와 name(바꿀 이름)을 받는다.
동일한 이름으로 존재하는 추천이 있는지 확인한다.
ak를 기반으로 추천 정보를 가져온다.
이름을 수정한 뒤, 저장한다.

3. 개발

TestCase와 APITestCase로 나뉘어 작성되어 있다.

함수인지, API 호출과 관련된 기능인지에 따라 구분지었다.

APITestCase

API를 호출할 수 있는 url이 있다.
- API 호출을 테스트하기 때문에 APITestCase를 사용했다.
- 모든 기능을 다 만든 뒤, 통합 테스트 단계에서 이 class를 수정할 예정이다.
1. 테스트 코드 작성

API가 존재하지 않는 상태에서 실패하는 테스트 코드 작성

결과는 당연히 실패

2. 실제 코드 구현

테스트 코드를 통과하는 코드 구현

성공!

refactor 할 거리가 없는 매우 단순한 코드이기에 다시 red로 돌아간다.

이렇게 실패 테스트 코드 작성, 성공 실제 코드 구현, 리팩토링을 반복하면 된다.
header로 Tenant 값을 받는다.

1. 테스트 코드 작성

선 테스트 코드

2. 실제 코드 구현

후 구현
필수 argument를 받는다.

1. 테스트 코드 작성
- 이전 작업으로 인해 header 값도 있어야한다.
2. 실제 코드 구현
- 중복이 있지만, 우선 만든다.
3. Yellow
- argument 검사로 인해 이전 테스트 코드가 실패하게 된다.
  - 동일한 내용이 포함된 테스트가 있기 때문에 없애준다.
- 중복된 코드 및 코드 구조를 리팩토링한다.
header 검사 코드에는 argument 확인 로직이 없어 실패한다.

중복을 없애고, 유효성 검사 로직을 추가했다.

성공

TestCase

동일한 이름으로 존재하는 추천이 있는지 확인한다.

1. 테스트 코드 작성

이미 있는 이름 → True, 없는 이름 → False

2. 실제 코드 구현

objects.get()은 값이 없으면 에러가 발생한다.

3. 리팩토링
해당 Tenant가 존재하는지 확인한다.
- tenant_check() 함수는 기작성된 함수이므로, 테스트 코드만 작성해준다.
ak를 기반으로 추천 정보를 가져온다.

1. 테스트 코드 작성

2. 구현

테스트 통과
이름을 수정한 뒤, 저장한다.

1. 테스트 코드 작성

2. 구현

잘 된다.

이후 API를 테스트하는 코드를 작성하고

기작성된 코드를 리팩토링해, 하나의 API로 구성해서 API 통합 테스트를 진행한다.

API 호출과 결과 확인

성공

4. 회고

테스트 코드

TDD로 개발하는 것과 더불어 테스트 코드를 작성해서 테스트를 진행하는 것도 처음 해봤다.

개발중에 데이터 생성, 수정 등 확인하는데 귀찮거나 시간이 오래 걸리는 부분을 편하게 테스트 할 수 있었다.

적용 시기

TDD는 개발 초기나 아키텍처를 뒤엎는 경우에 적용하는게 좋아보인다.

테스트 코드가 없는 기작성 코드에 대해 TDD를 적용하는건 불편할 것 같다.

작업 시간

아직 익숙하지 않은 사이클로 개발을 했기 때문에 바로 코드를 구현하는 것보다 완성되는 시간은 늦었다.

하지만, 테스트 코드를 통해 리팩토링도 동시에 진행하면서,

추후 발생하는 이슈나 해당 코드를 이해하는데 걸리는 시간을 줄여줄 수 있다는 이점 덕분에 충분히 적용할 가치가 있다.

만약 TDD에 익숙해진다면, 전체적인 시간으로 봤을 때 많은 이점이 있을 것 같고,

팀에서 발생하는 휴먼 이슈와 불화 또한 줄일 수 있을 것 같다.

정답을 알려줘

TDD는 개발 방법론인 것이니 ‘무조건 이렇게 해야한다’는 정답은 없고 생각한다.

우리식으로 하는게 우리의 개발 문화다.

이상 개발 문화에 TDD를 적용하기 위한 첫 발걸음을 내딛었다.

나만 열심히 해서 이뤄지는게 아니고 모든 팀원이 노력해야 비로소 완성된다고 생각한다.

(1인 개발자인 조직이라면 가능할지도..)

자연어처리 모델을 활용한 개인화 추천시스템

Thu, 11 Aug 2022 00:00:00 +0000

여는 글

오늘은 주로 자연어 처리 분야에서 사용하는 기법을 개인화 추천 분야에 어떻게 적용하는지에 대해 알아보겠습니다!

출처 - 카카오 기술블로그

1. 개인화 추천 기술란?

먼저 예시를 들어보겠습니다. 아래는 인터넷 쇼핑몰에서 Best 추천 상품을 받아보는 화면입니다.

가장 앞단에 추천되고 있는 김치에 대해 평균적으로 기대할 수 있는 구매율을 N%라고 계산했을 때, 이는 모든 사람에게 동일하게 기대할 수 있는 값은 아닙니다.

출처 - 아자몰

예를들어, 사용자1은 평소에 김치 소비를 많이하는 편이고, 매번 김치를 사먹기때문에 이 상품을 보자마자 클릭 할 가능성이 높은 편입니다. 반면 사용자2는 김치 소비가 적은 편이고, 집에서 직접 김장을 하기때문에 이 상품을 보더라도 구매(심지어는 클릭조차)하지 않을 수도 있습니다.

이처럼 각 개인별 각 상품에 대한 기대 구매율을 계산하고 기대 구매율이 가장 높은 상품들을 맞춤형으로 제시해 주는 것이 개인화 추천 기술이라고 합니다.

다양한 개인화 추천 방법론이 있지만 그 중에서 자연어처리에서 주로 사용되던 기법인 토픽 모델링을 개인화 추천 시스템에서 어떻게 적용하는지 알아보겠습니다.

2. 토픽 모델링이란?

배경

기계 학습 및 자연언어 처리 분야에서 주로 사용하던 비지도학습 알고리즘

위키 정의

문서 집합의 추상적인 “주제”를 발견하기 위한 통계적 모델 중 하나로, 텍스트 본문의 숨겨진 의미구조를 발견하기 위해 사용되는 텍스트 마이닝 기법 중 하나이다.

(출처 - 위키 백과 토픽모델링)

컨셉

단어 관점 출처 - 강필성 교수님 강의 영상
1. 특정한 문서의 집합(Corpus)으로부터 사전에 정의된 K개의 주제(Topic)를 만들어냄
2. 각 Topic에 대응하는 높은 빈도의 Corpus의 단어들을 할당함
문서 관점 출처 - 강필성 교수님 강의 영상
1. 각 개별적인 문서가 어느 토픽을 많이 포함하고 있는가?
2. 각 문서에서 특정 토픽이 차지하는 비중 산출

정리

개별 토픽 관점
1. 어떤 단어들이 주로 빈번하게 등장하는가?
2. 주요 어휘들이 무엇인가?
개별 문서 관점
1. 각각의 문서에는 각 토픽들이 얼마만큼의 비중을 가지고 섞여있는가?

토픽 모델링은 비교적으로 오래된 기법 중 하나지만, 정답이 있는 데이터가 없어도 문서들 내에 속한 단어들만으로도 학습할 수 있기 때문에 지금까지도 많이 사용되고 있는 알고리즘입니다.

(* 고려대학교 강필성 교수님 강의 영상을 참고하시면, 토픽모델링 알고리즘에 대해 더 자세하게 이해할 수 있으니 한번쯤 보시는 것을 추천드립니다!)

3. 개인화 추천에서의 토픽 모델링

위 방식과 동일하게 토픽 모델링으로 사용자들과 콘텐츠들의 특징을 추출하게 됩니다.

단어들을 바탕으로 한 문서 안의 여러 개의 주제를 찾을 수 있는 것처럼, 상품들을 바탕으로 한 명의 사용자 안에 내포되어 있는 여러 개의 주제를 찾을 수 있다고 볼 수 있기 때문에, 토픽 모델링 기법을 개인화 추천에 적용할 수 있는 것입니다.

출처 - 카카오 기술블로그

용어만 달리하면, 단순히 “문서”, “단어”를 “사용자”, “상품 이용데이터”으로 바꿔서 보면, 아래와 같아집니다.

자연어 처리: 문서들 내의 단어들로 토픽 모델링을 수행한다.

추천 시스템: 사용자들 내의 상품 이용데이터들로 토픽 모델링을 수행한다.

결론적으로 사용자의 행동 데이터를 가지고 토픽 모델링을 수행할 수 있게 됩니다.

그 결과, 위 그림처럼 각 사용자에 대한 주제 벡터를 구할 수 있습니다. 이때, 벡터의 크기 k는 주제(토픽)의 개수이며 각각의 값은 주제에 속할 확률을 의미하게 됩니다.

추천시스템 관점에서 다시 정리하자면, 토픽 모델링을 수행하여 각 사용자별 이용한 상품데이터들이 각 주제(토픽)에 얼만큼의 비율로 속하는지를 판단하고, 이를 통해 개인화 추천을 수행합니다.

4. 예고편

추천 시스템에서 주요한 개념은 사용자가 관심있어 할 상품을 어떻게 정의하냐입니다.

영화 평점과 같이 이미 정답이 정해져있는 데이터가 아닌, 실제 사용자들의 행동 데이터를 분석하여 사용자가 관심있는 상품에 대한 정의를 내려야합니다.

전통적으로 사용하던 협업필터링과 같은 기법들은 사전에 정의된 사용자별 관심 상품들의 정답 데이터가 필요하고, 행동 데이터에서 이를 정의하는 과정에서 다양한 모순이 발생하는 경우가 생깁니다.

예를들어, 최근 한 달간 사용자1이 상품 a를 구매한 이력이 있을 경우, 사용자1은 상품 a에 관심이 있다고 판단하고 있습니다. 그런데 막상 사용해보니 사용자1은 상품 a가 마음에 들지 않았고, 환불과 같은 부정적인 피드백을 돌려주지 않았습니다. 이 상황에서 추천 시스템은 부정적인 피드백이 없었으니 사용자1과 비슷한 구매 패턴을 가진 사용자2에게 상품a를 추천해줍니다.

또 다른 예로, 2번이상 연달아 구매가 발생한 상품b에 관심이 있다고 판단을 할 경우, 매번 인기 있는 상품 몇 가지에 대해서만 추천이 일어나게되어 사용자들은 다양한 추천을 받을 수 없게 됩니다. 또 새로 추가된 신상품들은 추천 받지 못합니다.

위와 같은 모든 시나리오들을 고려하다보면, 로직이 복잡해지고 오히려 불필요한 고민들을 하게됩니다.

다음 포스팅에서는 위와 같은 고민을 덜 수 있도록, 강화학습을 추천 시스템에 이용하는 방법을 소개하겠습니다!

Reference

Probabilistic latent semantic analysis - 위키백과

토픽 모델링 - 위키 백과

고려대학교 강필성 교수님 토픽 모델링 강의 영상 - youtube

카카오 기술블로그

Gatsby를 어떻게 적용할 수 있을까? (+ gatsby에 typescript 적용하기)

Fri, 24 Jun 2022 00:00:00 +0000

들어가며

이번 포스팅에서는 Gatsby.js에 대해서 간단히 소개하고 어떻게 적용할 수 있는지, 우리는 어떻게 적용했고 어떻게 사용하려 하는지에 대해서 소개하려고 합니다. 추가로 gatsby 프로젝트에 TypeScript을 사용하기 위한 개발환경을 세팅하는 내용을 담고있습니다.

Gatsby.js

정적 웹사이트 생성기

Gatsby는 프론트엔드 라이브러리 React를 기반으로 하며 최근 프론트엔드 시장에서 자주 등장하며 빠르게 성장하고 있는 JAM Stack 기반의 정적 사이트 생성 프레임워크 입니다.

JAM Stack과 동작원리

JAM Stack 공식문서에서는 아래와 같이 정의하고 있습니다.

Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

웹 애플리케이션에서 렌더링 할 화면을 pre-rendering 하고 이를 CDN에서 제공하여 빠르고 안전한 앱으로서, 웹 서버를 따로 관리하거나 실행할 필요가 없다.

일반적인 웹사이트는 프론트엔드의 시각화와 백엔드의 데이터를 통해서 웹페이지를 사용자에게 보여주게 됩니다. 위 방법은 페이지를 렌더링할때마다 해당 과정이 필요하기 때문에 페이지를 로딩하는데 시간이 오래걸립니다. 렌더링 + API 통신 단계를 거치기 때문이죠

하지만 Jamstack은 모든 데이터를 서버에서 미리 불러와서 화면으로 만들어 놓은 다음, 사용자가 홈페이지에 접속하게 되면 만들어 놓은 화면을 그려줍니다. 그렇기 때문에 빠른 로딩 속도를 장점으로 가지고 갈 수 있습니다.

이와 같은 장점을 가지고 있는 Jam Stack을 기반으로 하는 대표적인 프레임워크로는 많이 다운로드 된 순으로 Next, Gatsby, Jekyll, Nuxt 등이 있습니다.

우리는 왜 Gatsby를 사용하려고 하는가

1. React.js 기반 프레임워크이다

너드팩토리의 프론트엔드 챕터에서는 React + TypeScript를 가장 활발하게 사용하고 있습니다. 그렇기 때문에 react를 어느정도 다룰 수 있다면 큰 어려움 없이 개발 가능할 것이라 생각했습니다.

2. 성능이 좋다

JavaScript가 실행되면 빈 HTML 페이지 안에 마크업을 추가해주는 일반적인 React SPA(Single Page Application)과는 다르게, 페이지 개발 후 Build를 하는 과정에서 마크업이 생성되기 때문에 SPA 페이지보다 빠르게 페이지를 렌더링 할 수 있습니다.

3. SEO에 유리하다.

위 2번 단락과 이어서 build 과정에서 마크업이 생성됩니다. 그 결과로 페이지 내 모든 콘텐츠가 생성이 되어있게 되는 것이고, SPA과는 다르게 SEO(검색엔진최적화)에 유리합니다.

JAM Stack 프레임워크 다운로드 횟수를 보면 Next.js가 가장 많이 다운로드 되었지만, Next.js는 정적 사이트 생성의 기능도있지만 주로 SSR(Server Side Rendering)을 사용하는 프레임워크입니다. 즉, 서버와 통신을 하며 요청을 받을 때 마다 동적으로 웹사이트를 생성하기 때문에 SEO에 불리하다는 단점이 있습니다.

이와 같은 장점을 가지고 있는 Gatsby는 너드팩토리의 웹사이트의 사용자 행동데이터 분석 도구 서비스 VODA의 소개페이지에도 적용되어 있습니다.

VODA 서비스 소개페이지 ← 클릭

Gatsby 기술 스택을 어떻게 잘 사용할수 있을까

기술 블로그 마이그레이션

지금까지 설명한 gatsby의 장점을 통해서 우리는 gatsby를 통해 기술블로그를 마이그레이션 및 개편하려는 계획을 가지고 있습니다.

기존의 너드팩토리의 기술블로그는 github pages를 이용해 jekyll 기반의 정적 사이트를 배포하는 방식으로 구성되어 있습니다. 따라서 아래의 문제점으로 기술블로그에 대한 지속적인 관리와 커스터마이징이 어렵습니다.

너드팩토리 프론트엔드 챕터는 React 기술 스택을 주로 사용한다.
간단하고 쉽게 사용가능하지만, Ruby 기반인 jekyll의 구조와 Ruby에 익숙하지 않은 이상 커스터마이징에 어려움이 있습니다.
Ruby에 대한 지식(Bundler, Gemfile)이 필요한 경우가 있기에 어려움이 발생할 수 있습니다.

Gatsby에 TypeScript 적용하기

지금까지 설명한 gatsby에 typescript를 통해 개발을 할 수 있도록 개츠비 프로젝트에 typescript를 플러그인을 사용하여 적용해 봅시다.

해당 포스트에서는 아래 버전을 따릅니다.

node version: 16.13.1
Gatsby CLI version : 4.22.0

Install

gatsby-cli install

yarn global add gatsby-cli

프로젝트 생성

gatsby new [프로젝트 이름]

해당 프로젝트에서 typescript install

yarn add gatsby-plugin-typescript

이까지 설치가 완료되었다면 타입스크립트를 사용하기 위해 gatsby 프로젝트에 타입스크립트 플러그인을 추가해주는 작업이 필요합니다

plugins: [
	...,
	`gatsby-plugin-typescript`,
	{
		...,
	},
],

gatsby는 많은 플러그인을 지원하여 확장성이 좋다는 장점을 가지고 있습니다. 만약 내가 필요한 기능이 있다면 플러그인을 추가하면 됩니다! (해당 포스트에서는 타입스크립트 플러그인을 적용하는 것 까지 진행합니다.)

플러그인 추가 후 tsconfig.json 파일을 생성하여 타입스크립트를 활성화 합니다. 해당 명령어를 입력했다면 루트 디렉터리에 tsconfig.json 파일이 생성되며, 주석 처리 되어있는 옵션을 직접 선택하여 변경할 수 있습니다. 해당 포스트에서는 다음과 같이 옵션을 수정하겠습니다

yarn tsc --init

tsconfig.json 파일을 사용하려는 환경에 맞춰 세팅해줍니다.

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "es2016",
    "jsx": "preserve",

    /* Modules */
    "module": "commonjs",
    "baseUrl": "./src",
    "paths": {
      "components/*": ["./components/*"],
      "utils/*": ["./utils/*"],
      "hooks/*": ["./hooks/*"],
      "icons/*": ["../static/icons/*"]
    },
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,

    /* Type Checking */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,

    /* Completeness */
    "skipLibCheck": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

gatsby-node.js 파일에서 webpack config를 추가합니다.

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateWebpackConfig = ({ getConfig, actions }) => {
  const output = getConfig().output || {}

  actions.setWebpackConfig({
    output,
    resolve: {
      alias: {
        components: path.resolve(__dirname, "src/components"),
        utils: path.resolve(__dirname, "src/utils"),
        hooks: path.resolve(__dirname, "src/hooks"),
      },
    },
  })
}
...

여기까지 진행했다면 문제없이 gatsby 프로젝트에 타입스크립트를 적용이 완료되었으며 타입스크립트로 개발이 가능한 상태입니다.

마치며

해당 포스팅을 작성하면서 얼른 너드팩토리 기술블로그 마이그레이션 및 개편을 완료하고 싶다는 생각이 듭니다. 더불어 기술블로그 뿐만 아니라 제품 소개페이지, 너드팩토리 소개페이지 까지 적용해보고 싶습니다.

다음 포스팅에는 Gatsby를 통해 기술블로그를 개편하는 과정을 가지고 돌아오도록 하겠습니다.

Message Queue vs Load Balancer

Wed, 20 Apr 2022 00:00:00 +0000

개요

트래픽을 견디기 위해 어떤 것을 사용해야할까?

너드팩토리의 제품들은 매우 많은 데이터를 수집하고 있다보니 서비스가 불안정한 경우가 종종 있었습니다.

예를 들면 고객사에서 특별한 이벤트를 진행하거나 급성장하여 트래픽이 급증할 수 있습니다.

소프트웨어 아키텍트 입장에서 안정적으로 트래픽을 감당하기 위해 Message Queue와 Load Balancer를 고려해보았습니다.

물론 더 다양한 방법이 존재하지만 여기서는 두 방법론에 대해서만 다루겠습니다.

본 포스팅에서는 두 방법을 비교하여 적절하게 활용하는 관점을 제공하고자 합니다.

기술 설명

기술 비교에 앞서 각 기술을 간략히 설명해두었습니다.

Message Queue(MQ)란?

MQ는 메시지 큐(Message Queue)의 줄임말로 인스턴스 간 데이터 교환 시 통신하는 방법입니다.

메시지 큐는 대용량 데이터를 처리하기 위해 배치 작업에 사용하거나 비동기 동작을 위해서 사용하게 됩니다.

일반적으로 Django, Flask는 사용자가 많아지거나 서비스의 크기가 증가함에 따라, 응답 시간이 길어지거나 서비스가 무너지게 됩니다.

이 경우에는 생산자(Producers)와 소비자(Consumers)가 붙어있는 형태로 볼 수 있습니다.

MQ가 도입될 경우 위 그림처럼 생산자와 소비자 사이에 브로커(broker)가 추가됩니다.

생산자는 교환대의 역할을 수행하는 Exchange에 접근하여 요청을하고 Exchange에서는 정해진 규칙에 따라 알맞은 큐에 메시지를 전달합니다.

큐에 전달된 메시지는 Consumer에게 전달됩니다.

Load Balancer란?

로드 밸런서는 다수의 컴퓨팅 리소스로 분산하기 위해 사용합니다.

서비스를 확장하는 방법에는 2가지 방법이 있습니다.

Scale-up: 서버의 성능을 향상 (수직 확장)
Scale-out: 서버의 수를 증대 (수평 확장)

로드 밸런서는 Scale-out 방법론에 해당합니다.

단일 서버가 아닌 다수의 서버를 구성하여 로드 밸런서가 정해진 알고리즘에 따라 서버에 요청을 분산합니다.

클라이언트는 서버에 직접 접근하는 것이 아닌 로드 밸런서로 접근하게 됩니다. 이는 서버 또한 동일합니다.

클라이언트가 로드 밸런서로 요청을 전달하면, 로드 밸런서는 분배 알고리즘을 통해 서버에 전달합니다.

서버는 로드 밸런서로 응답을 하면, 로드 밸런서가 클라이언트에게 응답 결과를 전달합니다.

어느 방법이 적합할까?

이를 활용하는데 있어 적합한 방법을 찾는 관점이 필요합니다.

아래 내용에는 적합한 방법을 찾는 관점에 대해 기술하였습니다.

MQ를 사용하기 적절한 경우

이미지, 영상, 대용량 처리를 수행하는 경우 동시에 처리할 수 있는 작업량은 비교적 적습니다.

메시지 큐를 사용할 경우, 동시에 처리할 양만 서버에서 가져가 처리하게 됩니다.

이와 같이 대용량 데이터를 처리하는 작업을 수행할 경우 MQ가 적합합니다.

MQ를 사용하기 부적절한 경우

MQ의 경우 기본적으로 서버가 큐로부터 작업을 가져가야만 처리가 이루어집니다.

따라서 응답속도가 비교적 느립니다.

빠른 응답속도가 보장되어야 하는 서비스의 경우 MQ가 적합하지 않습니다.

Load Balancer를 사용하기 적절한 경우

MQ를 사용하기 부적절한 경우의 반대로 생각하시면 간단합니다.

Load Balancer는 서버에 즉시 작업을 전달하여 빠르게 처리가 이루어집니다.

따라서 빠른 응답속도가 보장되어야 할 경우 Load Balancer가 적합합니다.

Load Balancer를 사용하기 부적절한 경우

MQ를 사용하기 적절한 경우의 반대로 생각하시면 간단합니다.

Load Balancer는 모든 서버가 바쁘더라도 작업을 전달하게 됩니다.

서버에 무거운 작업이 전달될 경우 서버의 안정성을 보장하기가 힘듭니다.

대용량 처리 작업 같이 무거운 작업을 수행할 경우 Load Balancer가 적합하지 않습니다.

결론

소프트웨어 아키텍트 관점에서 서비스를 개선하기 위해 여러 방법들을 선택할 수 있습니다.

본 포스팅에서는 두 기술의 특성과 장단점을 파악하고 적재적소에 활용하는 관점을 제공하였습니다.

Flask를 활용한 iOS Networking 1 - 사진 전송하기

Mon, 05 Jul 2021 00:00:00 +0000

시작

와이파이나 데이터가 터지지 않는 환경에서는 어떤 앱을 쓸 수 있을까요? 유튜브, 카카오톡 등 우리가 즐겨 쓰는 대부분의 앱은 제 기능을 하지 못할 것입니다. 모바일 앱 사용에 있어서 서버와의 통신은 빼놓을 수 없는 관계입니다.

서버와의 통신은 우리가 정보를 검색해서 읽고 글, 사진을 업로드 또는 수정을 하기 위해 사용합니다. 이러한 모바일과 서버 간의 네트워킹을 어떻게 구현하는지 알아보기 위해 예시로 iOS용 사진 전송 앱을 만들어 보며 데이터를 주고받는 기능을 구현해보겠습니다!

위 그림과 같이 앱에서 원하는 사진을 서버에 보내고, 처리 값(이미지 크기)을 받아와 출력하는 기능을 통해 네트워킹 과정을 살펴봅시다.

[iOS] 앨범 or 카메라로 사진 선택

우선 앱에서 원하는 사진을 서버로 보내기 위해서는 앨범이나 카메라를 실행해야 합니다.

UIImagePickerController를 사용하면 사진 촬영, 동영상 녹화, 앨범에서 항목 선택을 위한 시스템 인터페이스를 관리할 수 있습니다.

UIImagePickerController를 실행하기 전, Info.plist에서 권한을 설정해 줍시다.

현재 필요한 기능은 앨범에서 사진 선택(photoLibrary), 카메라 촬영(camera)이므로 다음과 같이 코드를 작성해 줍니다.

// 앨범 사용 가능 여부 확인
if(UIImagePickerController.isSourceTypeAvailable(.photoLibrary)){
    // 이미지 피커의 델리케이트 self로 설정
    imagePicker.delegate = self
    // 이미지 피커의 소스 타입을 PhotoLibrary로 설정
    imagePicker.sourceType = .PhotoLibrary
    // 미디어 타입 kUTTypeImage로 설정
    imagePicker.mediaTypes = [kUTTypeImage as String]
    // 편집을 허용
    imagePicker.allowsEditing = True
    // 현재 뷰 컨트롤러를 imagePicker로 대체. 즉 뷰에 imagePicker가 보이게 함
    present(imagePicker, animated: true, completion: nil)
}

// 카메라 사용 가능 여부 확인
if(UIImagePickerController.isSourceTypeAvailable(.camera)){
    // 이미지 피커의 델리케이트 self로 설정
    imagePicker.delegate = self
    // 이미지 피커의 소스 타입을 camera로 설정
    imagePicker.sourceType = .camera
    // 미디어 타입 kUTTypeImage로 설정
    imagePicker.mediaTypes = [kUTTypeImage as String]
    // 편집을 허용하지 않음
    imagePicker.allowsEditing = false
    // 현재 뷰 컨트롤러를 imagePicker로 대체. 즉 뷰에 imagePicker가 보이게 함
    present(imagePicker, animated: true, completion: nil)
}

앨범, 카메라 각각 사용 가능 여부를 확인해 주고 원하는 동작 및 예외 처리를 작성해 주면 다음 사진들과 같이 각 기능들이 실행되는 것을 볼 수 있습니다.

[photoLibrary] 앨범 실행 화면

[camera] 카메라 실행 화면

[iOS] 서버 통신 코드 작성

사진 선택을 완료했다면, 선택한 사진을 서버에 보내는 기능이 필요합니다.

iOS 네트워킹에는 Alamofire, Moya 등 여러 가지 방법들이 있는데, 그중 가장 기본이 되는 URLSession을 사용해서 진행하겠습니다. URLSession은 애플에서 HTTP/HTTPS를 통해 콘텐츠를 다운로드, 업로드하기 위해 제공된 완성된 네트워킹 API입니다. 위 Task 중 어플에서 웹 서버로 Data 객체 또는 파일 데이터를 업로드할 수 있는 URLSessionUploadTask를 사용합니다.

여기서 HTTP Method를 설정해 주어야 합니다! URLSessionUploadTask는 POST 혹은 PUT 메소드를 이용합니다. 하지만 자주 사용되는 메소드인 POST와 GET 비교를 통해 HTTP Method를 살펴보겠습니다.

GET과 POST 차이

구분	GET	POST
사용	Read or Retrieve	Create
URL에 데이터 노출 여부	O	X
데이터 위치	Header	Body
캐싱 가능 여부	O	X

이처럼 HTTP Method의 메소드는 용도와 필요성에 맞게 사용할 수 있습니다. 저는 POST 방식이 가장 적절하다고 판단했습니다. 그렇다면 코드를 작성해보겠습니다!

func uploadImg(uiImg: UIImage) {
     let semaphore = DispatchSemaphore(value: 0) // 세마포어 선언
     let req = NSMutableURLRequest(url: NSURL(string:"http://0.0.0.0:8080/api/test")! as URL)
     let ses = URLSession.shared
     req.httpMethod="POST"
     req.setValue("application/octet-stream", forHTTPHeaderField: "Content-Type")
     req.setValue("img", forHTTPHeaderField: "X-FileName")
     let pngData = uiImg.pngData()
	   let task = ses.uploadTask(with: req as URLRequest, from: pngData, completionHandler: { (responseData, response, error) in
         if let httpResponse = response as? HTTPURLResponse {
            switch httpResponse.statusCode {
                 // statusCode 처리
             }
         }

				 if let
            responseData = responseData,
            let responseString = String(data: responseData, encoding: String.Encoding.utf8) {
                // 응답 처리
            }

         if let error = error {
            // 에러 처리
         }

         // 네트워킹이 끝나면 신호 보내기
         semaphore.signal()
     })
     task.resume()

	   // 네트워킹이 끝날때까지 대기
	   semaphore.wait()
}

코드를 살펴보면, 세마포어(Semaphore)를 사용한 것을 볼 수 있습니다. 세마포어의 사전적 의미는 수기 신호입니다. 즉, 두 개 이상의 프로세스가 동시에 공유 메모리와 같은 공유 자원을 접근할 때 동기화를 걸어주는 역할을 합니다.

현재 어플에서 “서버에 사진 전송 → 서버에서 처리 → 결과 화면에 출력” 순서로 진행이 되어야 하는데, 서버에서 처리하는 동안 결과 화면으로 넘어가는 등 시간적인 차이 같은 문제로 인해 의도하지 않은 결과가 나올 수 도 있습니다. 따라서 공유 자원의 독점을 보장할 수 있도록 임계 영역(Critical Section)을 만들어줌으로써 문제를 해결할 수 있습니다.

마지막으로 서버 쪽에서 결과를 확인해보면 통신이 잘 이루어진 것을 볼 수 있습니다!!

The End

여기까지는 앱에서 사진을 전송하는 기능을 구현해봤습니다! 다음 2장에서는 사진을 받아서 원하는 작업을 해주는 API를 만들어 서버에 올리고, 결과를 받아와서 처리하는 방법을 다루겠습니다.

GAN을 이용한 이상탐지

Mon, 05 Jul 2021 00:00:00 +0000

2014년, 이안 굿펠로우(Ian Goodfellow)에 의해 고안된 GAN(Generative Adversarial Network)은 생성 모델과 딥러닝 분야에 큰 혁신을 불러일으켰습니다. 특히, GAN은 이미지 생성, 스타일 변환, 영상/음성 합성 등 다양한 분야에서 우수한 성능을 보였으며, 최근 이상탐지 분야에서도 사용되고 있습니다. 이번 글에서는 이상탐지에서의 GAN의 활용에 대해 다루어 보겠습니다.

생성 모델과 판별 모델

기계 학습에서 분류(Classification) 문제를 해결하기 위한 알고리즘은 생성 모델(Generative Model)과 판별 모델(Discriminative Model) 크게 2가지 종류가 있습니다. 판별 모델은 분류 경계를 찾는 것을 목적으로 학습하는 반면에, 생성 모델은 데이터의 분포를 학습합니다. 예를 들어, 판별 모델 관점에서 개와 고양이 분류는 개와 고양이의 샘플 데이터로부터 각각의 특징을 학습한 후, 두 클래스(개, 고양이)의 특징을 구분 짓는 경계선을 찾는 방식으로 진행됩니다. 반면에, 생성 모델을 활용한 분류는 개와 고양이의 샘플 데이터가 따르는 분포를 학습하여 두 집단을 구분하고, 학습이 끝난 후 모델을 활용하여 유사한 데이터를 생성합니다.

<생성 모델과 판별 모델 비교>

GAN 개념

GAN(Generative Adversarial Network)은 ‘진짜 같은 가짜 데이터’를 생성하는 대표적인 생성 모델입니다. GAN이라는 이름에서 알 수 있듯이, GAN은 두 개의 모델이 적대적(Adversarial)으로 경쟁하듯이 학습하면서, 진짜 같은 가짜 데이터를 생성하는(Generative) 신경망 모델(Network) 입니다. 여기서 ‘생성’은 실제 데이터 분포에 근사하도록 학습하는 것을 전제로 합니다. 즉, 실제 데이터 분포에 근사하게 모델을 학습하면, 유사한 샘플 데이터를 생성할 수 있습니다. 그리고, ‘적대적(Adversarial)’은 GAN 모델의 학습 원리를 상징하는 용어이며, 생성자(Generator)와 구분자(Discriminator) 두 개의 모델을 경쟁하여 성능을 향상시키는 방향으로 학습하는 것을 의미합니다.

<GAN 아키텍처>

GAN 기반 이상탐지

이상탐지(Anomaly Detection)는 데이터에서 비정상적인 값을 탐지하는 것을 의미합니다. 이상탐지를 위한 기법은 분포, boxplot 등을 활용하여 이상치를 찾는 통계적 방법부터 모델을 이용하여 예측하는 방법까지 다양합니다. 최근에는 이미지 데이터 상의 이상부분을 탐지하기 위하여 GAN을 이용한 연구가 진행되고 있습니다. AnoGAN, GANomaly 등 이상탐지를 위한 다양한 GAN 기반 모델들이 연구되었으며, 여기서는 GANomaly를 소개하도록 하겠습니다.

GANomaly는 생성자(Generator)가 Encoder-Decoder-Encoder의 구조를 갖습니다. 구성된 네트워크 수가 많은 만큼 Generator의 손실 함수(Loss Function)도 여러 개 Loss (Encoder Loss, Contextual Loss, Adversarial Loss)의 합으로 구성됩니다.

<GANomaly 아키텍처>

아래는 GANomaly의 Generator Loss를 구현한 코드입니다. 코드는 MNIST의 ‘1’과 ‘7’을 각각 정상/비정상으로 간주하고 분류한 알고리즘을 구현한 것입니다. Encoder Loss는 G_E(x)의 출력값과 E(x_hat)의 출력값에 대한 MSE로 정의됩니다. Contextual Loss는 G_E(x)의 출력값과 E(x_hat)의 출력값에 대한 MAE로 정의됩니다. Adversarial Loss는 D(x, x_hat)의 출력값에 대한 MSE로 계산됩니다.

이 3개의 Loss에 가중치를 각각 곱해서 합한 값을 최종적으로 Generator Loss로 사용합니다.

class EncLoss(keras.layers.Layer):
	def __init__(self, **kwargs):
		super(EncLoss, self).__init__(**kwargs)

	def call(self, x, mask=None):
		ori = x[0]
		gan = x[1]
		return K.mean(K.square(g_e(ori) - encoder(gan)))

	def get_output_shape_for(self, input_shape):
		return (input_shape[0][0], 1)

class CntLoss(keras.layers.Layer):
	def __init__(self, **kwargs):
		super(CntLoss, self).__init__(**kwargs)

	def call(self, x, mask=None):
		ori = x[0]
		gan = x[1]
		return K.mean(K.abs(ori - gan))

	def get_output_shape_for(self, input_shape):
		return (input_shape[0][0], 1)

class AdvLoss(keras.layers.Layer):
	def __init__(self, **kwargs):
		super(AdvLoss, self).__init__(**kwargs)

	def call(self, x, mask=None):
		ori_feature = feature_extractor(x[0])
		gan_feature = feature_extractor(x[1])
		return K.mean(K.square(ori_feature - K.mean(gan_feature, axis=0)))

	def get_output_shape_for(self, input_shape):
		return (input_shape[0][0], 1)

input_layer = layers.Input(name='input', shape=(height, width, channels))
gan = g(input_layer) # g(x)
adv_loss = AdvLoss(name='adv_loss')([input_layer, gan])
cnt_loss = CntLoss(name='cnt_loss')([input_layer, gan])
enc_loss = EncLoss(name='enc_loss')([input_layer, gan])

gan_trainer = keras.models.Model(input_layer, [adv_loss, cnt_loss, enc_loss])

# loss function
def loss(yt, yp):
	return yp

losses = {
	'adv_loss': loss,
	'cnt_loss': loss,
	'enc_loss': loss,
}

lossWeights = {'cnt_loss': 20.0, 'adv_loss': 1.0, 'enc_loss': 1.0}

# compile
gan_trainer.compile(optimizer = 'adam', loss=losses, loss_weights=lossWeights)

Loss 정의 후, ‘d’(=Discriminator)를 학습가능하게 설정하고 ‘train_on_batch’ 메소드를 사용하여 학습합니다. 그리고 구분자 ‘d’를 학습 범위에서 제외하고, 생성자 ‘gan_trainer’를 학습시킵니다. 이 과정을 iteration 수만큼 반복합니다.

for iin range(niter):
	### get batch x, y ###
	x, y = train_data_generator.__next__()

	### train disciminator ###
	d.trainable =True

	fake_x = g.predict(x)

	d_x = np.concatenate([x, fake_x], axis=0)
	d_y = np.concatenate([np.zeros(len(x)), np.ones(len(fake_x))], axis=0)

	d_loss = d.train_on_batch(d_x, d_y)

	### train generator ###
	d.trainable =False
	g_loss = gan_trainer.train_on_batch(x, y)

	if i % 50 == 0:
		print(f'niter:{i+1}, g_loss:{g_loss}, d_loss:{d_loss}')

학습이 끝난 후, 테스트 데이터를 입력하여 각 네트워크 별 예측값을 구하고, 이 예측값들을 이용하여 이상탐지 점수(Anomaly Score)를 구합니다. 이상탐지 점수는 논문에 따라 Encoder Loss에 기반하여 G_E(x)의 예측값과 E(G(x))의 예측값에 대한 SSE로 정의합니다. 그리고, Min-max 정규화를 통해 0부터 1사이 범위로 변환합니다.

encoded = g_e.predict(x_test)
gan_x = g.predict(x_test)
encoded_gan = g_e.predict(gan_x)
score = np.sum(np.square(encoded - encoded_gan), axis=-1)
score = (score - np.min(score)) / (np.max(score) - np.min(score))# map to 0~1

최종적으로 Min-max 정규화된 이상탐지 점수(Anomaly Score)를 산점도로 시각화하면 아래 그림과 같습니다. 이상탐지 점수가 약 0.3일 때를 기준으로 두 클래스가 구분되는 것을 볼 수 있습니다. 따라서, 약 0.3 정도를 임계값으로 정하여서 테스트 데이터에 대한 이상 여부를 판단할 수 있습니다.

import matplotlib.pyplot as plt
from pylab import rcParams
rcParams['figure.figsize'] = 14, 5
plt.scatter(range(len(x_test)), score, c=['skyblue' if x == 1 else 'pink' for x in y_test])

결 론

이번 글에서는 이상탐지를 위한 GAN 모델을 설명하기에 앞서, 생성 모델과 판별 모델의 차이와 GAN 개념을 설명하였습니다. 그리고 다양한 이상탐지를 위한 GAN 모델 중, GANomaly 모델을 소개하였습니다. 특히, GANomaly의 전체적인 아키텍처와 손실 함수 정의, 테스트 및 시각화를 중점적으로 다루었습니다.

다음 글에서는 CNN기반 이상데이터 분류에 대해 다루어 보도록 하겠습니다.

Reference

https://ratsgo.github.io/generative%20model/2017/12/17/compare/

https://learnopencv.com/generative-and-discriminative-models/

https://dreamgonfly.github.io/2018/03/17/gan-explained.html

Dan, Y., Zhao, Y., Li, X., Li, S., Hu, M., & Hu, J. (2020). Generative adversarial networks (GAN) based efficient sampling of chemical composition space for inverse design of inorganic materials. npj Computational Materials, 6, 1-7.

Akçay, S., Atapour-Abarghouei, A., & Breckon, T. (2018). GANomaly: Semi-Supervised Anomaly Detection via Adversarial Training. ACCV.

https://github.com/leafinity/keras_ganomaly

ICT 인턴십 후기

Wed, 30 Jun 2021 00:00:00 +0000

ICT 인턴십 후기

안녕하세요. 너드팩토리에서 2021년도 상반기 ICT 인턴십에 참가한 맴 입니다.

4개월간의 ICT 인턴십이 끝났습니다. 너드팩토리에서의 하루하루는 매번 새로웠고, 자유롭게 도전할 수 있는 분위기였습니다. 제가 꿈꾸던 분위기의 회사였죠. 사람들은 자유분방하고 열정이 넘쳤고, 그런 분위기 속에서 저는 좋은 경험들을 할 수 있었습니다. 😉

이번 블로그에서는 짧다면 짧고, 길다면 길었던 4개월간의 경험들을 바탕으로 제가 인턴십 과정을 통해 무엇을 배우고 느꼈는지를 공유하고자 합니다.

지원 계기

올해 초, 저는 휴학을 할 계획이었습니다. 막상 휴학을 신청했지만, 계속되는 코로나로 어디론가 떠난다는 것조차 불투명했습니다. 그러던 와중, ‘인턴을 해볼까 ‘라는 생각이 들었고, 무작정 3학년을 막 마친 학생이 할 수 있는 인턴을 찾기 시작했습니다. 그렇게 알게된 ICT 인턴십은 학점을 받으면서 인턴을 할 수 있다는 점이 굉장히 매력적으로 다가왔습니다.

인턴십 공고를 본 당일, 바로 자기소개서와 포트폴리오를 작성했고, 세 군데의 기업에 지원을 했습니다. 저는 단순히 개발뿐 아니라 IT 서비스 기획의 직무가 궁금했기 때문에 IT 관련 다양한 업무를 경험해볼 수 있는 회사에 지원했습니다.

일주일 후, 차례로 세 군데의 기업에서 면접을 보았고, 결과적으로 (주)플랜아이에서 ICT 인턴십을 수행하기로 결정하게 되었습니다. 휴학을 하려던 저의 상반기 계획이 ICT 인턴십으로 바뀌게 된 것입니다.

플랜아이와 ICT 인턴으로 매칭되었다.

매칭이 되고 바로 다음주부터 출근을 해야 하는 빡빡한 일정이었지만, 출근을 앞둔 주말에 부모님과 회사를 미리 가보기도 하면서 설레었던 기억이 납니다. 인생 첫 인턴을 앞두고 느꼈던 설렘은 잊을 수 없습니다. ☺️

두근두근 첫 날

출근 첫 날이 기억에 납니다. 버스 배차간격이 20분이나 되는 줄도 모르고 나왔다가 지각하는 줄 알고 식은땀을 흘리던 그 날. 제 속도 모르고 천천히 가는 버스 안에서 오만가지 생각이 다들었습니다.

‘첫 날부터 지각하는 인턴이라니..’

정말 다행히 9시 전에 회사에 도착할 수 있었고, 저를 담당해주시는 에드워드님을 만나 함께 3층 사무실로 올라갔습니다. 어색한 분위기 속에 마주한 책상에서 앞으로의 4개월이 어떨지 기대와 걱정이 몰려왔습니다.

내 자리 노트북, 모니터, 키보드

걱정도 잠시, 바로 너드팩토리에서 사용하는 notion과 slack 계정을 부여 받으면서 책임감이 생겼습니다. 맡은 일을 잘 해내야겠다는 책임감은 인턴기간 동안 꾸준히 자기계발을 할 수 있는 원동력이 되었습니다.

첫 날 오후에는 너드팩토리 구성원들 모두가 몰디브에 모여 아이스브레이킹을 했습니다. 알고 보니 새로 사람이 올 때마다 나이 순서 맞추기를 진행하는 문화가 있었는데, 얼굴도, 이름도 익숙치 않은데 나이 순서를 맞추라고 하니 난감 했던 기억이 납니다. 😵 ㅋㅋ ~~나중에 누군가 너드팩토리에 입사하게 되면 나이맞출 각오? 하세요…~~

그래도 이 시간 이후로 조금은 사람들 얼굴을 익히고 이름을 외우는게 수월했습니다. 조금은 너드팩토리 구성원들과 가까워진 시간 아니었을까 싶습니다~ ㅎㅎ

자주 사용한 회의실, 몰디브

팀 배정

현재 너드팩토리는 사인스쿼드와 보리스쿼드로 구성되어 있습니다. 사인스쿼드에서는 정부과제 사업계획서 작성 등 연구과제 기획과 관련된 업무를 수행하였고, 보리스쿼드에서는 서비스 기획 업무에 참여하였습니다. 스쿼드 별로 하는 일이 분리가 되어 있어 혼동도 있었지만, 동료들이 도와준 덕분에 잘 적응할 수 있었습니다.

너드팩토리, 그곳이 알고싶다

(주)플랜아이의 기업부설연구소인 너드팩토리에서는 애자일 방법론으로 일하고 있습니다.

애자일 방법론이란, 소프트웨어 개발 방법에서 아무런 계획이 없는 개발 방법과 계획이 지나치게 많은 개발 방법들 사이에서 타협점을 찾고자 하는 방법론 입니다

너드팩토리는 데일리 스크럼을 통한 업무 공유로 서로의 업무를 빠르게 알고 협업을 좀 더 유기적으로 진행합니다. 자신의 업무를 공유 함으로써 책임감이 생기고, 자기계발을 할 수 있는 동기부여가 됩니다. 의사소통은 노션과 슬랙, 제플린 등 협업 툴을 사용해 효과적으로 진행합니다.

또, 너드팩토리에서는 서로 영어이름을 부르며 자유롭게 의사소통을 합니다. 직급과 계급이 없는 수평조직으로 모두가 자유롭게 생각을 말할 수 있습니다. 😉

보리 스쿼드의 경우 프론트엔드 개발자, 백엔드 개발자, AI 개발자, 프로덕트 디자이너, 그리고 프로덕트 오너로 구성되어 있습니다. G의 구o애널리틱스나 F사의 뷰oo 같은 웹사이트 분석 및 최적화 도구인 VODA가 개발되고 있는 시점에 인턴으로 오게 된 저는, 같이 일하면서 각각의 역할이 어떤 일을 하고 어떻게 소통하고 협업 하는지를 알 수 있었습니다.

업무는 스프린트 단위로 진행됩니다. 스프린트는 주로 일주일에서 길게는 10일 단위로 나뉩니다. 매번 스프린트가 완료될 때마다 노션에 업무를 공유하고, 리뷰를 진행합니다. 회의를 통해 서로의 업무 진행 현황을 파악하고, 개발자간의 소통, 개발자와 디자이너 사이의 소통 등 여러 역할 간의 소통이 이루어지는 것입니다.

매주 서비스가 한 단계 업그레이드 되는 모습을 보면서, 감탄에서 그치지 않고 더 좋은 서비스가 되도록 다같이 고민하고 개선해나가는 시간이 저에게는 큰 경험이 되었습니다. 서비스의 론칭 프로세스를 알게 되었고 서비스 기획을 배울 수 있었습니다.

무엇을 했는가

In 사인스쿼드

처음에 에드워드님께서 ‘기획’을 처음 접하는 제게 권해주신 책이 바로 “모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실” 입니다. 어떤 식으로 서비스를 기획 하는지 막연했던 저에게 기획에 앞서 사람을 알아야 함을 깨우쳐 준 책입니다.

이 책에 관련해서 각 챕터별로 리뷰를 남겨 보고서를 작성했고, 처음으로 팀원들 앞에서 책 리뷰와 더불어 제 의견을 발표하게 된 주제였습니다.

그리고 AI 관련 서비스 기획을 목표로 하면서 AI 기사리포팅을 통해 기술에 대한 이해와 현황을 살펴보기도 했습니다.

AI 기사리포팅

이 후, 지디웹서비스 코리아의 웹 어워즈들을 벤치마킹 하여 기존에 있던 서비스를 개선해보자는 주제로 프로젝트를 진행했습니다. 저는개선할 앱으로 “오늘의집” 을 선택하여 장단점을 분석한 다음 UX 디자인을 바꿔 보았습니다.

해당 발표에서 A/B 테스트를 통해 변경한 내용이 어떤 개선 효과가 있었는지 볼 수 있다면 좋겠다는 피드백을 받았고, 이후에 A/B 테스팅에 대해 공부하게 된 계기가 되었습니다. 또한, 단순히 “이렇게 바꾸면 더 좋겠다”라는 추상적인 생각에 근거한 기획이 아닌, 데이터 기반의기획에 대해 생각해보게 되었습니다.

In 보리스쿼드

보리스쿼드에서는 현재 개발이 한창 진행중인 VODA의 서비스 기획에 참여하게 되었습니다.

VODA는 기업의 데이터 트랜스포메이션을 도와줄 웹사이트 분석 및 최적화 도구로, 구o애널리틱스와 뷰oo의 장점을 융합하여 데이터를 기반의 서비스 운영에 대한 인사이트 제공을 목적으로 개발되고 있습니다.

VODA 관련 신규 기능의 기획에 앞서 뉴비 기획자인 저에게 먼저 주어진 일은 지금까지 개발된 VODA 기능들을 와이어프레임으로 작성하는 연습이었습니다.

와이어프레임이란, 화면 청사진이라고도 하며, 선(Wire)으로 틀(Frame)을 잡는다는 뜻으로 화면단위의 레이아웃을 설계하는 작업을 말합니다.

건축에서 설계도면을 그리듯, 서비스를 개발하기 앞서 와이어프레임을 그려야 합니다. 전통적인 기획과는 다르게현재는 디자이너와의 유연한 소통을 위한 도구ㅇ로 Figma 등의 UI 디자인 툴을 와이어프레임 작성에 이용하기도 합니다. 저는 Figma를 사용하여 UI 레이아웃의 흐름과 각 화면의 설명을 상세히 작성해보았고, VODA의 전반적인 서비스 흐름을 파악하는데 도움이 되었습니다. 서비스 기획자로서 한 발짝 성장하는 느낌을 받았습니다.

수 많은 연습 끝에 figma를 능숙하게 다룰 수 있게 되었고, VODA 라이센스 관리 등이 가능한 서비스 관리자페이지의 기획을 다니엘님과 함께 진행하게 되었습니다.

먼저 서비스에 필요한 기능들을 정의하기 위해 실제 서비스 관리자 페이지를 사용하게 될 운영팀의 needs를 수집하였고, 서비스 사용을 가정했을 때 필요한 기능들의 ideation을 진행하였습니다. 이후에 서비스 운영을 위한 주요 기능들을 선정 및 분류하였고, 주요 기능별로 구체적인 서비스 흐름을 작성하고 후에 이를 합치는 형태로 UX 흐름을 완성하였습니다. 이 때, 서비스의 흐름을 어떻게 시각화 할지에 대해 고민을 거듭해보면서 여러 경우의 수를 빠짐없이 그릴 수 있었습니다. 또한, 기능들의 정책 설정 과정에서도 그냥 이럴 것 같아~ 가 아닌 데이터가 기반이 되어야 한다는 것을 배울 수 있었습니다.

VODA 서비스의 핵심 중 하나인 리포팅 의 일부 기능에 대한 기획도 경험하게 되었습니다.

리포팅할 부분을 골라 기준 별로 세세하게 나누고, 그 안에서도 또 다른 기준을 세우는 과정에서 어려움이 많았지만, 데이터를 기반으로 최선의 기획을 해야된다는 고민을 거듭했습니다.

이 외에도 부사장님께서 요청하신 웹사이트 UX 벤치마킹을 통해 서비스 기획 직무를 경험할 수 있었습니다. 또, 요즘 핫하다는 리액트를 배워보고 싶어 주말에 나와 준님에게 배우기도 했는데, 간단하게 웹페이지를 제작해보기도 했습니다. 앞으로 더 해보면서 어떤 분야로 쭉 나아갈지 고민해보고 결정하게되겠죠. 🤔

너드팩토리에서의 인턴생활은 제 진로에 대한 방향성을 찾을 수 있게 이끌어줬습니다. 이곳에는 프론트, 백엔드, AI 개발자, 그리고 디자이너, PO 등 글로만 보던 각 직군들이 눈앞에 있기 때문에 많이 물어볼 수 있었습니다. 어디서도 쉽게 얻을 수 없는 경험이었지요. 진짜 다들 감사했습니다. 😎

마지막 인사

이곳 너드팩토리의 구성원들은 자기계발에 소홀한 사람 없이 다들 목표의식을 갖고 열정적으로 일합니다. 옆에서 보면서 정말 많이 배울 수 있는 환경이라고 생각합니다. 본인의 커리어를 확장 시키려는 열정 있는 사람들이 모인 만큼 분위기가 좋습니다. 특히, 회사 내의 다른 부서와는 다른 자유로운 분위기로 스타트업 같기도 해 즐겁게 인턴생활을 할 수 있었습니다. 😆

생일날에 깜짝 축하파티를 해준 사람들, 문지동, 전민동의 여러 맛집들을 다니던 나날들, 지금까지 마신 아메리카노의 컵홀더로 쌓았던 탑들, 함께 수다떨던 동료들. 모두 다 잊지 못할 것 같아요. 너무나도 행복했던 인턴생활 보낼 수 있게 도와주셔서 감사했고, 앞으로도 너드팩토리의 성공을 응원하겠습니다!

그리울거에요..사무실.

비와이이

정규화 정리1 - Scaling, Regularization, Standardization

Tue, 15 Jun 2021 00:00:00 +0000

개요

정규화 관련 정보들을 검색하다보면, 단어들이 혼재되어 사용되기 때문에 처음 보거나 오랜만에 보면 헷갈릴 수 있습니다.

또한 사람들마다 조금씩 용어를 다르게 정의하고 있기도 합니다.

이러한 상황에서 혼동되는 용어와 해석의 차이 때문에 헤매게 되는 시간을 줄이고자, 관련 용어와 정의에 대해 큰 틀에서 가볍게 훑고 가 보자는 취지에서 이번 글을 작성하게 되었습니다.

(정규화 방법에 대한 설명과 계산 과정 등 생략 된 부분들은 이후 추가로 업로드 할 예정입니다.)

본문

용어의 일반적인 정의

이번 포스팅에선 Scaling, Standardization, Regularization 에 대해서 짚고 넘어가보도록 하겠습니다.

( Normalization 은 내용이 방대하고, 한번에 너무 많은 내용을 담으면 혼동이 올 수 있어서, 다음 포스팅에서 설명 하려고 합니다. )

Scaling:
일반적으로 데이터의 범위를 임의로 조정하는 것을 의미합니다.
데이터 분포의 모양은 변하지않고 기존 데이터와 동일한 비율을 유지한 채 범위를 조정합니다.

출처: towardsdatascience
Standardization:
일반적으로 평균으로 구한 분포의 표준 편차를 1로 맞추기 위해 데이터를 바꾸는 것을 의미합니다.

각 feature 간의 상대적 거리를 왜곡시킬 수 있는 점을 고려하여 사용해야 합니다.

출처: towardsdatascience

Regularization:
일반적으로 가중치를 조정할 때 추가적인 제약을 주는 것을 의미합니다.

용어 설명

Scaling

사용 목적은 아래와 같습니다.

독립된 여러 개의 변수를 사용할 때 각 변수 별로 단위가 다를 경우, 학습 시에 미치는 중요도가 달라지는 문제를 방지할 수 있습니다.

(ex. 키와 나이 변수를 사용할 때, 키 변수가 학습에 더 큰 영향을 끼치는 문제가 발생합니다.)
경사 하강법과 같은 방법론을 사용할 때 수렴 속도를 높여줍니다.
신경망에서 시그모이드 함수와 같은 활성 함수를 사용할 때, saturation현상이 빨리 일어나지 않도록 도와줍니다.

(*참고: saturation 현상 관련 글)
딥러닝에서 Local Minimum에 빠질 위험을 감소 시켜줍니다.

대표적으로 사용하는 기법들은 아래와 같습니다.

Min Max
Max Abs
Robust
Standard

( 그러나 Robust, Standard 두 스케일러의 경우 용어 정리에서 제시한 scaling의 조건을 온전히 충족하지 못합니다. )

Min Max Scaling

: 최소 값은 0 최대 값은 1으로, 모든 데이터가 [0, 1] 범위안에 들어가도록 조절하는 기법입니다.

= Min max normalization, Rescaling, 최소 최대 정규화, Scaling, Normalization

( 협업 할 때 Scaling, Normalization과 같이 포괄적인 단어 사용은 지양하는 것을 추천합니다. )

$x_{new} = \frac{x - x_{min}}{x_{max} - x_{min}}$

적용 예시

import pandas as pd
import matplotlib.pyplot as plt

df = pd.DataFrame([[166, 18],
                  [172, 25],
                  [158, 30],
                  [182, 21],
                  [161, 26],
                  [155, 15]])
df.columns = ['height', 'age']
df_new = (df - df.min())/(df.max() - df.min())

# 시각화
plt.title('Origin Dataset')
plt.plot(df)
plt.legend(df.columns)

plt.title('Scaled Dataset')
plt.plot(df_new)
plt.legend(df_new.columns)

Max Abs

: 절댓값이 가장 큰 수의 절대값으로 전체를 나누어 모든 데이터의 범위를 [-1, 1 ]으로 조절하는 기법입니다.

$x_{new} = \frac{x}{\left\vert x \right\vert_{max}}$

적용 예시

import pandas as pd
import matplotlib.pyplot as plt

df = pd.DataFrame([[1.0, 18],
                  [0.8, 25],
                  [-0.5, 30],
                  [-1.8, 21],
                  [1.2, 26],
                  [0.6, 15]])
df.columns = ['sight', 'age']
df_new = df/df.abs().max()

# 시각화
plt.title('Origin Dataset')
plt.plot(df)
plt.legend(df.columns)

plt.title('Scaled Dataset')
plt.plot(df_new)
plt.legend(df_new.columns)

Robust

: 중앙값과 IQR을 활용하여 아웃라이어의 영향을 적게 받는 것이 특징인 기법입니다.

( 단, 미리 결정된 범위로 조정하는 것이 아니기 때문에 앞에서 정의한 Scaling의 조건을 온전히 만족하지 못합니다. )

$x_{new} = \frac{x-x_{median}}{IQR}$

Standard

: 아래의 Z-Score Normalization와 같은 기법입니다.

( Robust와 같은 이유로 scaling이라고 보기에는 어려움이 있고, Standardization으로 구분하여 지칭하는 것을 추천드립니다. )

Standardization

사용 목적은 아래와 같습니다.

정규분포를 표준 정규분포로 변환시켜주어 서로 다른 자료들을 쉽게 비교 분석할 수 있도록 만들어 줍니다.
모든 정규 분포에 대한 확률을 쉽게 구할 수 있습니다.
딥러닝 알고리즘에서 (특히 회귀 타입의 모델을 사용할 때), zero mean and unit variance 데이터를 필요로 하는 경우에도 종종 사용됩니다.

( *참고: why it’s important to give the features zero mean and unit variance? )

Standardization

: 데이터를 평균 0, 표준편차 1인 표준정규분포로 만들어주는 기법입니다.

= Z-Score Normalization, 표준화, 일반화, Z-점수 정규화

$x_{new} = \frac{x-mean}{std}$

(*참고: z-score 개념 관련 영상)

적용 예시

import pandas as pd
import matplotlib.pyplot as plt
from sklearn.datasets import load_iris

iris_arr = load_iris()
iris_df = pd.DataFrame(iris_arr['data'].round(2))

iris_df_standarded= (iris_df - iris_df.mean())/iris_df.std()

# 시각화
plt.title('Origin Dataset')
plt.hist(iris_df)
plt.legend(iris_df.columns)

plt.title('Standarded Dataset')
plt.hist(iris_df_standarded)
plt.legend(iris_df_standarded.columns)

Regularization

사용 목적은 아래와 같습니다.

학습 데이터에 대한 민감도를 낮춰줍니다.
(결과적으로) 과적합을 방지하기 위해 사용됩니다.

대표적으로 사용하는 기법은 아래와 같습니다.

Ridge
Lasso
Elastic Net

Ridge

: L2 norm을 사용하여 가중치에 규제를 가하는 기법입니다.

: 가장 일반적으로 사용되는 기법으로, 변수간 상관관계가 높아도 좋은 성능을 보이고, 크기가 큰 변수를 우선적으로 줄이는 것이 특징입니다.

= L2 regularization, L2 정칙화, L2 규제, 릿지, Normalization

( 그러나, Normalization과 같이 포괄적인 단어 사용은 지양하는 것을 추천합니다. )

$f(Cost) = f(Loss) + \Lambda\sum{w}^2$

적용 예시

Lasso

: L1 norm을 사용하여 가중치에 규제를 가하는 기법입니다.

: 변수 선택이 가능하고, 비중요 변수를 우선적으로 줄이는 것이 특징입니다.

= L1 regularization, L1 정칙화, L1 규제, 라쏘

$f(Cost) = f(Loss) + \Lambda\sum{\left\vert w \right\vert}$

적용 예시

Elastic Net

: Ridge와 Lasso 두 방법론을 혼합한 유형입니다.

: 변수 선택이 가능하고, 상관관계가 큰 변수를 동시에 선택하고 배제 있는 것이 특징입니다.

= 엘라스틱 넷

$f(Cost) = f(Loss) + \Lambda\sum{w^2} + \Lambda\sum{\left\vert w \right\vert}$

적용 예시

추가적으로 자주 사용되는 Regularization 기법들 아래와 같습니다.

Fused Lasso: 인접한 변수들을 동시에 선택하는 정칙화 기법입니다.
Group Lasso: 사용자가 정의한 그룹 단위로 변수를 선택하는 정칙화 기법입니다.
Graph Constrained Regularization: 사용자가 정의한 그래프의 연결관계에 따라 변수를 선택하는 정칙화 기법입니다.

Reference

https://sebastianraschka.com/Articles/2014_about_feature_scaling.html#about-standardization

https://towardsdatascience.com/scale-standardize-or-normalize-with-scikit-learn-6ccc7d176a02

https://medium.com/@isalindgren313/transformations-scaling-and-normalization-420b2be12300

https://towardsdatascience.com/all-about-feature-scaling-bcc0ad75cb35

https://www.analyticsvidhya.com/blog/2017/06/a-comprehensive-guide-for-linear-ridge-and-lasso-regression/

https://towardsdatascience.com/regularization-the-path-to-bias-variance-trade-off-b7a7088b4577

You Only Look Once. YOLO

Thu, 06 May 2021 00:00:00 +0000

머리

흔히 YOLO(욜로)라고 하면 You only Live Once 의 약자로 ‘인생은 오직 한번뿐’ 이라는 의미로 자유로운 라이프 스타일을 나타냅니다😎

하지만 이 포스팅에서는 조금 다른 YOLO를 다룹니다. ‘You Only Look Once.’ 즉 한번에 보고 바로 처리를 하겠다. 라는 속도가 빠르다는 장점을 내세운 Object Detection 신경망 입니다. YOLO는 yolov1부터 2020년 7월 기준으로 yolov5 까지 공개되어 개발자분들 뿐만 아니라 비전공자들부터 학생들까지, 많은 사람들이 인용하여 활용 및 연구중입니다. 이번 포스팅에서는 YOLOv1부터 YOLOv2까지 모델 구조와 특징들에 대해 차근차근 설명해보려고 합니다.

가슴

YOLOv1

기존의 Object Detection은 single window나 regional proposal methods등을 통해 바운딩 박스를 잡은 후 탐지된 바운딩 박스에 대해 분류 수행하는 2 stage detection 으로, image detection을 완료하는 알고리즘을 통해 진행되었습니다. 파이프라인이 복잡하기 때문에 당연히 학습과 예측이 느려지고 최적화도 느려집니다. YOLOv1은 하나의 컨볼루션 네트워크를 통해 대상의 위치와 클래스를 한번에 예측합니다. (한 번만에 image detection을 할 수 있는 1 stage detection 알고리즘)

YOLO가 등장했을 당시 장점으로 주목을 받았던 내용들입니다.

학습 파이프라인이 기존의 detection 모델들에 비해 간단하기 때문에 학습과 예측의 속도가 빠르다.
모든 학습 과정이 이미지 전체를 통해 일어나기 때문에 단일 대상의 특징뿐 아니라 이미지 전체의 맥락을 학습하게 된다.
대상의 일반적인 특징을 학습하기 때문에 다른 영역으로의 확장에서도 뛰어난 성능을 보인다.

YOLO 모델의 구조

테두리상자 조정 (Bounding Box Coordinate)과 분류(Classification)를 동일 신경망 구조를 통해 동시에 실행하는 통합인식(Unified Detection)을 구현하는 큰 특징을 가지고 있습니다.

이미지를 SxS 의 그리드로 분할합니다. (논문에서는 S = 7로 예시를 두었습니다.)
이미지 전체를 신경망에 넣고 특징 추출을 통해 예측 텐서(Prediction Tensor) 생성합니다. 여기서 예측 텐서는 그리드 별 테두리상자 정보, 신뢰 점수, 분류 클래스 확률을 포함합니다.
그리드 별 예측 정보를 바탕으로 테두리 상자 조정 및 분류 작업 수행합니다.
각각의 Grid cell 은 B개의 Bounding Box와 각 Bounding box에 대한 Confidence-Score를 가집니다. Confidence-Score : $Pr(Object) * IOU$
각각의 Grid cell 은 C개의 Conditional Class Probability를 가집니다.
각각의 Bounding box는 x, y좌표, w, h, confidence를 지닙니다. (x, y) : Bounding box의 중심점을 의미하며 grid cell 범위에 대한 상대 값 (ex) x가 grid cell 가장 왼쪽, y가 grid cell 중간에 있다면 x=0, y=0.5

YOLOv1 Network

논문의 YOLO Network

Inception 블럭 대신 단순한 224x224 크기의 ImageNet Classification으로 pretrain을 진행했습니다. 이후 448x448 이미지를 input image로 받아 24개의 Conv Layer 중 앞의 20개의 컨볼루션 레이어는 고정한 채 뒷 단의 4개의 레이어와 2개의 Fully Connected Layer만 object detection task에 맞게 학습하게 됩니다. 이후 예측 텐서(Prediction Tensor)를 뽑아내게 됩니다. 이것을 바탕으로 디텍션 및 분류작업을 수행하게 됩니다.

이제 네트워크의 출력인 Conv Layer, FC Layer를 통과한 Prediction Tensor (7 x 7 x 30) 피쳐맵에 대해서 알아보겠습니다.

위의 그림에서는 Prediction Tensor가SxSx(Bx5+C)와 같이 되어 있습니다. 위에서 알 수 있듯이 YOLO 논문에서는 S의 크기를 7로 명시한 것을 알 수 있습니다. 7x7은 그리드의 숫자를 의미하며 7x7의 그리드 별로 30의 길이를 가지는 값을 의미하게 됩니다.

그럼(Bx5+C)는 어떻게 나왔을까요? B는 각각의 그리드별로 갖는 Bounding Box 후보의 개수를 나타냅니다. (논문에서는 2개씩 가지겠다. 라고 설정을 했죠) 이것은 다시 말해 하나의 그리드 안에 (x, y)가 위치해있는(바운딩 박스의 중앙점이 위치해있는) 바운딩 박스들을 2개를 선정하겠다는 말이 됩니다. 5 라는 값은 x, y, w, h, confidence score 의 의미를 갖습니다. C는 클래스의 개수를 나타내며 20개의 클래스를 갖습니다.

자, 이제 정리를 해보면 Image → CNN → FC → PT(Prediction Tensor) 과정을 거치게 되고 이 과정으로 PT를 뽑아내는데, Conv Layer, FC Layer를 통과한 PT에 대해서는 30(PT) = 5(x,y,w,h,confidence score) x 2(bounding box) + 20(ImageNet 클래스 개수)과 같이 말할 수 있으며, 이 PT 바탕으로 값을 조정하여 학습을 한다. 라고 할 수 있습니다.

Loss

MULTI Loss = Coordinate Loss + Confidence-Score Loss + No-Object Penalties + Classification Loss

PT = (x, y, w, h, Confidence-Score) x B + Classes 에 대해서 x, y는 수식의 1번 라인. w, h는 2번 라인. Confidence-Score는 3~4번 라인. Classes는 5번 라인에 대한 것들을 의미합니다.

그래서 MULTI Loss를 보면 Coordinate Loss(x, y, w, h)에 대한 수식이 있고(1~2번 라인) Confidence-Score Loss에 대한 수식(3번 라인), No-Object Penalties에 대한 수식(4번 라인), Classification Loss에 대한 수식(5번 라인)으로 이루어진 구조로 되어있습니다

수식만 보게 되면 굉장히 복잡해 보입니다.. 하지만 간단히 보면 x, y, w, h, Confidence-Score의 값이 예측값과 Ground-truth 값의 차를 구해 모두 더해준다는, 크게 어렵지 않은 내용입니다. 이후 패널티 단락에서 찾지 못한 물체들에 대한 패널티를 부여합니다. 다시 말해 물체로 찾아냈어야 하는데 찾지 못한 인덱스에 대해 C의 값의 차를 구해 loss에 더해줍니다. 마지막 단락에서 모든 물체가 있다고 판단된 인덱스들에 대해 모든 클래스들에 대해 예측 값과 실제 값의 차를 구해서 더해줍니다.

이번 포스팅에서는 간략히 개념에 대해서 짚고 가기 위해 여기까지만 짚고 넘어가겠습니다.🤦🏻‍♂️

YOLOv1의 한계

YOLOv1에서는 여러 물체들이 겹쳐있으면 제대로 된 예측이 어렵습니다. 또한 물체가 작을 수록 정확도가 감소하며 바운딩박스 형태가 data를 통해 학습되므로 새로운 형태의 바운딩박스의 경우 정확히 예측하지 못한다는 단점이 있습니다.

YOLOv2

이러한 YOLOv1 모델의 문제점을 보완하여 정확도를 높인 YOLOv2 가 등장하였습니다.

YOLOv2는 기존의 YOLO에서 성능을 올리기 위해 많은 점을 보완하였습니다. YOLOv2 에서의 핵심은 이전의 YOLO와는 다르게 Anchor Box의 개념 도입, Batch Normalization 적용, features map 크기를 7x7 에서 13x13으로 변경 하는 등의 방법을 통해 성능개선을 이뤘습니다.

개선 사항

Batch Normalization 적용 YOLO의 Convolution Layer에 Batch Normalization을 적용하여 mAP를 2% 가량 향상시켰습니다.
High Resolution Classifier YOLOv1은 VGG16 모델을 기반으로 224x224 크기의 해상도로 학습을 하고, 448x448 크기의 이미지에 대해서 Object Detection을 수행하도록 설계되어 성능이 좋지 않았습니다. YOLOv2에서는 학습 전 이미지 분류 모델을 큰 해상도의 이미지에 대해 fine-tuning 단계를 거쳐 고해상도 이미지로 CNN 신경망을 학습 할 수 있었습니다. 그 결과 약 4%의 mAP 증가의 결과를 도출했습니다.
Convolutional With Anchor Boxes 기존의 YOLOv1은 24개의Conv layer와 마지막 단락의 2개의 Fully Connected layer로부터 바운딩박스의 좌표정보를 예측했습니다. YOLOv2는 마지막 단의 Fully Connected layer을 떼어내고 Convolutional Network 형태로 prediction을 계산합니다. 또한, Anchor Box의 개념을 도입하여 바운딩 박스의 좌표를 예측하기 보다는 사전에 정의한 앵커 박스에서 offset을 예측하여 더욱 간단하게 학습을 할 수 있게 되었습니다. Anchor Box의 핵심은 사전에 크기와 비율이 모두 결정되어 있는 박스를 전제로, 학습을 통해서 이 박스의 위치나 크기를 세부 조정하는 것을 말합니다.
Dimension Cluster YOLOv2는 앵커박스를 수정하면서 바운딩 박스를 예측합니다. 그렇기 때문에 실제 경계 박스들을 클러스터링 하여 최적의 앵커박스를 찾습니다. 클러스터링 갯수 k 를 크게 늘릴수록 클러스터링 결과와 라벨과의 IOU가 커져 Recall이 상승합니다. 그러나 k가 커지면 높은 정확도를 얻을 수 있지만 속도가 느려지기 때문에 YOLOv2에서는 k=5라는 값을 사용합니다. (YOLOv2 에서는 앵커 박스를 5개 사용합니다.) 그 결과 recall과 precision 측면에서 성능을 향상시킬 수 있었습니다.
Direct location prediction YOLOv2에서는 앵커 박스에 따라 하나의 셀에서 5차원 벡터로 이루어진 바운딩 박스를 예측하며, 경계 박스가 그리드 셀에서 벗어나지 않도록 제약을 둡니다. 기존의 YOLO가 그리드의 중심점을 예측하였다면 v2에서는 left top 꼭지점으로부터 얼마나 이동하는지 예측하게 됩니다.
Fine-Grained Features 위에서 YOLOv2는 13x13 feature map을 출력한다고 설명했었습니다. 하지만 13x13의 크기는 작은 물체 검출에 대해서 약하다는 단점이 있습니다. 이와 같은 문제해결을 위해 상위 레이어의 피쳐맵을 하위 피쳐맵에 합쳐주는 passthrough layer를 도입했습니다. 이전 layer의 26x26 feature map을 가지고 와서 13x13 feature map에 이어 붙입니다. 크기가 달라 그냥 이어붙일 수 없으므로 26x26x512의 feature map을 13x13x(512*4)의 feature map으로 변환합니다. 26x26 크기의 feature map에 고해상도 특징이 담겨 있기때문에 이를 활용 하는 것입니다.
Multi-Scale Training YOLOv2는 작은 물체도 detection 하기 위해 여러 스케일의 이미지를 학습하도록 하였습니다. 10 epoch 마다 {320, 352, …, 608} 과 같이 32 픽셀 간격으로 입력 이미지의 해상도를 바꿔주며 학습을 진행합니다. 따라서 다양한 입력 크기에도 예측을 잘할 수 있습니다.

YOLOv2 Network

위에서 설명한 것들을 다시 한번 참고하여 YOLOv2의 네트워크에 대해서 한번 더 짚고 갑시다.

먼저 YOLOv2 가 더 빨라진 이유는 기존의 YOLO는 VGG-16 신경망을 사용했다면 YOLOv2는 Darknet 19 신경망을 구축하여 이용했습니다. VGG-16 신경망에서 대부분의 가중치가 쓰인 FC layer를 제거하여 가중치 파라미터 수를 낮춰줬기 때문에 훨씬 빠른 속도로 detection이 가능하게 되었습니다.

YOLOv2 Network

위에서 이미 한 번 보고온 네트워크 구조입니다. 기존의 YOLO 구조에서 변경된 점은 위의 Fine-Grained Features 에서 설명한 것과 같은 내용과 같습니다. YOLOv1과 YOLOv2의 output 을 비교해보면 v1의 최종 output은 7x7x30 이며 채널 30의 값은 (5xB+C)로 즉, (5x(바운딩박스 수)+(클래스 개수)) 이기 때문이라고 설명했었습니다. 그럼 YOLOv2 의 최종 output은 위에서 13x13x125 임을 확인할 수 있습니다. 125라는 값이 어떻게 나올까요? 보기 쉽게 정리된 그림입니다.

YOLOv2에서 앵커박스를 적용했을 때 각각의 앵커박스에 대해서 classification 정보를 가지고 있습니다. 다시 말해 하나의 anchor box에 대해 prediction을 하는데 각 prediction은 x, y, w, h, confidence, class갯수(20) 이렇게 총 25개를 의미합니다. 따라서 YOLOv2는 총 5개의 anchor box를 가지고 있기때문에13x13x(Bx(5+C)) 로 13x13x125 라는 output이 최종적으로 나오는 것을 확인 할 수 있습니다.

YOLOv2 성능 및 결과

YOLOv2는 상당히 빠르면서도 높은 성능을 보여줍니다. voc 207 과 coco 결과를 보면 voc에서는 SSD 알고리즘 보다 높은 성능을 보이지만, coco에서는 좀더 낮은 성능을 보여줍니다.

배

복잡하지 않은 pipeline과 빠른 예측속도를 유지하면서도 정확도에 대해 높은 성능을 예측한다는 장점이 더 부각되기 때문에 YOLO가 Object Detection 분야에서 한 획을 그었으며 관심을 받고 있는 것이라 생각이 듭니다.

다음 포스팅에서는 보다 더 발전한 YOLOv3 부터 YOLOv5 까지의 구조를 가지고 다시 찾아오겠습니다!

참고자료

You Only Look Once: Unified, Real-Time Object Detection

YOLO9000: Better, Faster, Stronger

PR-023: YOLO9000: Better, Faster, Stronger

십분딥러닝_14_YOLO(You Only Look Once)

Ubuntu 20.04 LTS (CLI-Server)에 CUDA 11.1 GPU 가속 연산 환경 세팅 하기

Fri, 30 Apr 2021 00:00:00 +0000

개요

GPU 가속을 활용한 딥러닝 연산 및 학습을 위해선, 적절한 환경 설정이 필요합니다.

딥러닝 개발 환경 설정은 GPU 장비의 모델명이나 Nvidia-Driver 의 호환성, CUDA 지원 정보 및 Pytorch/TensorFlow 버전 등등… 파편적으로 흩어져 있는 글을 찾아가며 상호 호환성 확인을 하고 설치하기 때문에 자료를 찾는 시간이 실제 환경 설정하는 시간보다 훨씬 길어지게 됩니다.

이러한 시간 낭비를 줄이고, 저희와 유사한 환경에 계신 다른 분들의 유연한 환경 설정을 돕고자 내용을 작성하게 되었습니다.

특히 일반적으로 개인이 많이 쓰는 GUI 버전의 Ubuntu 가 아닌 CLI(Server 용) Ubuntu 의 경우, GUI 출력에 사용되는 불필요한 패키지를 배제하고 설치하여 패키지 최적화를 할 수 있습니다.

참고 : 너드팩토리의 딥러닝 연구 장비 환경

# 기본 장비 환경
OS: Ubuntu 20.04 LTS CLI-Server
GPU-Model: RTX 2080 Ti * 6

# 설치 할 CUDA 환경
Nvidia-Driver: 450.119.03 # nvidia-headless-450-server
CUDA-Driver: 11.1 # cuda-toolkit-11-1
cudnn: 8.2.0 # cuda-toolkit-11-1

1. 전체 시스템 호환성 확인

딥러닝에 GPU 가속을 활용하기 위해선 아래 명시된 4가지 항목 사이의 상호 버전 호환성이 모두 성립되어야 합니다

GPU Device
Nvidia-Driver
CUDA + cudnn
AI FrameWork ( Pytorch / TensorFlow )

따라서 이에 대한 시스템 호환 버전을 먼저 파악 해둔 뒤, 정해진 버전을 설치하는게 필요합니다

GPU 확인

먼저 설치된 GPU 장치가 어떤 모델인지 확인합니다

lspci -k                # 전체 장치 정보 열람
  or
lspci -k | grep NVIDIA  # 장치 정보가 너무 많아서 파악하기 어려운 경우 NVIDIA 키워드로 필터

호환성 체크
- 설치된 GPU 와 OS 버전에 맞는 그래픽 드라이버를 검색하여 적합한 Nvidia-Driver 를 확인
  - NVIDIA-Driver 고급 검색
- Nvidia-Driver 와 호환 가능한 CUDA 버전을 확인
  - Nvidia-Driver & CUDA Check
```
  ex) CUDA 11.1 을 설치하려면, 450.80.02 보다 최신 버전의 Nvidia-Driver 설치가 필요
  출처  -  [https://docs.nvidia.com/deploy/cuda-compatibility/index.html](https://docs.nvidia.com/deploy/cuda-compatibility/index.html)
```
- 설치된 GPU 의 연산 성능에 따른 지원 CUDA 버전을 확인합니다
  - GPU Support
    - 버전 확인 예시
      
      GeForce RTX 2080 Ti 의 경우, 위 링크의 Compute capability 값이 7.5 이고,
      CUDA SDK 10.0 – 10.2 support for compute capability 3.0 – 7.5 CUDA SDK 11.0 support for compute capability 3.5 – 8.0 CUDA SDK 11.1 – 11.3 support for compute capability 3.5 – 8.6
      로 확인 되므로, 해당 GPU 장비는 CUDA 10.0 – 10.2 , 11.0 – 11.3 를 설치할 수 있습니다
- AI FrameWork 의 CUDA 지원 확인
  - Pytorch
    
    https://download.pytorch.org/whl/torch_stable.html
    
    위 torch_stable 아카이브 링크를 통해 사용하려는 torch 버전과 이를 지원하는 CUDA 버전이 있는지 확인합니다
    예시 ) cu111/torch-1.8.0%2Bcu111-cp36-cp36m-linux_x86_64.whl 와 같은 경우, cuda-11.1 과 torch-1.8.0 을 호환하는 python3.6 버전 용 linux 기반 라이브러리를 지원한다는 의미
    지원하는 버전 확인 후, 구체적인 설치 명령어는 아래 링크를 통해 확인 가능합니다 https://pytorch.org/get-started/previous-versions/
  - TensorFlow

2. Nvidia-Driver 세팅 for CLI Server

Nvidia-Driver 설치 확인

cat /proc/driver/nvidia/version
  or
nvidia-smi

>>>
# 드라이버 미 설치시 응답
cat: /proc/driver/nvidia/version: No such file or directory

# 드라이버가 설치 되어 있는 경우 응답
NVRM version: NVIDIA UNIX x86_64 Kernel Module  450.119.03  Mon Mar 29 17:51:27 UTC 2021
GCC version:  gcc version 9.3.0 (Ubuntu 9.3.0-17ubuntu1~20.04)
# 이미 드라이버가 설치 되어 있는 경우,
# 호환성 체크 후, 필요에 따라 드라이버 제거 후 맞는 버전으로 재설치 진행합니다

Nvidia-Driver 설치를 위한 패키지 리스트 수집

# Ubuntu 버전을 "release" 변수 에 저장
$ release="ubuntu"$(lsb_release -sr | sed -e "s/\.//g")
$ echo $release
>>> ubuntu2004

# Nvidia 아카이브로부터 드라이버 리스트 수집
$ sudo apt install sudo gnupg
$ sudo apt-key adv --fetch-keys "http://developer.download.nvidia.com/compute/cuda/repos/"$release"/x86_64/7fa2af80.pub"
$ sudo sh -c 'echo "deb http://developer.download.nvidia.com/compute/cuda/repos/'$release'/x86_64 /" > /etc/apt/sources.list.d/nvidia-cuda.list'
$ sudo sh -c 'echo "deb http://developer.download.nvidia.com/compute/machine-learning/repos/'$release'/x86_64 /" > /etc/apt/sources.list.d/nvidia-machine-learning.list'
$ sudo apt update

설치하려는 드라이버 확인

apt-cache search nvidia-driver

>>>
nvidia-driver-418 - Transitional package for nvidia-driver-430
nvidia-driver-435 - Transitional package for nvidia-driver-455
nvidia-driver-440 - Transitional package for nvidia-driver-450
nvidia-driver-450 - NVIDIA driver metapackage
nvidia-driver-450-server - NVIDIA Server Driver metapackage
nvidia-driver-455 - Transitional package for nvidia-driver-460
nvidia-driver-460 - NVIDIA driver metapackage
nvidia-headless-450 - NVIDIA headless metapackage
nvidia-headless-450-server - NVIDIA headless metapackage
nvidia-headless-460 - NVIDIA headless metapackage
nvidia-headless-no-dkms-450 - NVIDIA headless metapackage - no DKMS
nvidia-headless-no-dkms-450-server - NVIDIA headless metapackage - no DKMS
nvidia-headless-no-dkms-460 - NVIDIA headless metapackage - no DKMS
nvidia-driver-418-server - NVIDIA Server Driver metapackage
nvidia-driver-440-server - Transitional package for nvidia-driver-450-server
nvidia-driver-460-server - NVIDIA Server Driver metapackage
nvidia-headless-418-server - NVIDIA headless metapackage
nvidia-headless-460-server - NVIDIA headless metapackage
nvidia-headless-no-dkms-418-server - NVIDIA headless metapackage - no DKMS
nvidia-headless-no-dkms-460-server - NVIDIA headless metapackage - no DKMS
nvidia-driver-430 - Transitional package for nvidia-driver-465
nvidia-driver-465 - NVIDIA driver metapackage
nvidia-headless-465 - NVIDIA headless metapackage
nvidia-headless-no-dkms-465 - NVIDIA headless metapackage - no DKMS
  ...... (중략)

나타난 리스트 중, 우리는 GUI 출력을 전혀 사용하지 않는 서버용 CLI 버전을 설치 → headless 드라이버를 설치 ( ex. nvidia-headless-450-server )

참고

GUI 가 포함된 일반 데스크탑 버전을 설치하려면 nvidia-driver-450 을 설치하면 됩니다 nvidia-driver-450 와 nvidia-driver-450-server 는 저장 경로상의 차이만 있을 뿐 패키지 구성은 동일해서 nvidia-driver-450-server 를 설치해도 GUI 출력 모듈이 같이 설치되므로 GPU 메모리 자원을 아끼려면 꼭! nvidia-headless-450-server 를 설치해야 됩니다

Ref : https://linustechtips.com/topic/1263727-installing-nvidia-drivers-on-ubuntu-also-installs-gui-environment/

드라이버 설치 후 Reboot

sudo apt-get install nvidia-headless-450-server
sudo apt-get install nvidia-utils-450
sudo apt-get install dkms nvidia-modprobe

sudo reboot now

최종 설치 확인

sudo cat /proc/driver/nvidia/version
  or
nvidia-smi

>>>
NVRM version: NVIDIA UNIX x86_64 Kernel Module  450.119.03  Mon Mar 29 17:51:27 UTC 2021
GCC version:  gcc version 9.3.0 (Ubuntu 9.3.0-17ubuntu1~20.04)

Ref : https://hiseon.me/linux/ubuntu/install_nvidia_driver/

3. CUDA & cudnn 세팅 for CLI Server

호환성 확인 된 Nvidia-Driver 가 이미 설치 되어 있는것을 전제로 합니다. Nvidia-Driver 가 아직 준비되지 않았다면 해당 드라이버를 먼저 설치 후 진행해주세요

CUDA 설치 확인

ls -l /usr/local | grep cuda

>>>
# CUDA 미 설치시 응답
(응답 내용 없음)

# CUDA 가 설치 되어 있는 경우 응답
lrwxrwxrwx  1 root root   22 May  6 10:59 cuda -> /etc/alternatives/cuda
lrwxrwxrwx  1 root root   25 May  6 10:59 cuda-11 -> /etc/alternatives/cuda-11
drwxr-xr-x 14 root root 4096 May  6 10:59 cuda-11.1

설치를 위한 패키지 리스트 수집

# Ubuntu 버전을 "release" 변수 에 저장
$ release="ubuntu"$(lsb_release -sr | sed -e "s/\.//g")
$ echo $release
>>> ubuntu2004

# Nvidia 아카이브로부터 드라이버 리스트 수집
$ sudo apt install sudo gnupg
$ sudo apt-key adv --fetch-keys "http://developer.download.nvidia.com/compute/cuda/repos/"$release"/x86_64/7fa2af80.pub"
$ sudo sh -c 'echo "deb http://developer.download.nvidia.com/compute/cuda/repos/'$release'/x86_64 /" > /etc/apt/sources.list.d/nvidia-cuda.list'
$ sudo sh -c 'echo "deb http://developer.download.nvidia.com/compute/machine-learning/repos/'$release'/x86_64 /" > /etc/apt/sources.list.d/nvidia-machine-learning.list'
$ sudo apt update

설치하려는 CUDA 드라이버 확인 및 설치

apt-cache search cuda

>>>
cuda-11-0 - CUDA 11.0 meta-package
cuda-11-1 - CUDA 11.1 meta-package
cuda-11-2 - CUDA 11.2 meta-package
cuda-11-3 - CUDA 11.3 meta-package
  ......
cuda-toolkit-11-0 - CUDA Toolkit 11.0 meta-package
cuda-toolkit-11-1 - CUDA Toolkit 11.1 meta-package
cuda-toolkit-11-2 - CUDA Toolkit 11.2 meta-package
cuda-toolkit-11-3 - CUDA Toolkit 11.3 meta-package
  ...... (중략)

나타난 리스트 중, 우리는 GUI 출력을 전혀 사용하지 않는 서버용 CLI 버전 CUDA 를 설치

sudo apt install --no-install-recommends cuda-toolkit-11-1
# --no-install-recommends 옵션을 추가해 GUI 용 패키지는 설치 제외

GUI 출력 모듈 배제 및 nvidia-driver 패키지가 업데이트 되어 섞이는 일이 발생하지 않기 위해선, 꼭! --no-install-recommends 옵션이 추가된 cuda-toolkit-11-1 을 설치해야 됩니다 ( GUI 가 포함된 일반 데스크탑 버전을 설치하려면 cuda-11-1 을 설치하면 됩니다 )

cudnn 드라이버 확인 및 설치

apt-cache search cudnn

>>>
libcudnn7 - cuDNN runtime libraries
libcudnn7-dev - cuDNN development libraries and headers
libcudnn8 - cuDNN runtime libraries
libcudnn8-dev - cuDNN development libraries and headers
  ...... (중략)

적합한 cudnn 라이브러리 설치

sudo apt install libcudnn8-dev

최종 설치 버전 확인

CUDA 확인

설치된 시스템 경로를 통한 확인

ls -l /usr/local | grep cuda

>>>
# CUDA 미 설치시 응답
(응답 내용 없음)

# CUDA 가 설치 되어 있는 경우 응답
lrwxrwxrwx  1 root root   22 May  6 10:59 cuda -> /etc/alternatives/cuda
lrwxrwxrwx  1 root root   25 May  6 10:59 cuda-11 -> /etc/alternatives/cuda-11
drwxr-xr-x 14 root root 4096 May  6 10:59 cuda-11.1

nvcc --version 으로 확인

해당 명령은 cuda 전체 패키지 - GUI 출력 모듈 포함 - 을 설치 할 때, 자동으로 설정되는 시스템 변수를 통해 cuda version 을 출력하는 명령입니다. 현재 시스템은 CLI Only 이므로 수동으로 시스템 변수를 설정해 줘야, nvcc 를 통한 버전 확인이 가능합니다
- nvcc 시스템 변수 설정 방법
  1. $ sudo vi ~/.profile
  2. 해당 파일의 가장 밑 단락에 아래 내용 추가 export PATH=/usr/local/cuda-11.1/bin:$PATH export LD_LIBRARY_PATH=/usr/local/cuda-11.1/lib64:$LD_LIBRARY_PATH
  3. $ source ~/.profile
```
nvcc --version

>>>
# 시스템 변수 설정 전, 혹은 CUDA 미 설치시 응답
Command 'nvcc' not found ~

# CUDA 가 설치 및 시스템 변수 설정 완료 후 응답
nvcc: NVIDIA (R) Cuda compiler driver
Copyright (c) 2005-2020 NVIDIA Corporation
Built on Mon_Oct_12_20:09:46_PDT_2020
Cuda compilation tools, release 11.1, V11.1.105
Build cuda_11.1.TC455_06.29190527_0
```

cudnn 확인

whereis cudnn
>>>
cudnn: /usr/include/cudnn.h
# OS에 따라 위치가 다를 수 있음

# 위에서 검색한 cudnn.h 경로와 동일한 곳의 cudnn_verion.h 에서 탐색
cat /usr/include/cudnn_version.h | grep CUDNN_MAJOR -A 2
>>>
#define CUDNN_MAJOR 8
#define CUDNN_MINOR 2
#define CUDNN_PATCHLEVEL 0
  ...... (중략)
→ ( cudnn 8.2.0 ver )

※ nvidia-smi 를 입력해서 나오는 CUDA 버전은 해당 nvidia-driver 가 지원하는 CUDA 버전을 나타내는 것이지, 실제 서버에 설치된 CUDA 버전을 나타내는것이 아닙니다 ※

마무리

지금까지 RTX 2080 Ti 가 탑재된 Ubuntu 20.04 LTS CLI-Server 에 CUDA 환경 설정을 진행해보았습니다.

이후에는 각자 필요한 딥러닝 프레임워크 (Pytorch/TensorFlow) 의 GPU 가속 버전을 설치한 뒤, 실제 GPU 가속이 가능한지 확인해보면 됩니다 (확인 방법은 아래와 같습니다)

이번 포스팅을 통해 환경 설정 때문에 생기는 불필요한 시간 낭비를 줄이고, 빠르게 CUDA 작업 환경을 설정하는데 도움이 되길 기대합니다

GPU 가속 확인

Pytorch : Pytorch-GPU 버전이 설치된 Python 환경에서 다음 실행

import torch

torch.cuda.is_available()
>>> True  # False 로 출력된다면 GPU 가속 사용이 불가능

torch.version.cuda
>>> '11.1'  # Pytorch 가 인식하고 있는 CUDA 버전

torch.cuda.device_count()      # 사용 가능한 GPU 개수 반환
torch.cuda.get_device_name(0)  # 0번 GPU 장치 모델 > 숫자를 바꿔서 다른 장치 확인 가능

TensorFlow : TensorFlow-GPU 버전이 설치된 Python 환경에서 다음 실행

from tensorflow.python.client import device_lib
device_lib.list_local_devices()

# GPU 가속이 가능하다면 사용 가능한 GPU device 가 출력

Reference

VODA 디자인 시스템 2

Fri, 05 Mar 2021 00:00:00 +0000

안녕하세요, 너드팩토리 프로덕트 디자이너 Allison입니다.

지난번에는 디자인 시스템을 구축한 계기, 필요한 이유와 구축 기준(타이포그래피와 그리드와 간격)을 알아봤습니다. 이번 편에는 브랜드 컬러를 정한 기준과 UI 컴포넌트 구성에 대해 말할게요. 하단 링크를 통해 먼저 1편을 보고 오는 것을 권장합니다.

https://blog.nerdfactory.ai/2021/01/11/voda-design-system-1.html

3) Colors

컬러는 서비스를 대표하고 브랜드의 성격을 말해주는 요소입니다. 너무 많은 컬러를 사용할 경우 브랜드 아이덴티티가 약해져 일관된 사용자 경험을 제공하기 어렵습니다. 그러나 너무 적은 컬러로는 디자인할 때 한계에 부딪힐 수 밖에 없어요. 그래서 명암에 따라 10단계로 나누고 이것을 기반으로 브랜드 아이덴티티를 지키며 유연한 디자인을 합니다.

3-1) Gray Scale Colors

GUI 디자인 작업을 하기 전 정보의 계층구조를 나타낼 때 사용합니다. 그 외에 텍스트, 정보를 나누기 위한 구분선 요소에 사용해요. Grey 컬러가 필요할 때마다 마법사처럼 혹은 그 날의 기분에 따라 매번 다른 그레이 컬러를 사용할 수 없으니 Grey50, 100, 200, 300, 400, 500, 600, 700, 800 ,900까지 총 10단계로 나눕니다. 필요에 따라 더 세분화하거나 간소화할 수 있으며 브랜드 분위기에 따라 Cool Tone/Warm Tone으로 바꿀 수 있어요.

3-2) Brand Colors

Primary

VODA의 브랜드 컬러를 지정할 때 두 가지 요소를 고려했습니다.

첫 번째, 유사 서비스와 다른 컬러를 사용하여 브랜드 컬러만으로 시각적 인지도를 얻자
두 번째, 기존 운영 중인 AIVORY와 다른 서비스를 제공하므로 컬러 자산을 계승하지 않고 독자적인 컬러를 갖자.

그래서 결정한 Primary Color는 #7851e7입니다.

Secondary

Primary Color와 조화와 전체적인 브랜드 방향성을 고려해 결정합니다. VODA에서 Secondary Colors는 대부분 그래프에서 요소 구분을 위해 사용하므로 이 또한 고려해야 합니다.

퍼플 계열(Primary Color)과 사용했을 때 구분이 확실 해야 하므로 난색 계열로 갈 것
함께 사용했을 때 Primary Color와 조화로울 것

그래서 결정한 컬러는 오렌지 계열인 #ff9931와 난색에 가까운 올리브 그린 컬러 #b0b900로 결정했어요.

VODA는 데이터를 시각화할 일이 많고 그에 따라 더 많은 컬러 팔레트가 필요해요. 그래서 이 컬러들을 중심으로 바리에이션 하여 더 다양한 팔레트를 만들어 상황에 따라 사용합니다.

Eva 디자인 시스템에서 Color Generator를 사용하면 더 쉽게 팔레트를 만들 수 있습니다.: https://colors.eva.design/

Eva Design System: Deep learning color generator

3-3) System Colors

브랜드 컬러와는 별개로 사용자에게 직관적으로 시스템의 상태를 전달하기 위해 사용하는 컬러입니다. Danger(Error), Warning, Success, Info로 구분하여 순서대로 Red, Yellow, Green, Blue 계열로 설정합니다. 시스템의 상태를 효과적으로 전달하기 위해 아이콘, 텍스트와 함께 디자인할 것을 권장해요. (UI 컴포넌트-Input 섹션 참고)

또한 VODA에서는 Heatmap에서 사용할 그라데이션 컬러가 필요했습니다. 이때부터 컬러 지옥에 빠졌어요..:( 슬프지만 침착하게 일러스트레이터를 켭니다. 컬러 변경의 기점이 되는 시스템 컬러들을 적당한 간격을 두고 일직선에 배치한 후 블랜딩 툴(W)을 이용하여 그라데이션을 줍니다. 어도비 선생님께 감사한 순간이에요.

(블랜딩 툴 사용법: https://www.youtube.com/watch?v=tQdWx_PbawU)

#08 블렌드툴 I 일러스트레이터 왕초보 기초강좌 I 블렌드 툴에 대해서 알아보아요I 디자이너깜짝의 친절한 그래픽

블랜딩해서 나온 컬러들을 복사, Xd나 Figma으로 가져옵니다. 일러스트레이터에 출력 된 컬러를 모두 사용하면 너무 많으니 이 중에서 10~15개 정도 추려 정리합니다.

4) UI Components

서비스 안에서 공통으로 사용하는 UI 컴포넌트로 Icons, Input, Button, Modal, Table 등이 여기에 해당합니다. 현재 VODA는 Web 서비스만 제공하므로 Web UI 컴포넌트를 기준으로 했어요. 전체 서비스에서 두 개 이상 들어갈 시 컴포넌트로 등록하고 구성요소에서 불러와 사용하는 것이 수정에 용이하고 디자이너 정신건강에 이롭습니다. UI 컴포넌트에서 중요한 사항은 단순한 디자인 리소스를 만드는 것이 아니라는 점입니다. 팀원 간의 약속을 만드는 작업으로 컴포넌트 쓰임에 대한 이해를 기반으로 명확한 규칙을 세워 팀원 모두가 보고 이해할 수 있어야 합니다.

VODA 디자인 시스템의 UI 컴포넌트 중 일부만 공개합니다.

아이콘은 4의 배수로 결정하고(원형 제외) 비율에 맞게 Keyline 내에서 작업하여 전체적인 아이콘 크기를 맞춰 일관성을 유지합니다.

이 외에도 로고 가이드 디자인, UI 텍스트 가이드라인(UX Writings) 등 프로젝트 상황 또는 필요에 맞게 추가할 수 있습니다.

5. 지속가능한 디자인 시스템

디자인 시스템에서 중요한 것은 단순히 좋아 보이게 만드는 것이 아닌 팀원 모두가 디자인 시스템에 대해 이해할 수 있도록 만드는 것입니다. 이러한 디자인 시스템은 디자인에 대한 의사결정을 하는 데 있어 도움을 주고 커뮤니케이션 비용을 줄여 업무의 효율성을 높여줍니다. 그러나 디자인 시스템은 효율적인 도구일 뿐 절대적인 가이드라인이 될 수 없어요. 그러니 프로젝트 상황에 맞게 수정하고 유연히 적용하길 바랍니다. VODA 디자인 시스템 또한 서비스의 지속적인 운영과 더 나은 사용자 경험을 제공하기 위해 수정을 거듭하며 발전할게요!

끝 🙌

Reference:

https://ridi.design/

RIDI Design System

백마 인턴십 후기

Wed, 03 Mar 2021 00:00:00 +0000

개요

지난 2020년 12월 21일부터 진행된 충남대학교 백마 인턴십을 통해 너드팩토리에서는 3명의 인턴분들이 지원하여 참여하였습니다. 2개월이 된 지금, 너드팩토리 안에서 인턴으로 활동한 내용과 느낀점에 대해 인터뷰를 진행했습니다.

Q. 자기소개 부탁드립니다.

왼쪽부터 버스터(오재성), 조(조윤혁), 홉스(김민중)

Buster : 너드팩토리에 백마인턴십으로 지원해 인공지능 이미지 처리 개발을 담당한 Buster 오재성입니다.

Jo : 안녕하세요. 충남대학교 백마 인턴십을 통해 2개월 동안 플랜아이에서 근무하게 된 Jo 조윤혁입니다. 저는 인공지능 개발을 담당하게 되었습니다.

Hobbes : 너드팩토리에서 인턴십 활동을 진행하면서 백엔드 개발을 담당한 Hobbes 김민중 입니다.

Q. 인턴십에 지원한 동기가 무엇인가요?

Buster : 학교에서 배웠던 기계학습 같은 인공지능 강의나 여러 IT업계 유튜버들의 인공지능 이론 및 개발에 대한 지식을 접하며 해당 내용을 실제 개발 현장에서 어떻게 활용하고 프로젝트가 진행되는지 호기심이 생겼습니다. 이에 대한 현장의 경험을 쌓고 싶어서 플랜아이 기업부설연구소 인턴에 지원하게 되었습니다.

Jo : 학교에서 배운 인공지능 지식이 현업에서는 어떻게 쓰이는지 경험해보고 싶었습니다. 또 현업에 종사하시는 개발자들이 협업을 어떤식으로 진행하는지도 궁금했습니다. 마침 플랜아이 너드팩토리에서 요구하는 사항이 인공지능 지식과 Git에 대한 사용 여부였기에 적합하다고 생각하여 지원하게 되었습니다.

Hobbes : 학과에 배운 전공 관련 교과 과목들에 대한 실제 직무에서의 직접적 활용 방법과 현역 개발자분들의 협업 과정에 대하여 직접 경험하고 싶어 인턴십 활동에 지원하였습니다.

Q. 인턴십에서 어떤 업무를 하였고 무엇을 배웠나요?

Buster : AI개발 중 이미지 처리 프로젝트를 진행하면서 DenseNet 모델과 Pytorch라이브러리를 활용한 유사 이미지 분류기 제작 업무를 진행하였습니다. 처음 모델에 대한 깊은 이해를 위해 같은 업무를 하게된 Jo님과 같이 연구실 내의 인공지능 관련 수학 책이나 교제, github내 이미지 처리 모델 소스코드 그리고 논문 등의 많은 자료를 참고하면서 이미지 처리 모델의 동작과 코드 구성에 관한 구체적인 지식을 배울수 있었습니다. 같이 활용한 Pytorch도 이전에 사용했었던 sklearn이나 keras 등과 다른 처음 사용하는 라이브러리라서 익숙하지 않은 부분이 많았지만 인터넷 내의 튜토리얼 자료들과 루카스 님의 가이드라인으로 익숙하지 않은 라이브러리를 활용하고 배우는 것도 흥미로웠습니다.

Jo : 검색도구의 자료로 활용될 수 있는 유사이미지분류 기술을 학습하고 구현하였습니다. 전반적인 틀은 전이학습기반으로 구성하고 사전에 학습된 모델은 DenseNet모델을 적용했기에 구현하기 전에 전이학습에 대해 학습하고 DensNet모델을 면밀히 분석하는 시간을 가졌습니다. 이렇게 인공지능 모델을 세세하게 분석하고 논문까지 본 적은 없었기에 어려운 부분이 있었지만 실제 구현하는 부분에서 많은 도움이 되었습니다. 또 Buster님과 협업을 진행하면서 한 프로젝트를 완성하는데 커뮤니케이션이 정말 중요하다는 것을 경험할 수 있었습니다.

Hobbes : 주로 Backend 개발에 대하여 업무를 진행하였는데, 파이썬의 Django 프레임워크에서 Model 생성 후 데이터베이스에 Model 값들을 추가하여 Django rest-framework 를 활용하여 restful API 를 직접 만들어서 관리하는 업무를 진행하였습니다. 과거에 오픈 API 를 사용해 본 경험은 있지만 API 가 어떤 원리로 만들어지고 배포되는 과정에 대하여는 알지 못하였습니다. 하지만 인턴십 동안 진행한 업무를 통하여 직접 모델 생성하는 것부터 시작하여 사용자가 필요한 조건을 만족시키는 API를 설계하는 작업을 하면서 Backend 개발에 대한 많은 지식과 경험을 얻을 수 있었습니다.

DenseNet 모델 아키텍처 설명

Q. 인턴십을 통해 느낀점은 무엇인가요?

Buster : 실무 환경에서 어떻게 협업이 이루어지고 Notion을 통한 업무 관리 그리고 Jo님과의 협업을 통한 디테일한 의사소통의 중요성이 크게 느껴졌습니다. 특히, 단순 학교에서 개인 텀 프로젝트를 진행하거나 흔히 버스탄다고 이야기하는 특정 누군가 주도하는 학교 팀 프로젝트가 아닌 동등한 비중을 담당하는 프로젝트를 진행하며 시행착오를 겪어 본 게 앞으로 큰 경험이 될 것같다는 느낌을 받았습니다.

Jo : 이번 인턴십에서 프로젝트를 진행하면서 매주 notion을 통해 업무를 계획하고 slack으로 소통하며 git으로 서로 코드를 공유하면서 협업을 경험한 점이 유익했습니다. 다만 처음 해보는 협업이기에 소통하는 부분에서 어려움이 있었습니다. 오해로 인해 코드가 분리되기도 해서 아쉬웠지만 이런 점을 해결하기 위해 노력하고 서로 다름을 공감했던 점이 좋은 경험이었던 것 같습니다.

Hobbes : 데일리 스크럼, notion의 sprint 관리, slack을 통한 커뮤니케이션 등의 현재 너드팩토리에서 협업하는 과정에 대하여 직접 일원이 되어 함께 진행하면서 협업에 대한 경험을 할 수 있었던 점이 좋았습니다. 또한, Backend 개발에 대한 많은 경험을 통하여 관련 지식을 얻은 점이 매우 만족스럽습니다.

Django Backend 코드 리뷰

Q. 앞으로의 목표가 무엇인가요?

Buster : 인턴십 이후 학기로 넘어가 졸업 프로젝트도 연계해 진행하게 되었는데 이번 경험을 바탕으로 발생했던 문제들을 개선하며 성공적으로 졸업 프로젝트도 주도하는 것이 목표입니다.

Jo : 인턴십을 통해 얻은 경험과 자신감을 가지고 졸업 후에는 가고자 하는 기업에 필요한 사람이 되고 싶습니다.

Hobbes : 너드팩토리에서 인턴십을 진행하면서 백엔드 개발에 대한 많은 지식들을 얻을 수 있었는데, 이를 바탕으로 실제 구동되고 있는 서버 및 데이터베이스 관리까지 할 수 있는 백엔드 개발자가 되는것이 목표입니다.

Q. 너드팩토리에게 한마디

Buster : 처음 하는 인턴이라 걱정도 많고 긴장도 많이 한 상태였지만 모두 친절히 대해주시면서 형성된 편안한 분위기 덕분에 빠르게 적응할수 있었던거 같습니다. 감사하다는 말씀을 먼저 드리면서 이러한 긍정적인 문화를 앞으로도 실천해나갈수 있는 개발자가 되겠습니다.

Jo : 너드팩토리 플랜아이 인턴 기간 초반에는 잘 적응할 수 있을지 걱정이 됐었지만, 회사에 빨리 익숙해지도록 노력해주셔서 감사했습니다. 또 현업에서의 경험에 관한 얘기를 많이 해주시고 바쁘신 와중에 진로에 대해 조언도 아낌없이 해주셔서 얻어가는 것이 많은 시간이었던 것 같아 정말 감사한다는 말씀 전하고 싶습니다.

Hobbes : 많이 부족한 상태로 처음 인턴십을 시작하였지만, 매주 스프린트 설계, 데일리 스크럼 및 너드님들의 지속적인 리뷰를 통하여 조금은 발전하여 인턴십을 마무리하는 것 같습니다. 이에 바쁘신데도 수많은 도움을 주신 너드팩토리의 너드님들에게 정말 감사합니다.

사내 카페 AROPA 에서

마치며

2개월 정도의 짧은 기간 이었지만, 인턴으로 오신 3분과 함께 연구소의 문제를 함께 해결하며 많은 것을 경험할 수 있었습니다. 특히 협업과 조화, 의사소통의 가치에 대해 기존의 너드팩토리 구성원들 역시 많은 것을 깨달을 수 있는 유익한 시간이었습니다.

아쉽게도 인턴 기간이 종료되어 이별을 하게 되었지만, 너드팩토리와 함께한 소중한 경험을 바탕으로 더욱 발전된 앞날을 만들어가시길 응원합니다.

감사합니다

Django REST Framework로 API 만들기 & HTML 요소 수집하기

Wed, 24 Feb 2021 00:00:00 +0000

개요

이 포스팅은 Django 설치부터, Django Rest Framework 를 활용한 API 개발 방법, 이를 응용한 웹페이지의 요소별 정보를 바탕으로 API 개발을 하는 과정에 대하여 소개합니다.

Django 는 Django Software Foundation이 관리하는 Python 으로 작성된 오픈소스 웹 애플리케이션 프레임워크로, Model - View - Controller(MVC) 패턴을 따르고 있습니다.

고도의 데이터베이스 기반 웹 사이트를 작성하는 데에 있어서 수고를 더는것이 Django 의 주된 목표이자 철학입니다. 이에 따라 Django를 사용하면 데이터베이스 기반 웹 사이트를 개발하는데 굉장히 쉽고 빠르게 접근할 수 있습니다.

Instagram, NASA, Mozila 등 다양한 기업들이 서비스에 Django를 사용하는 것으로 알려져 있습니다.

Django Rest Framework 를 사용한 restful API 개발

Get Started

Django 는 Python 을 기반으로 하는 프레임워크입니다. Python(3.4버전 이상)이 설치되어 있어야 합니다.

Install Django

$ pip install Django

장고 설치가 완료되었다면, 장고의 프로젝트 관리 도구 django-admin 을 사용할 수 있습니다.

$ django-admin startproject djangoProject

django-admin 의 startproject 를 통하여 새로운 프로젝트를 생성할 수 있습니다.

.
├── djangoProject
│  ├── __init__.py
│  ├── asgi.py
│  ├── settings.py
│  ├── urls.py
│  └── wsgi.py
├── manage.py

startproject 로 프로젝트를 생성한 뒤 디렉토리 모습입니다.

데이터베이스 파일인 db.sqlite3 , Django 기능들을 관리하는 manage.py 가 생성되었습니다.

$ python manage.py runserver

runserver 를 통하여 http://localhost:8000 에 접속하면,

이러한 화면을 볼 수 있으면 문제없이 Django 설치가 완료된 것입니다.

Model

장고는 Model-View-Template(MVT) 패턴으로 이루어져있는데, 먼저 Model 을 생성 후, 데이터베이스에 해당 Model을 생성할 것입니다.

django-admin 의 startapp 을 사용하여 새로운 product 를 생성합니다.

$ django-admin startapp product

$ tree

.
├── djangoProject
│  ├── __init__.py
│  ├── asgi.py
│  ├── settings.py
│  ├── urls.py
│  └── wsgi.py
├── manage.py
├── product
│  ├── __init__.py
│  ├── admin.py
│  ├── apps.py
│  ├── migrations
│  │  └── __init__.py
│  ├── models.py
│  ├── tests.py
│  └── views.py

새로운 app, product 를 생성하였습니다. 그 후 디렉토리 모습을 보면 product 디렉토리가 생성된 것을 볼 수 있습니다.

.
├── __init__.py
├── admin.py
├── apps.py
├── migrations
│   └── __init__.py
├── models.py
├── tests.py
└── views.py

product 디렉토리 내부의 모습입니다. 여기서 자신이 만든 app 의 Model, View 등을 작성하여 기능을 추가할 수 있습니다.

먼저, Model을 생성하겠습니다.

#models.py
from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=70)
		price = models.IntegerField()
		created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.name

Product 라는 Model 을 생성하였습니다.

Product Model 에는 name, price, created_at 3가지의 값이 있는데, 해당 값의 Type 에 맞게 model Field 를 설정해줍니다.

djangoProject/settings.py 에서 INSTALLED_APPS 에 자신이 생성한 app 을 추가합니다.

#djangoProject/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'product', #추가
]

변경 사항을 기반으로 새 마이그레션을 생성합니다

(venv) Kimminjung@gimminjung-ui-MacBook-Air djangoProject % python manage.py makemigrations
Migrations for ‘product’:
  product/migrations/0001_initial.py
    - Create model Product
(venv) Kimminjung@gimminjung-ui-MacBook-Air djangoProject % python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, product, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying product.0001_initial... OK
  Applying sessions.0001_initial... OK

이러한 메세지가 출력되면 정상적으로 새 마이그레이션이 생성됩니다.

Django REST Framework

Django REST Framework 는 웹 API를 구축할 수 있는 툴킷입니다. 이 프레임워크를 통하여 생성한 Model 을 바탕으로 조건에 맞는 API를 개발할 수 있습니다.

Install Django REST Framework

$ pip install djangorestframework
$ pip install django-filter #Filtering support

#/djangoProject/settings.py
INSTALLED_APPS = [
   ...
    'product',
		'rest_famework', #추가
]

INSTALLED_APPS 에 rest_framework 를 추가하면 Django REST Framework 의 기능들을 사용할 준비가 끝났습니다.

Serializer

Serializer 는 queryset 과 model instance 같은 것들을 쉽게 JSON 또는 XML 의 데이터 형태로 렌더링 할 수 있게 해줍니다. 우리는 Product 모델을 serialize 해줘야 하기 때문에 ModelSerializer를 사용합니다.

product 디렉토리에 [serializers.py](http://serializers.py) 파일을 생성합니다.

#product/serializers.py
from rest_framework import serializers
from .models import Product

class ProductSerializer(serializers.ModelSerializer) :
    class Meta :
        model = Product        # product 모델 사용
        fields = '__all__'            # 모든 필드 포함

serializers.py 의 코드입니다.

View

View 에서는 생성한 Model 에 대하여 기능들을 추가할 수 있습니다. product app 은 생성한 Model 에 대하여 관련 API 개발이 목적이기 때문에 product/view.py 에서는 rest_framework 의 view 를 사용하여 API View 를 작성합니다.

rest_framework 의 API View 는 크게 두가지로 나뉘는데, CBV(Class Based View) 와 FBV(Function Based View) 로 구분 할 수 있습니다. product 모델의 API view 는 CBV 중 APIView 를 사용합니다.

CBV는 Class 의 장점을 모두 사용할 수 있어 코드의 효율을 극대화 할 수 있는 장점이 있고, 여러가지 조건들에 맞게 API 를 개발할 시, 중복되는 코드의 길이를 줄여 효율을 높일 수 있는 점 등으로 인하여 CBV 중 APIView 를 사용합니다.

#view.py
from django.shortcuts import render
from rest_framework.response import Response
from .models import Product
from rest_framework.views import APIView
from .serializers import ProductSerializer
class ProductListAPI(APIView):
    def get(self, request):
        queryset = Product.objects.all()
        print(queryset)
        serializer = ProductSerializer(queryset, many=True)
        return Response(serializer.data)

view.py 의 코드 입니다.

Model을 생성하고 목적에 맞는 view.py 를 작성하였다면, url을 매핑 해 주어야 합니다.

#/djangoProject/url.py
from django.contrib import admin
from django.urls import path
from product.views import ProductListAPI

urlpatterns = [
    path('admin/', admin.site.urls),
		path('api/product/', ProductListAPI.as_view())
]

product의 API 를 나타내는 json 이 있는 페이지 이므로 'api/product/' 로 url을 매핑 해 주었습니다.

이제 Django ORM 의 query 에 값들을 입력해 준다. runserver 를 통하여 localhost:8000/admin 으로 접속하여 Django admin 페이지에서 Product Model에 맞는 값들을 입력합니다.

#Django admin 페이지에 Product 모델을 등록하는 코드
#admin.py
from django.contrib import admin
from .models import Product

admin.site.register(Product)

Product 모델이 추가 되었습니다

Model 의 type 에 맞게 값들을 입력합니다.

빠른 방법으로 하기 위하여 admin 페이지에서 모델의 값들을.추가하였지만, View 에서 get_queryset() 함수를 사용하여 값들이 입력되게 할 수 있습니다.

Product 모델의 query 에 값들이 입력되었다면 매핑한 /api/product/ 에 API 출력이 정상적으로 되는지 확인해봅니다.

이러한 JSON 파일 양식이 출력되었다면 정상적인 API 개발 코드를 완성한 것입니다.

Django Rest Framework를 활용하여 웹페이지의 HTML 요소별 API 개발

Preview

웹 페이지를 이루고 있는 HTML 소스를 사용하여 해당 소스의 모든 요소별 정보(요소 이름, 가로/세로 크기, 요소의 위치(좌표)) 등을 크롤링 하여 Django 데이터베이스에 정보를 입력한 후, 해당 정보를 바탕으로 API 개발을 하는 작업입니다. 요소별 정보를 갖고 있는 API 를 활용하는 개발이 이루어질 때, 필요한 API 를 개발하는것이 목적입니다.

Model, View, Serializiers

HTML의 요소들은 많은 정보를 갖고 있는데, 이 중 요소의 크기(width / height), 요소의 위치(x 좌표, y좌표)를 크롤링 할 것입니다. 이들 4가지와 요소를 구별해 줄 수 있는 요소별 id 까지 총 5개의 정보로 이루어진 Model을 생성합니다.

#models.py
from django.db import models
# Create your models here.
class Data(models.Model):
    specific_id = models.CharField('specific_id', max_length=156)
    horizon_width = models.CharField('horizon_width', max_length=100)
    vertical_width = models.CharField('vertical_width', max_length=100)
    x_location = models.CharField('x_location', max_length=100)
    y_location = models.CharField('y_location', max_length=100)
    def __str__(self):
        return str(self.specific_id)

해당 Model 생성 후 migrate를 진행합니다.

Data Model 을 serialize 하는 serialziers.py 를 작성합니다.

#serializers.py
from rest_framework import serializers
from .models import Data
class DataSerializer(serializers.ModelSerializer):
    class Meta:
        model = Data
        fields = '__all__'

Django REST Framework 에서 API 를 만들어주도록 [views.py](http://views.py) 를 작성합니다.

#views.py
from django.shortcuts import render
from rest_framework.response import Response
from .models import Data
from rest_framework.views import APIView
from .models import Data
from .serializers import DataSerializer
class DataListAPI(APIView):
    def get(self, request):
        queryset = Data.objects.all()
        print(queryset)
        serializer = DataSerializer(queryset, many=True)
        return Response(serializer.data)

url을 매핑 해 줍니다.

#urls.py
from django.urls import path
from .views import DataListAPI

urlpatterns = [
			path('api/', DataListAPI.as_view()),
]

Django 에서 API 개발에 관련한 작업을 마쳤습니다.

parser.py

웹페이지를 크롤링 할 수 있는 python 실행파일을 만듭니다. DjangoProject 디렉토리와 같은 레벨에 parser.py 파일을 생성합니다.

Web Crawler

웹페이지를 크롤링하여 HTML 소스를 얻을 수 있는 라이브러리는 여러 가지가 있는데, 대표적으로 Beautifulsoup4, Selenium 이 사용되고 있습니다. 우리는 요소별 크기, 좌표값을 얻어야 하므로, 이에 더 용이한 라이브러리를 제공하는 Selnium 을 사용합니다.

#parser.py
import selenium
from selenium import webdriver

#driver 선언을 통하여 webdriver.Chrome을 사용할 수 있다.
driver = webdriver.Chrome('/Users/Kimminjung/Desktop/hobbes/aivory-django-bootstrap/chromedriver')
driver.get(url='https://d-startup.kr/index.es?sid=a1')
page = driver.page_source

Selenium 으로 웹 페이지 크롤링을 진행하는 코드 입니다. Selenium 은 웹 드라이버를 사용하여 크롤링을 진행하는데, 우리는 Chrome 을 사용하기 때문에 Chrome web driver를 설치하여 driver 선언 시 설치된 경로를 명시하여 줍니다.

#print(page)
<html lang="ko">
  <head>
    ...
    <meta
      content="http://dstartup.kr/images/kor/main/logo.png"
      property="og:image"
    />
    <title>대전창업온라인</title>
    ...
  </head>
</html>

위 코드의 page 를 print 한 결과입니다. 페이지의 HTML 소스가 크롤링 되는 것을 확인할 수 있습니다.

#parser.py
import selenium
from selenium import webdriver

#driver 선언을 통하여 webdriver.Chrome을 사용할 수 있다.
driver = webdriver.Chrome('/Users/Kimminjung/Desktop/hobbes/aivory-django-bootstrap/chromedriver')
driver.get(url='https://d-startup.kr/index.es?sid=a1')
page = driver.page_source

e = driver.find_element_by_xpath("//xpath")
location = e.location #e 의 좌표가 딕셔너리 타입으로 출력된다.
size = e.size #e의 크기가 딕셔너리 타입으로 출력된다.

Selenium 은 많은 기능을 갖고 있는데, 이 중 find_element_by_xpath 를 사용합니다. 이 함수는 요소들의 xpath 를 기준으로 찾는 기능을 갖고있는 함수입니다. parser.py 는 모든 웹페이지를 대상으로 작동해야 하기 때문에 웹페이지 별로 다른 값을 가지는 id, class, name 등을 기준으로 크롤링을 진행하는 것은 목적에서 벗어납니다.

이에 따라 트리 구조를 갖고 있는 xpath 를 기준으로 크롤링을 진행합니다.

{'x': 51, 'y': 18}
{'height': 39, 'width': 148}

위의 코드에서 location 과 size 를 print 한 결과입니다. Selenium 을 사용하여 이렇게 요소의 좌표 및 크기 값을 얻을 수 있습니다.

lxml.etree

모든 요소를 크롤링 하는것이 목적입니다. 이를 위하여 lxml의 etree 라이브러리의 getpath() 를 사용하여 모든 요소의 XPath 를 얻어 올 수 있습니다.

parser = etree.HTMLParser()
tree = etree.parse(StringIO(page), parser)
root = tree.getroot()
htmlTree = etree.ElementTree(root)

먼저, etree.HTMLParser() 를 사용하여 전체 HTML 소스를 파싱 하여 줍니다. 이는 getpath() 를 사용하기 위함인데, getpath() 는 파싱된 트리의 최상위 노드인 root 를 사용하여 하위 트리의 모든 요소의 XPath 를 얻어오는 함수이기 때문입니다. 위 코드를 사용하여 전체 HTML 소스의 root 를 얻어옵니다.

for e in root.iter():
	  x_path = htmlTree.getpath(e)

iter() 는 root 요소에 대한 iterator를 만든 뒤, 문서 순서대로 모든 요소를 반복하하며 순회하는 기능을 가진 함수입. 위의 for 문을 통하여 모든 요소의 XPath를 가져올 수 있습니다.

/html
/html/head
/html/head/meta[1]
/html/head/meta[2]
...

위의 for 문을 출력한 값입니다. 이 방법을 통하여 모든 요소의 XPath를 가져왔습니다.

parser.py with Django

이제 parser.py 로 크롤링 한 데이터들을 Django ORM을 통해서 DB에 넣어주어야 합니다.

from io import StringIO
import selenium
from selenium import webdriver
from lxml import html, etree

import os
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "djangoProject.settings")
import django
django.setup()
from minjung.models import Data

os를 import 하면 parser.py 가 실행될 때 "DJANGO_SETTINGS_MODULE"이라는 환경 변수에 현재 프로젝트의 settings.py파일 경로가 등록됩니다. 그리고, Django를 사용하기 위하여 Django를 import 하고 django.setup()을 통하여 프로젝트를 사용할 수 있도록 환경을 세팅한 뒤, 우리의 Model, Data 를 import 합니다.

from io import StringIO
import selenium
from selenium import webdriver
from lxml import html, etree

import os
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "djangoProject.settings")
import django
django.setup()
from minjung.models import Data
# 옵션 생성
options = webdriver.ChromeOptions()
# 창 숨기는 옵션 추가
options.add_argument("headless")
#driver 선언을 통하여 webdriver.Chrome을 사용할 수 있다.
driver = webdriver.Chrome('/Users/Kimminjung/Desktop/hobbes/aivory-django-bootstrap/chromedriver')
if __name__ == '__main__':

    driver.get(url='https://d-startup.kr/index.es?sid=a1')
    page = driver.page_source
    parser = etree.HTMLParser()
    tree = etree.parse(StringIO(page), parser)
    root = tree.getroot()
    htmlTree = etree.ElementTree(root)
    for e in root.iter():
        try:
            x_path = htmlTree.getpath(e)
            e = driver.find_element_by_xpath(x_path)
            location = e.location
            size = e.size
            Data(
                specific_id = x_path,
                horizon_width = size['width'],
                vertical_width = size['height'],
                x_location = location['x'],
                y_location = location['y'],
            ).save()
        except Exception as e:
            print(e)
            pass

parser.py 의 전체 코드 입니다. specific_id 는 요소들의 고유한 값인 XPath로 설정해 줍니다. Data().save 코드를 통하여 Django에 크롤링한 정보를 연동시킬 수 있습니다.

자, 이제 runserver 를 통하여 API 가 정상적으로 개발되었는지 확인하겠습니다.

JSON이 정상적으로 출력되는 것을 확인할 수 있습니다.

Custom Data 로 이미지 분류 전이학습 하기

Tue, 23 Feb 2021 00:00:00 +0000

Abstract

검색도구를 이용하는 고객들의 단순한 키워드만으로 검색 의도를 완벽하게 파악하기 어려운 경우가 많습니다. 하지만 유사 이미지 분류기술을 활용한 이미지 검색 기술은 고객이 직접 대상의 특징을 서술하지 않아도 특정 이미지를 입력하여 이와 유사한 이미지를 분류하고 검색도구에 힘을 실어 줄 수 있는 기술입니다.

이번 글에서는 이러한 검색 자료에 활용될 수 있고 사용자의 이미지 객체를 인식하여 기존에 데이터베이스에 저장된 객체와 얼마나 유사한지 분류하기 위한 방법인 유사이미지 분류 기술을 학습하고 구현한 방법을 소개하려고 합니다.

앞서 큰 틀이 되는 인공지능 기술인 전이학습(Transfer Learning)과 전이학습에 사용될 모델의 이해, 학습용 데이터셋에 대해 어떻게 이해하고 활용 했는지에 대한 내용을 기술합니다.

1. 전이학습 기술이해 & 학습을 위한 모델 선정

1-1. 전이학습 이해

⇒ ‘유사 이미지 분류’ 기술을 구현하는데 앞서 큰 틀은 전이학습(Transfer Learning)기반이 되며 이 기술은 특정 Task 또는 도메인에서 얻은 모델을 다른 Task에 적용하는 기술로, 이미 학습된 모델의 가중치를 가져와서 분류하고 싶은 다른 데이터셋에 적용하는 것으로 이해할 수 있습니다.

전이학습을 사용하는 세가지 특징

적은 데이터셋을 사용하여 모델 학습
대부분의 경우 전이학습한 모델이 처음부터 쌓은 모델보다 성능이 뛰어나다.
시간이 절약이 된다.

처음에 위의 특징 중 2번이 이해가 되지 않았습니다. ‘왜 내가 다루고자하는 데이터셋을 기존에 다른 데이터셋에 맞추어 학습된 모델에 학습을 시키는데 처음부터 쌓은 모델보다 성능이 좋을까?’ 라는 의문이 들었습니다.

질문에 대한 해답은 딥러닝은 “계층적인 특징”을 “스스로” 학습한다. 라는 점이 었습니다. 모델의 low level layer는 general feature를 추출하고 모델이 쌓여갈 수록 high level layer에서는 specific한 feature을 추출해내는 고도화된 학습이 이루어집니다. 따라서 초기 layer의 general feature들은 학습할 때 재사용해도 되지만 후반부에 위치한 layer의 specific feature들은 재학습이 필요합니다.

예를 들어 쉽게 설명하자면 MNIST와 같은 데이터셋에 따라 학습을 시킨 모델의 경우, 초기 layer는 직선이나 곡선 같은 general한 feature를 추출할 것이고 이렇게 추출된 feature map은 한글이나 영어문자에 대한 데이터셋에도 효과적으로 재사용할 수 있다고 추측하는 것입니다.

전이학습의 주요 키워드 세가지

전이학습을 이해하는데 있어서 주요한 세가지의 키워드가 있습니다.

ConvNet as fixed feature extractor(=고정 기능 추출기) ⇒ 처음에는고정기능추출기라는 용어를 이해하는데 힘들었던 것 같습니다. 하지만 이해를 한다면 왜 고정기능추출기이라고 불리는지 금방 이해할 수 있습니다. 예를 들어 어느 특정 데이터셋에 대해 이미 학습된 ConvNet 모델을 가져온 후 위에 특징 2번에서 말했듯 초기 layer는 고정합니다. 후에 마지막 Classifier부분을 제거하고 새로 분류하고 자하는 데이터셋의 카테고리 수에 맞게 초기화 해주는 것입니다.
Fine-tuning the convNet(=미세조정) ⇒ 두 번째 키워드인 Fine-tuning은 고정된 부분도 학습을 재진행할 수 있지만 교체한 마지막 fc(fully-connected)부분만 다시 재학습을 시켜주는 것 뿐만 아니라 역전파를 계속하는 것을 뜻하기에 ‘미세조정’이라는 말을 쓴 것 같습니다. 참고로 ConvNet의 모든 계층을 fine tuning하거나 초기 layer 중 일부를 고정상태로 유지할 수 있습니다. 초기 layer 중 일부를 고정하는 것은 overfitting문제를 방지하기도 합니다.
Pretrained models ⇒ model의 weight를 공유해서 fine-tuning하는 것은 시간이 절약된다는 장점이 있습니다.

fine-tuning을 어떤 상황에서 해야하는지에 대한 4가지 시나리오

신경써야할 두가지 중요한 요소는 아래와 같습니다.

데이터셋의 크기
pretrained된 모델에 사용한 데이터셋과의 유사도

데이터셋에 따른 4가지 시나리오

New Dataset	크기	유사도	fine-tuning 적용여부
A Dataset	small	high	데이터셋이 너무 작아 ConvNet의 overfitting문제를 해결하려고 fine-tuning을 하는 것은 좋지 않은 생각이입니다. 원본 데이터셋과 유사도가 높기때문에 higher-level의 feature가 새 데이터셋과 관련이 있을 것으로 예상되며 linear classifier만 train시키는 쪽으로 생각하면 됩니다.
B Dataset	small	low	linear classifier만 학습하는 것이 좋은 방법입니다. 또한 데이터셋이 매우 다르기에 후반부의 layer만 fine-tuning하는 것은 좋은 방법이 아니며 초기 layer에서 재학습하는 것이 효과적일 수 있습니다.
C Dataset	big	high	이 경우는 문제가 되는 부분이 없습니다. 다만 fine-tuning만 해주면 overfit하지 않을 것이라는 확신만 있을 뿐입니다.
D Dataset	big	low	fine-tuning 수행의미가 없다고 생각합니다. 처음 부터 모델링을 만드는 것이나 마찬가지 이기 때문입니다.

실습은 PyTorch.org 사이트에서 전이 학습에 대한 코드를 Colab, Jupyter notebook, GitHub으로 공유하고 있고 이 공유된 코드를 통해 전이학습에 대한 이해를 깊게 할 수 있습니다. → 실습링크

1-2. DenseNet 모델 선정

ResNet과 DenseNet

ResNet은 2015년에 열린 ILSVRC에서 등장해 우승을 차지한 이미지 분류 모델로 깊은 네트워크 층으로 부터 생기는 학습 에러와 복잡도 문제를 해결하기 위해 고안되었습니다.

입력에서 바로 출력으로 연결되어 기존의 출력값(H(x))에서 입력값(x)을 뺀 차이를 얻기 위해 학습하는 (출력 : H(x) = F(x) + x) Skip Connection이라는 개념을 도입해서 높은 수준의 정확도를 보여주게 되었습니다.

(좌) Resnet의 설계 구조, (우) Densenet의 설계구조

그러던 중 레이어 간 정보 흐름을 좀 더 자연스럽게 한 DenseNet의 등장은 이러한 Skip Connection을 빽빽하게(Dense) 늘려서 핵심 특징을 잘 추출하는 동시에 그레디언트 소멸 문제에도 대응하도록 보완하며 발전하게 되었습니다.

이러한 바탕 속 ResNet을 비롯한 이전 전통적인 CNN모델과 차별되는 특징 추출 능력은 DenseNet이 저희의 트레이너 모델로 선정하는 계기가 되기도 하였습니다.

모델을 탐구하는 이유

: 보통 Pytorch나 Keras 같은 라이브러리에서 제공하는 모델을 호출할때는 기본적으로 필요한 parameter값만 확인해 적절히 넣어주면 문제 없이 동작하는 모습을 보여줍니다.

import torchvision.models as models

resnet18 = models.resnet18(pretrained=True)
alexnet = models.alexnet(pretrained=True)
squeezenet = models.squeezenet1_0(pretrained=True)
vgg16 = models.vgg16(pretrained=True)
densenet = models.densenet161(pretrained=True)
inception = models.inception_v3(pretrained=True)
googlenet = models.googlenet(pretrained=True)
hufflenet = models.shufflenet_v2_x1_0(pretrained=True)
mobilenet = models.mobilenet_v2(pretrained=True)
resnext50_32x4d = models.resnext50_32x4d(pretrained=True) wide_resnet50_2 = models.wide_resnet50_2(pretrained=True)
sresnext50_32x4d = models.resnext50_32x4d(pretrained=True) wide_resnet50_2 = models.wide_resnet50_2(pretrained=True)
mnasnet = models.mnasnet1_0(pretrained=True)

torchvision에 models 하위 카테고리에만 해도 이렇게 다양한 모델을 버전별로 호출해서 사용할수 있기에 일반적으로 학습을 위한 데이터만 구축되있다면 이미지 분류, 처리 분야에 있어서 검증된 모델을 통해 원하는 카테고리에 대한 학습을 진행할수 있습니다. 하지만 직접적으로 기존 모델을 커스터마이징 할필요가 생긴다면 라이브러리로 불러오는 모델의 내부 구조와 코드를 어느정도 이해하는 편이 도움이 될 수 있을 것입니다.

예를들어 다양한 모델을 적용한 것같은 효과를 볼수 있는 DropOut을 적용하거나 학습 속도를 빠르게 하기 위해 일부분을 변경한다던가 하는 상황이 충분히 있을 수 있기 때문입니다.

목표로 설정된 트레이너 제작에서도 사용자 혹은 협업자의 편의성 및 성능 향상 등을 목적으로 한 커스터마이징 작업을 위해선 구조를 제대로 파악해 엉뚱한 코드를 건드리지 않도록 혹은 모델의 구조와 구조에 대응하는 코드에 대해 전반적인 이해가 필요할 것입니다.

사용할 torchvision의 DenseNet모델에 대한 코드 분석을 진행해보도록 하겠습니다.

Densenet 의 아키텍처

github.com/pytorch/vision/blob/master/torchvision/models/densenet.py

→ 트레이너애 사용된 modeling_densenet.py 코드의 전신인 torchvision densenet의 원본 코드

코드를 살펴보기 전에 먼저 Densenet의 구조와 특징에 대해서 알아보도록 하겠습니다.

사진에서 나와있는 것처럼 Resnet을 이미 접해본 분들에게는 살짝 익숙한 느낌이 들수 있는 설계 구조가 나타납니다. 차이점이라면 Resnet은 직전 레이어의 입력 값만 출력에 반영되어 다음 레이어로 가는 입력에 반영되는 반면 Densenet은 직전 레이어 입력 뿐 아니라 블록 내에서 거처간 레이어들이 모두 다음 레이어 입력에 반영된다는 특징을 가지고있습니다. 텐서의 차원같은 느낌인 채널이 블록이 끝날 때까지 지속적으로 쌓이는 구조라 생각하시면 될 것 같습니다.

arxiv.org/pdf/1608.06993.pdf → 포스팅에 바탕이 된 원본 논문

만약 Block내에 x개의 레이어가 존재한다면 Resnet에서는 각 레이어 당 1개 총 x개의 지름길이 형성되지만 densenet은 각 레이어 당 1, 2, 3 … 참조하는 이전 레이어 입력(초기 입력되는 채널 포함 )이 1씩 증가하는 등차수열로 형성되어서 등차수열의 합 공식을 적용하면 총 x(x+1)/2 개의 지름길이 형성됩니다.

논문에서는 이러한 Densenet의 강점으로 이러한 부분을 소개하고 있습니다.

alleviate the vanishing gradient (-> 그레디언트 소멸 문제 완화)
strengthen feature propagation (-> 강력한 특징 전파력)
encourage feature reuse (-> 특징 값 재사용 활성화)
substantially reduce the number of parameters (-> 계산량을 줄이기 위해 필요한 파라미터 갯수 감소)

위에 사진은 Densenet전체의 한 블록 내의 구조를 표현한 것이며 3개의 Block이 합쳐진 전체 구조를 표현한 논문 내의 그림입니다. 비록, 그림에는 3개의 블록이 표시되었지만 이번에 사용할 torchvision의 기본적으로 block의 갯수는 4개의 형태를 보여줍니다.

마지막 블록을 제외하면 Transition Layer라고 불리는 배치 정규화 + Relu 활성함수+ 1x1 컨볼루션을 거치는 구조로 이루어진 합성합수와 평균 풀링으로 이루어진 레이어가 등장하는데, 위에서 계속 지나간 이전 레이어들의 입력 값을 반영하다 보면 다음 레이어가 들어갈 입력값의 채널이 지나치게 비대해 질수 있습니다.

각 레이어의 입력에는 파이토치의 텐서가 들어가는데 Transition Layer는 이 텐서의 채널을 반토막으로 줄여주고 이미지 사이즈에 해당하는 크기를 1/4로 줄여줍니다. 안에 있는 평균 풀링의 보폭이 기본적으로 2 이므로 1/4사이즈로 줄어드는 것이고 보폭을 늘리면 1/보폭의 제곱 만큼 사이즈가 줄어들 것입니다.

채널 수의 증가는 파라미터의 증가로 이어져 계산량이 폭발적으로 늘어나게 되는데 1x1컨볼루션은 채널을 줄여줘 우리들의 GPU(혹은 CPU)와 RAM 연산 부담을 줄여주는 담당해주며 이렇게 채널을 줄였다 늘렸다 조절하는 구조를 bottleneck구조라고 합니다.

마지막에 Linear라고 표시된 부분은 마지막 block을 지나고 출력된 채널 수 만큼의 1차원 텐서가 분류하고 싶은 속성 값에 해당되는 Tensor 배열(torchvision에서의 default값은 1000)에 각각 Fully Connect를 해주는 부분으로 이번에 전이학습을 통해 트레이너를 제작할시 바꿔줄 부분입니다.

마지막으로 알아둬야 할 부분은 Densenet버전에 따라서 모델 내의 레이어 수가 달라진다는 점 입니다. 트레이너에 사용할 121모델 같은 경우는 각 블록 마다 6(첫번째), 12(두번째), 24 ,16의 레이어로 구성되어있으며 169 모델은 6, 12, 32, 32의 레이어 숫자를 가진 블록으로 구성되어 있는 등 버전 마다 레이어 수가 조금씩 다르고 경우에 따라선 모델 내 입출력 텐서도 다를수 있습니다.

객체 지향적 모델 코드

torchvision 내의 densenet.py코드는 이러한 레이어 , 블록, 그리고 본체의 모델은 각각 class로 선언되어 상위 객체가 하위객체를 호출하는 객체지향적 방식으로 구성되어 있습니다.

전반적인 Densenet의 구조와 특징을 알아보았다면 코드를 살펴보도록 하겠습니다.

class DenseNet(nn.Module):
    def __init__(self, growth_rate=32, block_config=(6, 12, 24, 16),
                 num_init_features=64, bn_size=4, drop_rate=0, num_classes=1000, memory_efficient=False):

        super(DenseNet, self).__init__()

        # First convolution
        self.features = nn.Sequential(OrderedDict([
            ('conv0', nn.Conv2d(3, num_init_features, kernel_size=7, stride=2,
                                padding=3, bias=False)),
            ('norm0', nn.BatchNorm2d(num_init_features)),
            ('relu0', nn.ReLU(inplace=True)),
            ('pool0', nn.MaxPool2d(kernel_size=3, stride=2, padding=1)),
        ]))

        # Each denseblock
        num_features = num_init_features
        for i, num_layers in enumerate(block_config):
            block = _DenseBlock( # block객체 생성
                num_layers=num_layers,
                num_input_features=num_features,
                bn_size=bn_size,
                growth_rate=growth_rate,
                drop_rate=drop_rate,
                memory_efficient=memory_efficient
            )
            self.features.add_module('denseblock%d' % (i + 1), block)
            num_features = num_features + num_layers * growth_rate
            if i != len(block_config) - 1: # transition layer객체 생성
                trans = _Transition(num_input_features=num_features,
                                    num_output_features=num_features // 2)
                self.features.add_module('transition%d' % (i + 1), trans)
                num_features = num_features // 2

        # Final batch norm
        self.features.add_module('norm5', nn.BatchNorm2d(num_features))

        # Linear layer
        self.classifier = nn.Linear(num_features, num_classes)

인자로 들어가는 파라미터 중 핵심 요소에 대한 짧은 설명을 하자면

growth_rate : 각 레이어에서는 growth_rate크기 만큼의 고정된 크기의 채널을 가진 텐서를 output으로 출력합니다. 아까 위에서 이전 레이어들의 입력 값들이 반영되 채널이 쌓이게 되는 것이 Densenet의 핵심인데 growth rate를 직역하면 성장률이 되기때문에 채널의 성장을 표현한 네이밍이 될 것 같습니다.
block_config : Densenet에 들어갈 block들의 레이어 수를 튜플로써 표현한 것으로 기본 default값은 6, 12, 24, 16으로 121버전이 설정되어있음을 알수 있습니다. (첫 블록은 6개 두번째는 12개 세번째는 24개 네번째는 16개의 레이어로 이루어짐)
num_init_features : 처음으로 입력 값이 들어가는 Convolution층에는 3개의 채널로 이루어진 이미지 텐서가 들어가게 됩니다. 3가지 채널은 빛의 3원색인 RGB를 뜻해서 3개의 채널인데 이 입력 텐서를 처음에 몇 채널로 바꿔줄지 결정하는 역할을 수행합니다.
num_classes : 분류하려는 클래스의 갯수를 의미합니다. 여기서는 default값이 ~~ImageNet이 생각나는~~ 1000이라 그냥 모델을 인자를 수정해주며 활용만 하는게 목적이라고 해도 이 부분은 직접 설정을 해주어야합니다.

class _DenseBlock(nn.Module):
    def __init__(self, num_layers, num_input_features, bn_size, growth_rate, drop_rate, memory_efficient=False):
        super(_DenseBlock, self).__init__()
        for i in range(num_layers):
            layer = _DenseLayer( # layer객체 생성
                num_input_features + i * growth_rate,
                growth_rate=growth_rate,
                bn_size=bn_size,
                drop_rate=drop_rate,
                memory_efficient=memory_efficient,
            )
            self.add_module('denselayer%d' % (i + 1), layer)

모든 블록, 레이어를 포함하는 상위 객체인 DenseNet클래스가 하위 객체인 dense_block과 trainsition_layer를 호출하고 dense_block이 자기 보다 하위 객체인 dense_layer를 호출하는 자료구조의 Tree 프론트엔드의 DOM같은 구조를 띄고 있습니다.

2. 구현한 내용 및 결과

2-1. 모델 세팅

모델 초기화

초기화 부분

def __init__(self, property, hyper_parameter, class_length):
        self.class_length = class_length
        self.property = property
        self.hyper_parameter = hyper_parameter
        self.device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
        with open(self.property['config_file'], "r", encoding='UTF-8') as i:
            densenet_cfg = json.load(i)  # config_file : model의 hyper parameter
            # Prepare Model
            print("Loading DenseNet121 network.....")
            self.model = DenseNet(
                growth_rate=densenet_cfg["growth_rate"],
                block_config=tuple(densenet_cfg["block_config"]),
                num_init_features=densenet_cfg["num_init_features"]
            )
            self.model.load_state_dict(torch.load(property['weight_file'], map_location=self.device))  # 모델에게 가중치 부여

: 위에 설명한 yaml파일에서 미리 설정해둔 값을 property 변수에 담아서 필요한 파일에 대한 참조를 진행합니다. 그 중 모델에 대한 초기 설정을 가지고 있는 config파일을 가져와 원하는 값으로 설정 및 초기화를 진행해줍니다.

마지막 classifier 분리 후 데이터셋의 카테고리 수에 맞도록 초기화 해주는 부분

'''
여기서 각 출력의 크기는 데이터셋의 카테고리 수로 설정합니다.
nn.Linear(num_ftrs, len (class_names))로 일반화할 수 있습니다.
output을 parameter로 받아주도록 해야한다!!
'''
num_ftr = model_conv.classifier.in_feature
model_conv.classifier = nn.Linear(num_ftr, self.class_length)

: 분류기에 대한 전이 학습에 알맞게 기존 densenet 가중치 파일이 적용된 classifier 부분을 랜덤한 가중치를 가진 Fully Connected부분으로 초기화 시켜주는 것이 핵심입니다.

해당 부분을 통해 분류를 원하는 카테고리에 따라서 다르게 Classifier를 학습 후 적용하는 것이 가능해집니다.

2-2. 트레이너 설정, 학습 및 평가

Buster’s trainer

def train_classifier(self, learning_rate=0.00005, epoch=10, batchs=8):
        '''해당 파일의 알파이자 오메가. 이미 학습되있는 모델 본체의 pth파일과 학습이 필요한 classifier를
        불러와 머신러닝을 진행한다. 중간중간 validate_and_save함수를 호출해 평가를 진행하고 필요시 저장한다'''
        train_data = torchvision.datasets.ImageFolder(root=address_book['train_address'],
                                                      transform=self.preprocess)

        data_loader = DataLoader(train_data, batch_size=batchs, shuffle=True, drop_last=False)
        criterion = nn.CrossEntropyLoss()
        optimizer = torch.optim.Adam(self.model.classifier.parameters(), lr=learning_rate)
...

⇒ 먼저 여타 다른 모델 훈련처럼 위에 설명한 yaml파일에 설정한 학습 데이터의 경로에서 ImageFolder 함수를 이용하여 카테고리 이름으로 명명된 디렉토리로 구분된 이미지 데이터들을 가져옵니다. 만약 이미지 데이터 이외에 데이터의 경우 해당 파일은 ImageFolder함수에서 자동으로 필터링됩니다. 데이터를 카테고리 분류별로 불러오고 학습을 위해 다음 두 가지를 추가로 수행해야 합니다.

dataloader에서 마찬가지로 사전에 설정한 batch_size를 가져와서 해당 batch_size만큼 ImageFolder로 가져온 데이터들을 나눈 후 나머지 부분을 drop하는 경우 없이 섞어줍니다.
criterion(목적함수 혹은 손실함수)과 optimizer로는 각각 교차 엔트로피와 dagrad와 RMSProp의 장점을 합친 Adam을 설정해줍니다. Adam에 경우 step의 크기나 그레디언트의 크기에 영향을 받지 않으며 어떤 목적 함수에도 호환되고 안정적인 최적화를 위한 하강이 가능하다는 장점을 가지고 있는게 눈에 띄어서 선택하게 되었습니다.
추가로 현재 트레이너에서는 오직 분류기 부분만 학습을 진행할 것이기 때문에 생성자 부분에서 따로 분리한 객체 내 classifier의 가중치만 optimizer에 넣어주도록 해야합니다.

추가적으로,학습률(learning_rate) 또한 yaml에서 설정 가능합니다.

def train_classifier(self, learning_rate=0.00005, epoch=10, batchs=8):
...
	for i in range(epoch):
            for batch_idx, samples in enumerate(data_loader):
                x, y = samples

                x = x.to(self.device)
                y = y.to(self.device)

                prediction = self.model(xx)
                cost = criterion(prediction, y)

                optimizer.zero_grad()
                cost.backward()
                optimizer.step()
...

⇒ dataloader에 저장된 이미지 tensor 값과 카테고리 번호에 해당하는 값을 x와 y에 저장하고

→ device등록

→ 생성자의 model에 넣고 block과 각종 레이어를 거쳐 순전파된 결과를 원래 카테고리 번호와 비교

→ 교차 엔트로피를 통해 오차를 계산하고 해당 오차(손실)값을 이전 레이어에 역전파

등의 과정을 반복하며 트레이너의 학습이 진행됩니다.

def train_classifier(self, learning_rate=0.00005, epoch=10, batchs=8):
...
	if (count % (batchs * save_step)) == 0 and i >= minEpoch_toSave:
                    print("You just activate my val Card")
                    models_score = self.validate_and_save(models_score, i + 1, int(count / batchs))
                    # in more than three epoch statem every 100 step, save weight file temporary

...

	self.validate_and_save(models_score, epoch, 0)

( ※ minEpoch_toSave는 yaml파일에서 설정하는 속성으로 평가를 진행하기 위해 순회해야할 최소 epoch수를 의미합니다. 즉, 아직 데이터를 전체적으로 보지 못해 학습이 안된 초기부터 평가를 진행하면 무의미한 결과가 나올 가능성이 높아서 일정량의 학습이 이루어진 후 평가가 진행되기 위해 설정한 속성 )

⇒ 설정된 batch_size를 1step으로 해서, epoch마다 평가를 원하는 일정 step수가 지나면 따로 저장된 검증 데이터를 통해 정확도 평가를 진행하고 이전보다 개선된 결과가 나오면 현재 가중치 상태를 저장합니다.

마지막 코드 라인에서 사용자가 설정한 step주기 뿐 아니라 학습 종료 시에도 평가를 진행하며 정확도에 개선되었을 경우 모델 가중치의 최종본을 따로 저장해둡니다.

def train_classifier(self, learning_rate=0.00005, epoch=10, batchs=8):
...
	if (i + 1) % reduceLR_term == 0 and i != 0:
                learning_rate = self.reduce_LR(learning_rate)
                optimizer = torch.optim.Adam(self.model.classifier.parameters(), lr=learning_rate)
                # for prevent overfitting, adaptive learning rate used
...

def reduce_LR(self, learning_rate):
        '''적응적 학습률을 구현. train함수에게 호출되며 사용자가 임의로 조절 가능하다.'''
        lr = learning_rate * (85 / 100)
        print('reduce learning rate to', lr)

        return lr

( ※ reduceLR_term은 yaml파일에서 학습률을 조정할 epoch 주기를 설정하는 속성입니다. )

⇒ 추가적으로 적응적 학습률을 도입하여 사용자가 설정한 일정 epoch주기마다 현재 학습률을 15% 감소시키는 기능을 추가하였습니다. 해당 기능을 통해 경사하강법(Gradient Descent With Momentum)에서 진동을 줄이는 것처럼 모델 내에서 미세한 조정을 가능하게 해서 더 정확한 결과를 유도하게 됩니다.

Jo’s trainer

criterion = nn.CrossEntropyLoss()
optimizer = optim.SGD(model.parameters(), hyper_parameter["learning_rate"], hyper_parameter["momentum"])
scheduler = lr_scheduler.StepLR(optimizer, hyper_parameter["step_size"], hyper_parameter["gamma"])

⇒ 손실함수와 optimizer를 학습을 진행하기전에 설정하며 optimizer와 scheduler에 사용되는 parameter 값은 위의 yaml파일에서 설정한 값입니다.

criterion

손실함수는 CrossEntropyLoss를 사용합니다.
optimizer

SGD(Stochastic Gradiant Descent)를 사용하여 mini batch에 대해서 손실함수를 계산하고 최적점으로 이동하는 과정에서 Momentum이라는 성질을 이용한다는 특징이 있습니다. 이 특징은 mini batch에 대해 손실함수를 계산하고 weight 업데이트를 하기에 learning rate가 작아도 업데이트되는 weight가 noisy합니다. Momentum알고리즘을 추가하여 업데이트되는 weight의 비율을 줄여 일부 데이터의 모음만 가지고 효과적으로 weight를 갱신합니다.
sheduler

Learning Rate Scheduler를 사용하면 좀 더 효율적으로 Global Minimam에 수렴할 수 있도록 도와줍니다.

best_model_wts = deepcopy(model.state_dict())
best_acc = 0.0

for epoch in range(num_epochs):
	for phase in ['train', 'val']:  # train mode와 validation mode순으로 진행
	    if phase == 'train':
	        model.train()  # 모델을 train 모드로 설정
	    else:
	        model.eval()  # 모델을 eval(=val) 모드로 설정

			running_loss = 0.0
      running_corrects = 0

      # 데이터를 반복
      step = hyper_parameter["user_step"] # yaml파일에서 정한 step을 기준으로 평가 및 기록
      total_step = hyper_parameter["user_step"]
      best_step_acc = 0.7 # step마다 정확도를 최초에 평가할때 최소 0.7을 넘겨야 함

		  for index, data in (enumerate(tqdm(dataloaders[phase]))):
	        inputs = data[0].to(device)
	        labels = data[1].to(device)

				  # 매개변수 Gradiant를 0으로 초기화
	        optimizer.zero_grad()

	        # 순전파(foward)
	        # 학습 시(train)에만 연산 기록을 추적
	        # CustomModel클래스에서 모델생성시 결정됨
	        with torch.set_grad_enabled(phase == 'train'):
	            outputs = model(inputs)
	            _, preds = torch.max(outputs, 1)
	            loss = criterion(outputs, labels)

	        # 학습 단계인 경우 역전파 + 최적화
	        if phase == 'train':
	            loss.backward()
	            optimizer.step()

					running_loss += loss.item() * inputs.size(0)
          running_corrects += torch.sum(preds == labels.data)
          if index > 0 and index % step == 0 and phase == 'val':
              step_acc = running_corrects.double() / (hyper_parameter['batch_size'] * total_step)
              total_step = total_step + step  # step을 일단 10으로 지정 --> 나중에 step이라는 hyper parameter표시
              if step_acc > best_step_acc:
                  best_step_acc = step_acc
                  best_step_wts = deepcopy(model.state_dict())

				if phase == 'train':
	          scheduler.step()

				if phase == 'val' and epoch_acc > best_acc:
            best_acc = epoch_acc
						best_model_wts = deepcopy(model.state_dict()) # 높은 정확도일때 weight를 저장

# 가장 나은 모델 가중치를 불러옴
model.load_state_dict(best_model_wts)
# 가장 나은 모델 가중치를 저장
weight_save_path = property["model_weight_file"]
torch.save(best_model_wts, weight_save_path)

⇒ 학습(Training)과 검사(Test or Val)을 나누지 않고 한 테스크로 이루어지도록 구성하였습니다. 이런 구성은 매epoch마다 train, test 정확도를 확인을 하며 최적의 epoch값을 구할 수 있습니다.

→ 먼저, 한 에폭을 돌때 train인지 val인지 따라 모드가 설정되며 train일 경우에만 역전파와 최적화를 해주도록 되어있습니다.

→ 중간에 step변수를 할당받는데 이는 이미 yaml파일에 지정된 값입니다. 사용자가 Dataset의 크기를 고려해 수정이 가능하며 이번 과제에서는 10으로 설정하였고 step 10마다 기록 및 평가를 진행합니다.

→ 정리하자면 val 평가가 종료되면 step, epoch마다 최고의 정확도를 가질때의 weight저장과 통계지표 csv파일, heatmap을 기록하고 저장하게 됩니다.

2-3. 학습 결과 시각화

csv파일 통계

Buster

: 첫 번째 시각화 방법으로 콤마(‘,’)를 통해 셀을 나누는 csv파일을 통해 카테고리 별 정확도에 대한 수치를 나타내었습니다.

def record_output(self, answer_data, epoch, step):
...
	index_list = [str('') for i in range(0, self.num_class)]
        for y in range(0, self.num_class):
            category_str += f"{self.label_index[str(y)][0]},"
						# category_str -> csv에 작성할 문자열 값
            index_list[y] = self.label_index[str(y)][0]
            for x in range(0, self.num_class):
                category_str += f"{answer_data[y][x]}/{each_val_sum[y]} ," # 정확도를 분수형태로 넣어줌
								# 해당 카테고리 중 맞은 정답 갯수 / 해당 카테고리 중 검증 데이터 총 갯수
                data_for_record[y][x] = (round(answer_data[y][x] / each_val_sum[y], 2)) * 100
								# heatmap에 표현할
            category_str += "\n"

        output_file.write(category_str)
...

⇒ 다른 프로그래밍 언어의 파일 쓰기 형식처럼 ( 예를 들어 C언어의 fwrite같이 ) 작성할 스크립트를 담은 문자열 변수를 open으로 선언한 csv파일에 write해주는 형식으로 csv를 작성해주면 통계용 파일이 완성됩니다.

heatmap 이미지 통계

( ※ 각각 Buster(좌)와 Jo(우)의 각 카테고리 별 평가용 데이터에 따른 정확도를 히트맵으로 시각화한 결과를 보여줍니다. ): 두 번째 방법으로 기존에 사용하던 matplotlib을 이용하여 각 카테고리 별 정확도 퍼센트를 heatmap으로 표현해 기록하였습니다.

def make_heatmap(self, index_list, data_for_record, epoch, step):
        '''히트맵으로 csv파일에 기록된 정확도를 단순 확률로 간략화해서 보여줌'''
        fig, ax = plt.subplots() # 그래프를 불러오는 함수
        if not ax:
            ax = plt.gca()

        im = ax.imshow(data_for_record)

        color_bar = ax.figure.colorbar(im, ax=ax)
        color_bar.ax.set_ylabel("accuracy each category", rotation=-90, va="bottom")
				# title에 해당하는 부분 작성
...
for i in range(len(index_list)):
            for j in range(len(index_list)):
                text = ax.text(j, i, data_for_record[i][j],
                               ha="center", va="center", color="w")  # append text to ax
								# heatmap그래프 각 칸에 들어갈 확률 값을 채움
...

⇒ 위에 csv 파일에 write할 때와 비슷하게 plt의 내장 함수를 통해 불러온 heatmap 중 그래프 형식의 공간에 text를 채워넣는 형식으로 구동되게 설정해 놓았습니다.

3. Conclusion

전체 학습과 분류기 부분만 학습 두 가지 옵션을 선택 가능하며 분류기 학습만 진행시 GPU를 사용하지 않더라도 일반적인 densenet모델을 통한 이미지 처리 학습보다 더 빠른 속도의 학습이 이뤄지는 것을 알수 있습니다.
다른 카테고리 분류 상황에서도 분류기 부분만 따로 학습해 필요할 때마다 적절한 가중치 파일 선택으로 여러 상황에 대처할수 있게 설계되었습니다. 기존에 ImageNet 으로 학습되어 general 한 특징을 추출할수 있는 원본 가중치에서 안에 dictionary 형태로 저장된 분류기 부분만 바꿔서 동작시키면 원하는 카테고리에 맞게 분류를 해줄수 있게 됩니다.

: 결론적으로, 위에 장점을 기반으로 두 학습기 모두 테스트 학습에 대한 평균 정확도가 90% 중후반을 보여주면서 문제 없이 학습이 이루어 지는 것을 확인 할수 있었습니다.

번외 : 개발 도중의 시행착오

소통 부재로 yaml파일 tester파일의 분리

→ Trainer를 분리해서 작성하는건 사전에 어느정도 이야기가 되고 예측가능한 상황이었지만 Trainer에서 호출할 yaml파일의 속성 값들도 따로 작성하며 트레이닝의 테스트를 진행해 이후 통합하기 어려울 정도로 각 yaml의 속성 관계가 복잡해지게 되었습니다.

결국 yaml은 trainer코드에 대한 전면적인 수정을 해야해서 분리되는 방향으로 결정됬지만 tester같은 경우는 큰 변화가 필요없어서 처음 주어진 코드를 기반으로 서로 추가된 기능들을 충돌없이 따로 반영하는 것을 통해 하나로 통합되었습니다.
약속되지 않은 모델 변경 및 파일 추가

→ 위에 소통 문제와 연계해 처음 densenet 원본 모델 클래스가 있는 modeling_densenet.py파일을 수정할려고 했었던 것이나 트레이너를 위한 개별 파일을 추가 혹은 삭제(특히 시스템 파일) 하는 것 등 사전에 협의되지 않은 변경 사항으로 다른 트레이너 코드에 영향을 줄수 있는 부분을 다시 정리하는 것도 하나의 홍역이었던거 같습니다.

github를 통해 conflict나는 부분을 대조해보기도 하고 서로의 변경사항을 각자 코드에 추가해 맞춰줌으로써 해결되었지만 다른 협업자의 코드에 영향을 줄수있는 부분의 수정 등을 신중히 접근해야 한다는 것을 깨닫게 해주는 작업이기도 하였습니다.
예외 처리의 중요성

→ 워크스테이션에서의 트레이닝 도중 출력된 divide by zero에러와 프로세스가 kill되는 문제에서 후자의 경우는 코드를 잘못 타이핑해 CPU와 GPU에 데이터가 따로 노는 것이 원인이었지만 나머지 divide by zero같은 경우 예외 처리의 문제로 판명되었습니다.

시스템 파일 같은 이미지 외에 필요 파일들의 존재 등을 고려하지 않은 문제 때문에 코드 1줄이면 해결될 문제가 이틀 가까이를 소모하게 만들었습니다.
다른 분야의 협업자 배려 + default값 설정

→ 기존 yaml을 서로가 다른 트레이너를 자기 환경에서 테스트할 때나 일반적인 자기 환경 내의 테스트 상황에서도 편하게 테스트하기 위한 용도로 값이 설정되어 있어서 워크스테이션 동작 시 호환이 안되는 문제가 발생하기도 하였습니다.

만약 AI쪽은 잘 모르는 사람과 협업을 할 경우 default값을 신중히 세팅하거나 협업자의 테스트 환경에 대한 소통을 진행하여 해당 문제의 유발을 최소화하도록 하는 것도 중요한 사안이라는 점을 알게되었습니다.

Reference

솔루션 납품 자동화하기 - Docker편

Tue, 02 Feb 2021 00:00:00 +0000

aivory 검색엔진은 docker를 통해 간단하게 서버에 올려 사용이 가능합니다.

이를 위해 당연히 검색엔진이 납품될 서버에 도커를 설치해야합니다.

기존 설치 방법 - 매뉴얼 따라가기

도커를 설치하는 것은 어렵지 않습니다.

만능 구글에 ‘docker install’이라고만 쳐도 공식 문서가 나오며 간단한 영어 실력을 발휘해(혹은 마우스 우클릭과 번역 😉), 몇 줄의 코드만 복사 붙여넣기를 하면 도커 설치는 끝납니다.

Get Docker

폐쇄망의 경우

솔루션 납품을 위해 서버에 도커를 깔려니, 폐쇄망이라 네트워크를 사용하지 못한다는 충격적인 소식을 전달 받았습니다.

다행스럽게도 폐쇄망에서 도커를 사용할 수 있는 방법은 있습니다. 폐쇄망을 위한 방식은 도커를 실행할 수 있는 파일들을 미리 설치해서 옮기면 됩니다.

Docker

Index of linux/static/stable/x86_64/
Docker Compose

Releases · docker/compose

귀찮고 복잡한 설치 방법 → 시간 낭비

폐쇄망이 아니더라도 코드 한줄한줄을 복붙해서 설치하는 방법도 결국 납품건이 많아질수록 시간 낭비의 주범이 될 것입니다.

또한, 이번 방법을 문서로 정리해 남겨둬야하는 귀찮은 일을 해야하고, 추후 폐쇄망 납품을 위해 해당 문서를 찾고 따라하며 시간을 낭비하게 될 것입니다.

이에 자동화를 위해 스크립트를 작성하는 것을 결심하게 되었습니다.

개선 - 설치 스크립트 제작

귀찮은 코드 복붙을 한번에 실행 시킬 방법은 매우 간단합니다. 쉘 스크립트로 설치 명령 코드들을 모아둔 뒤, 해당 스크립트를 실행하면 됩니다.

일반망

우선 솔루션이 납품될 서버의 os는 centos와 ubuntu로 두가지 경우가 있습니다.

도커를 설치하는 코드가 위 두가지 os에서 다르기 때문에 os를 구별해서 명령 코드를 실행시켜야합니다.

os를 확인하는 것은 여러 방법이 있지만 두가지 os 모두에서 사용할 수 있어야 합니다. 따라서 os를 확인하기 위한 명령어는 ‘cat /proc/version’을 사용했습니다.

OS_CHECK=`cat /proc/version`

이때, os가 정확하게 ‘CentOS 7’ 혹은 ‘Ubuntu’ 문자열로 나오는 것이 아니기 때문에

결과 문자열에서 =~ 를 통해 ‘centos’나 ‘ubuntu’가 포함되는지 검사해서 os를 구분했습니다.

if [[ "$OS_CHECK" =~ "ubuntu" ]] || [[ "$OS_CHECK" =~ "Ubuntu" ]]; then
        sudo apt-get update
        sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
        curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
        sudo apt-key fingerprint 0EBFCD88 # 안해도 됨
        sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
        sudo apt-get update
        sudo apt-get install docker-ce docker-ce-cli containerd.io
        sudo usermod -aG docker $USER
        sudo service docker restart
        echo "Docker for Ubuntu download complete!"
elif [[ "$OS_CHECK" =~ "centos" ]]; then
        sudo yum install -y yum-utils
        sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
        sudo yum install docker-ce docker-ce-cli containerd.io
        sudo systemctl start docker
        sudo usermod -aG docker $USER
        sudo service docker restart
        echo "Docker for CentOS download complete!"
else
        echo "check OS version is ubuntu or centos"
fi

도커 컴포즈는 파일이 경로에 존재만 하면 되기에 비교적 간단합니다.

echo "Download docker-compose..."
sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
docker-compose --version
echo "docker-compose download complete!"

폐쇄망

폐쇄망의 경우엔 완전 ‘무’의 상태에서 도커와 컴포즈를 만들어 내는 것은 불가능하기 때문에 솔루션 패키지 내부에 도커와 도커 컴포즈 파일을 미리 준비했습니다. (‘폐쇄망의 경우’의 링크 참고) 도커를 설치하는 명령어가 os마다 다를 뿐이지 설치하게 되는 파일은 동일합니다. 따라서 폐쇄망에선 os 체크가 필요 없습니다.

솔루션 패키지의 상위 디렉토리에서 도커를 설치해야하기 때문에 HOME을 설정했습니다.
```
HOME=`pwd`
```
도커 파일이 이미 존재하기에 파일을 옮기고 도커를 실행하는 명령어를 이용했습니다.
```
echo "Setting docker without internet..."
cp docker-18.09.0.tgz $HOME/../
cd ../
tar -xzf docker-18.09.0.tgz
sudo cp docker/* /usr/bin/
sudo dockerd &
echo "Docker setting complete!"
```
폐쇄망에서 도커를 실행하기 위해서는 기존에 사용하던 service나 systemctl 명령어 대신 ‘dockerd &’ 명령어를 사용해 도커를 실행시켜야합니다.

이어서 도커 컴포즈 또한 파일이 있기 때문에 일반망 명령어에서 curl을 cp로 바꿔줍니다.
```
echo "Setting docker-compose..."
cd $HOME
cp docker-compose-Linux-x86_64 /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
docker-compose --version
echo "docker-compose download complete!"
```
이렇게 일반망과 폐쇄망에서의 도커와 도커 컴포즈를 자동으로 설치, 실행하는 스크립트를 완성하게 되었습니다.

마치며

납품에 소요되는 시간을 줄이는 것은 매우 중요합니다.

그를 위한 나의 첫 걸음은 성공적으로 마쳤습니다.

다음 걸음은 색인에 필요한 쿼리를 전달 받으면 따로 다듬어줘야하는 추가 작업이 필요한 경우가 있습니다. 이를 방지하기 위한 확실한 가이드라인을 제작할 예정입니다.

그럼 다음 시간에 또 봅시다 ✋

VODA 디자인 시스템 1

Mon, 11 Jan 2021 00:00:00 +0000

0. 들어가기 전에

안녕하세요, 너드팩토리 프로덕트 디자이너 Allison 입니다.

너드팩토리에서는 현재 신규 서비스 VODA를 준비하고 있습니다.

이번 글은 VODA 서비스 구축 프로젝트를 시작하기 전 진행한 VODA 디자인 시스템 제작기를 들려 드리고자 합니다. 디자인 시스템을 설명하는 글은 다른 곳에서도 쉽게 찾을 수 있으니 여기서는 어떤 기준으로 디자인 시스템을 구축하는 지에 대해 이야기를 할게요.

1. 계기

VODA 프로젝트는 프로덕트 오너, 프로덕트 디자이너, 프론트엔드 개발자, 백엔드 개발자 그리고 AI 개발자가 함께 만들고 있습니다. 최종 목표는 모두 같지만 VODA 브랜드에 대한 생각은 완전히 같을 수 없어요. 그래서 일관성 있는 프로젝트를 구축하고 사용자에게 일관된 서비스를 제공하기 위해 디자인 시스템을 구축하기로 했습니다.

2. 디자인시스템을 왜 사용할까?

매번 다른 폰트, 간격, 색상을 사용한다면 디자이너의 퇴근은 자연스레 늦어집니다. 따라서 하나의 서비스 전반에 공통으로 쓰이는 타이포그래피, 그리드, 간격, 색상 그리고 UI 구성요소를 체계적으로 정리하여 디자인 시간을 단축 시키고 불필요한 소통과 수정을 최소화합니다. 프로젝트 도중 디자인팀 인원이 늘어나거나 담당 프로덕트 디자이너가 바뀌어도 체계화된 디자인 시스템으로 사용자에게 일관성 있는 디자인을 제공할 수 있습니다.

3. 디자인 시스템에는 어떤 요소가 들어가야할까?

Typography
Grids and Space
Colors
UI Components: Buttons, Forms, icons, Modals, Picker 등

4. 어떤 기준으로 만들까?

1) Typography

타이포그래피에서 고려해야 할 사항은 다음과 같습니다.

pt는 디스플레이 장치에서 ppi에 따라 각각 크기가 달라지니 웹 개발에서 단위는 px를 사용합니다.
웹 페이지 트래픽과 로딩 시간을 고려해 될 수 있으면 웹 폰트 사용을 권장합니다.
일반 웹 사이트의 본문 텍스트 크기는 14~16px이므로 사용자 층과 가독성을 고려하여 본문 텍스트 크기를 결정합니다.

VODA는 웹 폰트인 Noto Sans Kr(국문)와 Robot(영문)을 사용하고 본문 텍스트 크기는 14px로 결정했습니다. 이 기준을 바탕으로 하단 이미지와 같이 일정한 규칙을 가지고 정보의 위계에 따라 Header는 4가지, text는 5가지로 구성합니다.

여기까지 왔다면 디자인 시스템을 거의 다 구축한 거나 다름없습니다.

행간값은 텍스트의 양과 폰트 크기에 따라 달라지지만, 일반적으로 행간값은 폰트 크기 X 1.7~1.75 사이 값으로 설정합니다. 위와 같이 사용할 타이포그래피를 정리한 후에 반드시 Asset에 등록하여 사용하는 것이 디자이너 정신 건강에 이롭습니다.

2) Grids and Space

StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

위의 사이트에서 데이터를 보며 최소 화면 크기를 결정합니다. VODA는 노트북에서도 불편함 없이 서비스를 이용할 수 있도록 1280px까지 지원하기로 했습니다.

그리드를 효율적으로 활용하기 좋은 12 Grid System(Max width:1600px, Gutter:24px, Margin:62px)을 사용하기로 했어요. 하단 사이트에서 그리드를 계산하면 편리합니다.

Grid Calculator by Nicolaj Kirkgaard Nielsen

그리드 시스템은 UI를 배치할 때 기준을 제시할 뿐이니 반드시 그리드에 맞출 필요 없고 상황에 따라 유연하게 사용하면 됩니다.

간격을 1px 단위씩 움직이면 디자이너는 또 퇴근할 수 없습니다. 그래서 간격에도 일정한 규칙을 정합니다. VODA는 4의 배수를 기반으로 총 6가지 간격 크기를 두고 이를 조합하여 사용했어요.

🙋🏻‍♀️ Colors, UI Components 부분은 VODA 디자인 시스템 2에 이어집니다.

Reference

스포카 디자인 가이드라인:

Spoqa Design Guidelines

리메인 스타일 가이드:

리메인 스타일가이드

1편 끝 🔚

react + typescript에 redux-saga 셋팅하기

Sat, 02 Jan 2021 00:00:00 +0000

Overview

Typescript를 적용하고 null able로 인한 고통을 쉽게 줄일 수 있었습니다. 그리고 Saga를 적용하여 중복 액션에 대한 비동기 처리를 쉽게 해결하였습니다.

위 두 가지를 적용하고 개발의 질도 올라갔고 (특히 typescript를 적용하고) 원래 javascript는 이랬어야 하지~ 라고 느낍니다.

이번 포스트에서는 어떤 이유로 위 두 가지를 적용했는지를 말하기보다는 실제 React+Typescript에 어떻게 redux와 redux-saga를 적용하고 사용할 수 있는지를 말하려고 합니다.

이 포스트는 Redux를 사용해 보셨고 Saga를 처음 접해보시는 분들께 도움이 됩니다.

Install

이 포스트에서는 CRA에 Typescript 설치를 진행하겠습니다.

node version : 12.13.1

CRA와 typescript 설치

$ yarn create react-app test-app --template typescript

redux와 redux-saga 설치

$ yarn add redux react-redux @types/react-redux redux-saga

typesafe-actions 설치 (v5)

redux-actions와 같은 Typescript 용 라이브러리입니다. 액션 생성 함수와 Reducer를 더 편하게 작성하고 사용할 수 있습니다.

$ yarn add typesafe-actions

Usage

1. 리덕스 모듈 구조 잡기

개발 방법론을 설명하려고 하지 않았지만, 그보단 덜 무거운 주제인 Redux 디렉터리 구조를 같이 소개하려고 합니다.

타입스크립트를 사용하기 전에는 완전한 덕스패턴을 이용하고 있었습니다. 하나의 파일에 액션 생성 함수, 리듀서 등을 같이 정의했으나 Typescript를 사용함으로써 생기는 state의 타입 선언 등 코드가 상당히 길어지는 불편함이 있었습니다.

300줄이나 되는 하나의 모듈 코드

위 모듈은 크게 보면 액션생성함수가 5개밖에 되지 않고 타입 선언이 빠져있음에도 300줄이나 되는 모습을 보입니다. 새로운 함수가 추가될 수록 코드의 길이는 기하급수적으로 길어지고 늘어나는 스크롤 속에서 원하는 코드를 찾는 작업은 점점 힘들어질 수 밖에 없습니다.

위의 구조를 해결하기 위해 디렉터리 구조 변경과 vs code의 장점을 이용하여 해결할 수 있습니다. 아래 구조는 벨로퍼트님의 강의를 참고하였습니다. 참고 : https://react.vlpt.us/

.
├── actions.ts
├── index.ts
├── reducer.ts
├── saga.ts
└── types.ts

하나의 모듈 파일을 위와 같이 분리하는 것으로 간단하게 해결할 수 있습니다. 파일명만 봐도 모듈에서 어떤 것을 정의하고 있는지 감이 오실 겁니다. 하나씩 어떻게 작성하고 있는지 설명하겠습니다.

2. 리덕스 모듈 작성하기

리덕스 모듈을 작성하기에 앞서 VS Code를 사용해서 작성하면 더 좋습니다. 번역 시간에 대한 에러(컴파일 에러)를 어느 정도 미리 잡아줍니다. 그리고 CommonJS나 AMD로 정의된 각 모듈을 파일 여러 곳에서 사용하기 때문에 여러 파일을 탐색하면서 수정하게 되는데 이때 맥기준으로 cmd+import한 모듈 명을 좌클릭하면 바로 모듈이 정의된 파일로 이동하게 됩니다.

정의된 모듈을 사용하는 경우 정의된 모듈 파일로 바로 이동할 수 있다.

무엇보다 Typescript를 사용하는 React에서 props로 전달받는 데이터에 대한 검사도 컴파일 이전에 잡을 수 있습니다.

2. 0. 리덕스 스토어 작성

모듈들을 적용할 루트 리듀서를 작성해야 합니다. test 모듈은 아래 예제에서 작성하게 될 모듈입니다.

modules / index.ts

import { combineReducers } from "redux";

import test from "./test";

const rootReducer = combineReducers({
  test,
});

export default rootReducer;

//컴포넌트에서 사용하게될 스토어에 저장된 데이터의 타입입니다.
export type RootState = ReturnType<typeof rootReducer>;

이후에 미들웨어를 편하게 등록시키기 위해 configureStore.ts를 미리 만들어 둡니다.

modules / configureStore.ts

import { createStore } from "redux";
import rootReducer from ".";

export default function configureStore() {
  const store = createStore(rootReducer);

  return store;
}

이제 프로젝트에 적용하면 됩니다.

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import configureStore from "./modules/configureStore";
import App from "./containers/App";

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

2. 1. actions.ts

modules / test / actions.ts

import { createAction } from "typesafe-actions";

//액션 타입
export const SET_STRING_ARR = "test/SET_STRING_ARR" as const;
export const SET_OBJECT = "test/SET_OBJECT" as const;

//액션 생성 함수
export const setStringArr = createAction(SET_STRING_ARR)<string[]>();
export const setObject = createAction(SET_OBJECT)<{
  a: string[];
  b: number;
  c: string;
}>();

액션 타입을 선언하고 액션 생성함수는 ‘typesafe-actions’의 createAction모듈을 사용합니다. createAction은 무제한으로 인수를 받을 수 있습니다.

2. 2. types.ts

store에 저장될 데이터의 타입과 액션 생성함수에 대한 타입을 정의합니다.

modules / test / types.ts

import { ActionType } from "typesafe-actions";

import * as actions from "./actions";

export type testState = {
  testStringArrData: string[];
  testObjectData: { a: string[]; b: number; c: string };
};

export type testAction = ActionType<typeof actions>;

ActionType 모듈은 선언된 액션 생성 함수의 타입을 정의해줍니다. 새로운 액션 생성함수를 만들어도 새롭게 타입을 정의하지 않아도 됩니다.

2. 3. reducer.ts

modules / test / reducer.ts

import { createReducer } from "typesafe-actions";

import { testAction, testState } from "./types";
import { SET_STRING_ARR, SET_OBJECT } from "./actions";

const initialState: uxAnalyticsState = {
  testStringArrData: [],
  testObjectData: {
    a: [],
    b: 0,
    c: "",
  },
};

//createReducer는 reducer를 쉽게 작성할 수 있도록 하는 모듈이며
//타입 오류를 방지 할 수 있습니다.
const reducer = createReducer<testState, testAction>(initialState, {
  [SET_STRING_ARR]: (state, action) => ({
    ...state,
    testStringArrData: action.payload,
  }),
  [SET_OBJECT]: (state, action) => ({
    ...state,
    testObjectData: action.payload,
  }),
});

export default reducer;

‘typesafe-actions’ 혹은 자바스크립트에서 ‘redux-actions’를 사용할 때는 reducer를 객체 형태로 작성할 수 있어 switch 문으로 작성하는 것보다 가독성이 좋다고 생각하고 있습니다. 그리고 VS code에서는 액션 생성 함수의 타입과 store의 타입에서 정의된 형식의 데이터만 코드로 작성할 수 있기 때문에 자바스크립트를 쓸 때 보다 더 null-able과 정의되지 않는 데이터 오류에 대한 고민을 많이 줄 일 수 있습니다.

Ctrl + Space 단축키로 action 인자에 정의된 객체를 탐색할 수 있다.

2. 4. index.ts

modules / test / index.ts

export { default } from "./reducer";
export * from "./actions";
export * from "./types";

어렵지 않습니다. 리덕스 스토어에 등록하기 위해 지금까지 작성했던 export 가능한 모듈들을 전부 불러와 export 합니다.

3. Redux-Saga 적용하기

가장 중요한 비동기 로직을 적용하는 방법입니다. 보통 프로젝트에서 비동기 로직을 구현할 때 대부분 API 처리에 관해 로직을 구현하게 됩니다. 그러한 관점에서 Saga를 어떻게 작성하는지 알아보겠습니다.

3. 0. api.ts, type.ts

api의 파라미터 타입과 리스폰스 타입을 정의합니다.

api / test / type.ts

// type.ts

// 세션 유효성 체크
export interface GetCheckSessionPramType {
  id: string;
}
export interface GetCheckSessionResponseType {
  code: string;
  message: string;
  payload: any;
}

api에 관한 정의를 작성합니다. axios 모듈로 작성하였습니다.

api / test / api.ts

//api.ts

import axios from "axios";
import { GetCheckSessionPramType, GetCheckSessionResponseType } from "./type";
import config from "../config-api.json";

let { apiInfo } = config;

export async function apiGetCheckSession(info: GetCheckSessionPramType) {
  const response = await axios.get<GetCheckSessionResponseType>(
    `${apiInfo.api_url}/check_session/`,
    {
      withCredentials: true,
      timeout: 10000,
      params: {
        id: info.id,
      },
    }
  );

  return response.data;
}

3. 1. action.ts

modules / test / actions.ts

import { createAsyncAction } from 'typesafe-actions';
import { AxiosError } from 'axios';

import {
	GetCheckSessionPramType
  GetCheckSessionResponseType,
} from '../../api/test/type';

//액션 타입
export const SET_STRING_ARR = 'test/SET_STRING_ARR' as const;
export const SET_OBJECT = 'test/SET_OBJECT' as const;

//액션 생성 함수
export const setStringArr = createAction(SET_STRING_ARR)<string[]>();
export const setObject = createAction(SET_OBJECT)<{
  a: string[];
  b: number;
  c: string;
}>();

//비동기 액션 타입
export const GET_CHECK_SESSION = 'test/GET_CHECK_SESSION' as const;
export const GET_CHECK_SESSION_SUCCESS = 'test/GET_CHECK_SESSION_SUCCESS' as const;
export const GET_CHECK_SESSION_ERROR = 'test/GET_CHECK_SESSION_ERROR' as const;

//비동기 액션 생성 함수
export const getCheckSessionAsync = createAsyncAction(
  GET_CHECK_SESSION,
  GET_CHECK_SESSION_SUCCESS,
  GET_CHECK_SESSION_ERROR
)<GetCheckSessionPramType, GetCheckSessionResponseType, AxiosError>();

‘typesafe-actions’의 createAsyncAction 모듈은 비동기 흐름(요청 / 성공 / 실패) 처리를 단순화하기 위해 세 가지로 구분된 액션 생성 함수를 포함하는 개체를 생성합니다. 각 액션 생성 함수의 리턴 타입을 정의합니다.

3. 2. saga.ts

action.ts와 같은 디렉터리 위치에서 파일을 작성합니다. 비동기 로직을 작성하는 부분입니다. 위에 작성한 액션 생성 함수가 시작되면 아래의 Saga 로직이 실행되는 구조입니다.

아래 코드를 작성하기 앞서 Redux-Saga에서 말하는 Saga는 제너레이터 함수 이기 때문에 자바스크립트 제너레이터에 대해 이해하고 있어야 로직이 어떻게 동작하는지 이해가 가능합니다.

modules / test / saga.ts

import { call, put, takeLatest } from "redux-saga/effects";
import { apiGetCheckSession } from "../../api/test/api";
import { GetCheckSessionResponseType } from "../../api/test/type";
import { getCheckSessionAsync, GET_CHECK_SESSION } from "./actions";

function* getCheckSessionSaga(
  action: ReturnType<typeof getCheckSessionAsync.request>
) {
  //액션을 모니터링 하고 있고 특정 액션 발생 시 요청 액션 생성 함수에 대해 파라미터로 받아 올 수 있습니다.
  try {
    //해당 액션의 payload 값을 인자로 넣어줄 수 있습니다.
    const response: GetCheckSessionResponseType = yield call(
      apiGetCheckSession,
      action.payload
    );
    //actions.ts에서 선언한 비동기 처리를 위한 액션 생성함수를 각 특성에 맞게 디스패칭 합니다.
    //당연히 디스패치를 할 때 넣어줄 인자는 actions.ts에서 정의한 성공, 실패에 대한 타입이 일치해야 합니다.
    yield put(getCheckSessionAsync.success(response));
  } catch (error) {
    yield put(getCheckSessionAsync.failure(error));
  }
}

export function* testSaga() {
  yield takeLatest(GET_CHECK_SESSION, getCheckSessionSaga);
}

export { testSaga as default };

제너레이터 함수에서 비동기로 특정 함수를 실행해야 할 때 제너레이터를 사용하지 않고 쉽게 사용할 수 있는 것이 saga의 이펙트입니다.

각 이펙트의 특성에 따라 특정 조건을 만족하게 되면 제너레이터의 메서드인 next()를 실행합니다. 모듈별 특정 조건은 다음과 같습니다. (코드에 포함된 이펙트 모듈도 있고 없는 모듈도 있으니 잘 참고 하시길 바랍니다.)

call 모듈은 동기 실행을 하며 Promise를 반환하는 함수를 호출합니다. 첫 번째 파라미터는 Promise를 반환하는 함수, 두 번째 파라미터는 해당 함수에 넣을 인수입니다.
fork 모듈은 비동기 실행을 하고 call과 같은 기능을 합니다.
put은 dispatch와 동일한 기능을 합니다.
takeEvery은 호출되는 모든 액션에 대해 수신합니다.
takeLatest은 A라는 액션이 종료되지 않은 상태일 때 같은 액션이 요청된다면 현재 실행 중인 액션을 취소합니다. 그리고 새롭게 들어온 A 액션에 대해 처리합니다.
takeLeading은 A라는 액션이 완료될 때까지 같은 액션 호출을 차단합니다.

3. 3. index.ts

modules / test / index.ts

export { default } from "./reducer";
export * from "./actions";
export * from "./types";
//test 모듈에 대한 saga역시 export합니다.
export * from "./saga";

3. 4. 미들웨어 등록하기

modules / index.ts

//index.ts
import { combineReducers } from "redux";
import { all } from "redux-saga/effects";

import test, { testSaga } from "./test";

const rootReducer = combineReducers({
  test,
});

export default rootReducer;
export type RootState = ReturnType<typeof rootReducer>;
export function* rootSaga() {
  yield all([testSaga()]);
}

all은 미들웨어가 여러 이펙트를 병렬로 실행하고 모두 완료될 때까지 기다리도록 지시하는 이펙트입니다.

modules / configureStore.ts

import { createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";
import { BrowserHistory, State } from "history";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer, { rootSaga } from ".";

export default function configureStore(customHistory: BrowserHistory<State>) {
  const sagaMiddleware = createSagaMiddleware({
    context: {
      history: customHistory,
    },
  });

  const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(sagaMiddleware))
  );

  //이제 선언한 모든 Saga를 미들웨어에 등록하고 미들웨어는 계속해서 액션을 감지한다.
  sagaMiddleware.run(rootSaga);

  return store;
}

history 객체와 redux 개발자도구도 같이 적용해 줍니다. (옵션이에요)

4. 컨테이너에서 사용하기

이제 거의 다 왔습니다! hooks를 쓰면 간단하게 redux를 사용할 수 있습니다.

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";

import { RootState } from "../../modules";
import { getCheckSessionAsync } from "../../modules/test";

const TestComponent = () => {
  //store에 저장된 state는 useSelector를 이용하세요
  const { testObjectData } = useSelector((state: RootState) => state.test);

  //액션을 호출할 때는 useDispatch를 이용하세요
  const dispatch = useDispatch();
  const onGetCheckSession = (id: string) => {
    dispatch(getCheckSessionAsync.request(id));
  };

  return <div>...</div>;
};

export default TestComponent;

Result

프로젝트가 커질수록 비즈니스 로직이 점점 복잡해지고 그에 따라 개발자가 구현해야 하는 로직 또한 난도가 높아지고 있습니다. 특정 상황에서 특정 API를 취소시켜야 하는 로직을 구현해야 했고 그런 복잡한 로직들을 앞으로도 다양하게 구현해야 했기 때문에 saga뿐만 아니라 typescript 역시 같이 적용하였습니다.

redux-saga가 싱글톤 패턴의 state 관리를 위한 최선의 비동기 처리 미들웨어는 아닙니다. redux-observable 혹은 redux를 버리고 Mobx와 Observable로 가는 방법도 있습니다.

위의 기술들 혹은 최신의 기술이 최고의 기술이라고 생각하지는 않습니다. 본인의 개발 스타일과 프로젝트의 비즈니스 로직에 맞는 최적의 기술을 찾아보시길 바랍니다.

(1) 평균을 비교하는 A/B 테스트

Thu, 24 Dec 2020 00:00:00 +0000

방학숙제와 A/B 테스트

환경오염 관련 이슈가 핫 했던 90년대 말, 초등학교 방학숙제로

세탁세제가 식물의 성장에 미치는 영향에 대해 실험을 했던 기억이 있습니다.

아마도 세탁세제가 풀린 물에서 자라는 식물과, 생수에서 자라는 식물의 평균 길이를 비교하려 했던 것 같습니다.

아마 이 방학숙제가 필자의 첫 A/B 테스트였을 것 입니다.

세탁세제가 식물의 성장에 영향을 미칠 것이다 라는 가설이 있었고

일반 생수에서 자라는 식물(A안)과 세탁세제가 풀린 물에서 자라는 식물(B안)을

해가 잘 드는 베란다에서 자라게 하였으니 (실험하고자 하는 변수 이외의 변수는 동일한 조건으로 통제)

훌륭하게 A/B 테스트를 수행했다고 생각됩니다

그래서 실험의 결과도 훌륭했나요?

탐구 일지에 적혀있는 결과는 '눈에 띄는 차이는 없었다' 였습니다.

하지만 정량적인 통계분석을 진행했다면 결과가 달라졌을지도 모르겠습니다.

A/B 테스트와 관련된 간단한 통계지식

최근 A/B 테스트를 서비스에 적용해 성공 또는 실패한 스토리들이 쏟아져 나오는것을 보며 최근 A/B 테스트가 핫한 이슈임을 다시금 깨닫게 되었습니다. 대부분의 기업에서는 서비스의 빠른 성장을 도와주는 마법같은 툴이라는 기대를 가지고 저마다 서비스에 A/B 테스트를 도입하고 싶어합니다. 하지만 대부분의 실무자들은 막연한 어려움을 가지고 있는것이 현실입니다.

여전히 많은 사람들이 A/B 테스트는 통계 분석에 기반한 기능이라는 사실을 모르고 있습니다. 지금 이 순간에도 단순히 서로 다른 색깔의 컴포넌트를 배치하거나 위치를 변경하여 A/B 테스트를 진행하고, 더 나은 전환률을 보이는 웹페이지를 선택하고 있을수도 있습니다.

물론 어려운 통계까지는 모르더라도 실무에 문제 될 것은 없다고 개인적으로 생각합니다.

그러나 정확한 A/B 테스트 설계와 결과 해석을 위해 활용되는 통계 지식을 한번쯤은 짚고 넘어갈 필요가 있습니다.

그래서 너드팩토리 블로그에서는 이러한 어려움을 떨쳐내는데 조금이나마 도움을 드리고자 A/B 테스트와 통계 시리즈를 통해 A/B 테스트와 관련된 통계지식들을 정리하며 함께 공부해보고자 합니다.

A/B 테스트와 통계 시리즈

(1) 평균을 비교하는 A/B 테스트

(2) 통계적 오류 없이 A/B 테스트 하기

(3) 평균 통계가 주는 함정

(1) 평균을 비교하는 A/B 테스트

1. 많은 A/B 테스트 케이스들은 평균을 비교합니다.

A/B 테스트는 일정 기간 테스트를 진행하여 전환율, 클릭률 같은 지표에 대해 A, B 두 안의 평균을 비교합니다.

기간의 전체 평균을 비교할지, 기간의 일 평균을 비교할지 등은 테스트 기획자가 수립한 가설에 따라 달라집니다.

2. 두 집단의 관측된 평균값을 단순히 비교하는 것이 아닙니다!

팀이 100개가 있는 회사가 있습니다. 그 중 A팀의 30대 하루 평균 운동량이 20대보다 많을때, 회사 전체에도 그렇다고 할 수 있을까요?

관측된 평균값을 단순히 비교하려면 '일반적으로 전체 집단이 그럴 거야~' 하는 확신이 필요합니다.

하지만 관측된 데이터가 전체 집단을 대표할 수 있다고 확신할 수 없기 때문에 위험한 방법입니다.

그래서 우리는 통계적 분석 방법을 활용하여 관측된 일부 데이터만을 가지고 '일반적으로 전체 집단이 그럴 거야~' 라고 할 수 있는 확률을 구하는 것입니다. 이 과정을 통계적 추론이라고 합니다.

통계적 추론

3. 통계적 가설검정 방법을 활용해 평균을 비교합니다.

가설을 세우고, 실험을 통해 데이터를 수집하고, 통계 분석으로 전체 집단에 대한 추론을 거쳐 가설을 평가합니다.

일반적으로 t-test 라는 가설 검정 방법을 활용해 두 집단의 평균값을 비교합니다.

또한 ANOVA 등의 통계 분석 방법을 활용하면 A/B/n 테스트처럼 여러 집단의 평균값을 비교 할 수 있습니다.

두 집단 (또는 세 집단 이상)의 평균 비교

4. 관측된 평균의 비교가 전체 집단 비교로 일반화 될 수 있는지 확인해야 합니다.

A/B 테스트 이후 우리는 p 값을 확인해야 합니다.

p 값은 보통 A/B 테스팅 툴, 엑셀, 통계분석 도구 등을 이용했다면 제공될 것입니다.

p 값은 쉽게 '일반적으로 전체 집단이 그럴 거야~' 라고 할 수 있는 확률이라 생각하시면 됩니다.

이를 통계학에서는 통계적 유의성 이라고 표현합니다.

위키백과에서는 통계적 유의성을 다음과 같이 정의하고 있습니다.

통계적 유의성(統計的 有意性)은 모집단에 대한 가설이 가지는 통계적 의미를 말한다.
다시 말해서, 어떤 실험 결과 자료를 두고 "통계적으로 유의하다."라고 하는 것은 `확률적으로 봐서 단순한 우연이라고 생각되지 않을 정도로 의미가 있다`는 뜻이다.
반대로 "통계적으로 유의하지 않다."라고 하는 것은 실험 결과가 단순한 우연일 수도 있다는 뜻이다.

통계적 유의성을 따지려 들때 p-value (p 값), ɑ (알파) 등의 용어들을 들어보셨을 수도 있습니다.

하지만 우리는 내 테스트의 결과가 통계적으로 유의한지만 살펴볼 줄 알면 됩니다.

일반적으로 많은 상황에서 p 값이 0.05 이하라면 통계적으로 유의하다고 할 수 있습니다.

두 집단의 평균을 비교하는 A/B 테스트에서는 p 값이 0.05 이하라면 두 집단 간 차이가 유의하다고 해석할 수 있으며 평균 값이 더 높은 안을 채택하면 됩니다 :)

5. p 값과 관련된 중요한 사실 한 가지!

통계적 유의성이 중요한가요?

결론부터 말하자면 중요합니다. 하지만 굉장히 중요한 것 같지는 않습니다. (정도로 표현하고 싶습니다)

유의성 검정과 관련해서는 학계에서도 이미 많은 논란이 있으며 논란을 간단히 정리하면 다음과 같습니다.

p 값을 0.05를 기준으로 이하면 유의하고, 넘어가면 유의하지 않다 라고 이분법적으로 해석하는 것은 문제라는 것입니다.

그래서 p 값에 대해서는 융통성있게 해석하는 것을 권장드립니다.

A/B 테스트에서 p 값이 0.05를 넘어서 0.06 0.07…0.1 정도의 결과가 나온다 하더라도 실패한 실험이구나 좌절하지 마시고 다음과 같이 해석하시면 됩니다.

통계적으로 유의하지는 않으나 두 집단 간 평균은 어느정도 차이는 있다고 볼 수 있다! 따라서 어느 안 하나를 선택할 근거는 충분하다!

물론 p 값이 0.3, 0.5.. 0.99 가 나온다면 당연히 유의하지 않은 것이니 고민하지 마세요! 🙂

다음 포스트에서는 통계적 오류 없이 A/B 테스트를 수행하는 방법에 대해 작성하려고 합니다.

A/B 테스트의 설계 방법과 통계적 분석 방법을 공부할 수 있으니 다음 포스트를 기대해 주세요~!

딥러닝 모델 Trainer 개발을 위한 Tutorial-2 (with Pytorch)

Wed, 04 Nov 2020 00:00:00 +0000

개요

인공지능(딥러닝) 모델을 활용해 원하는 문제를 해결하기 위해선, 작성된 모델이 원하는 기능을 수행 할 수 있도록 구성된 학습기의 개발이 필요합니다.

지난 튜토리얼에 이어 이번 포스팅에선 Basic-Trainer 를 토대로 학습 및 평가의 편의성을 향상시킨, Image-Classification-Trainer 를 만들어보려고 합니다.

수집된 이미지 데이터로부터 이미지 분류를 파악하고, 분류에 적합한 모델을 생성하여 학습까지 이루어지도록 구성 할 예정입니다.

지난 포스팅을 아직 보지 않으셨다면 아래 링크에서 보실 수 있습니다.

( 지난 포스팅 링크 )

개발 환경 :
python 3.6 이상, pytorch 1.2.0 이상, torchvision 0.4.0 이상을 권장합니다

Image-Classification

지난 포스팅에서 언급한, 학습기의 필수 구성 요소를 하나씩 되 짚으며 고도화 해 보겠습니다.

1. DataSet & DataLoader

이전 포스팅에서는 연습용으로 MNIST 데이터 셋을 불러왔지만, 이번에는 내가 학습하려고 하는 이미지들로 구성된 커스텀 데이터셋을 만들어 보려고 합니다.

먼저 dataset.py 라는 이름의 파일을 생성하고, 동일한 stage 에 /datasets 폴더를 만듭니다.

그리고 그 하위에 /train , /evaluation 폴더를 만든 뒤, 내부에 각 class 별로 이름을 가진 이미지 폴더들을 구성합니다.

예시로 개(dog), 고양이(cat), 새(bird) 이미지를 구분하고자 한다면 프로젝트 폴더 내부는 아래와 같을 것입니다.

PROJECT-BASE-DIRECTORY
    ├── /datasets
    │   ├── /train       # train_dataset
    │   │   ├── /bird
    │   │   ├── /cat
    │   │   └── /dog
    │   │
    │   └── /evaluation  # eval_dataset
    │       ├── /bird
    │       ├── /cat
    │       └── /dog
    │
    └── dataset.py

이제 dataset.py 내부에 내용을 작성 할 차례입니다.

/datasets 폴더 하위의 내용을 수집해 자동으로 클래스에 따른 index 를 생성하고, 학습용 이미지 데이터셋을 구성하도록 합니다.

# dataset.py

# 필요한 패키지 import
import json

from torchvision import transforms
from torchvision import datasets
from torch.utils.data import DataLoader

def image_folder_dataset(train_img_dir, eval_img_dir, batch_size=16):
    """
    Make Train & Evaluation Image-Dataset from Image-Folder
    :param train_img_dir: Train Image data directory (str)
    :param eval_img_dir: Evaluation Image data directory (str)
    :return: dict{
                      train_dataloader (torch.utils.data.DataLoader),
                      eval_dataloader (torch.utils.data.DataLoader),
                      class_index (dict)
                  }
    """

    # 이미지 전처리
    preprocess = transforms.Compose([
        transforms.Resize(256),                             # 이미지의 크기를 256 으로 Resize
        transforms.CenterCrop(224),                         # 256 사이즈의 이미지 중앙에 정사각형 영역 (224 * 224 사이즈) 을 Crop
        transforms.ToTensor(),                              # RGB 3 채널에 대해 픽셀별로 0~1 사이의 값을 갖는 Float 형 Tensor 로 변환
        transforms.Normalize(mean=[0.485, 0.456, 0.406],    # 입력된 mean, std 로 정규화 → 연산 효율을 올리기 위함 입니다. 정규화를 거치지 않아도 학습 가능
                             std=[0.229, 0.224, 0.225])     # 작성된 mean, std 는 ImageNet 으로부터 추출된 일반적인 이미지의 평균/표준편차 값
    ])
    # 하나의 이미지는 주어진 mean, std 값으로 정규화 된 (3, 224, 224) 사이즈의 Float 텐서로 변환
    # Tensor 차원 해석 : (RGB-Channel, Image-Height, Image-Width)

    # 이미지 폴더로부터 데이터 생성
    train_dataset = datasets.ImageFolder(root=train_img_dir,
                                         transform=preprocess)
    eval_dataset = datasets.ImageFolder(root=eval_img_dir,
                                        transform=preprocess)

    # train_dataset.classes 로 생성된 이미지 dataset 의 class 를 확인 가능
    # class 와 index 매칭을 위해 dict 형식으로 작성 및 json 파일로 저장
    class_index = {i: string for i, string in enumerate(train_dataset.classes)}
    with open("datasets/class_index.json", "w") as i:
        json.dump(class_index, i)
    with open("datasets/class_index.json", "r") as i:    # 저장 확인
        class_index = json.load(i)

    if not train_dataset.classes == eval_dataset.classes:    # 두 dataset 의 class 가 다른지 확인
        print("train & validation classes are not same")
        print(f"train.classes = {train_dataset.classes}")
        print(f"evaluation.classes = {eval_dataset.classes}")
        return None

    # DataLoader 생성
    train_dataloader = DataLoader(dataset=train_dataset,
                                  batch_size=batch_size,    # 임의의 batch_size
                                  shuffle=True)             # 학습 데이터를 랜덤하게 호출
    eval_dataloader = DataLoader(dataset=eval_dataset,
                                 batch_size=batch_size,    # 임의의 batch_size
                                 shuffle=False)            # 평가시엔 랜덤하게 데이터를 호출할 필요가 없으므로 False

    image_dataset = {
        "train_dataloader": train_dataloader,
        "eval_dataloader": eval_dataloader,
        "class_index": class_index
    }
    return image_dataset

if __name__ == "__main__":
    train_img_dir = "datasets/train"
    eval_img_dir = "datasets/evaluation"

    image_dataset = image_folder_dataset(train_img_dir, eval_img_dir)

    # 생성된 dataset 확인
    for batch in image_dataset['train_dataloader']:
        input, target = batch
        print(f"input batch shape = {input.shape}")
        print(f"target batch = {target}")
        break    # 1 iter 만 확인하도록 break
    # >>> input batch shape = torch.Size([16, 3, 224, 224])
    # >>> target batch = tensor([0, 1, 1, 0, 1, 1, 2, 0, 0, 2, 2, 0, 1, 0, 1, 2])
    # dataloader 에서 배치 사이즈를 지정한 뒤, iterator 로 호출하면 input: torch.Size([batch, 3, 224, 224]), target: torch.Size([batch]) 로 batch tensor 출력

    print(f"class_index : {image_dataset['class_index']}")
    # >>> class_index : {'0': 'bird', '1': 'cat', '2': 'dog'}

if __name__ == "__main__" 이하에 작성되어 있는 내용을 참고해, 이후 작성할 trainer 파일에서 완성된 dataloader 를 호출 할 수 있습니다.

2. Model 구성

이번 포스팅에선 Convolution 레이어를 활용한 딥러닝 모델을 활용해 보도록 하겠습니다.

VGGNet 모델 구조를 활용하기 위해 vgg_model.py 파일에 모델을 작성해 줍니다.

VGGNet 에 대한 자세한 내용은 논문을 참고 부탁드립니다. ( https://arxiv.org/abs/1409.1556v6 )

# vgg_model.py

# 작성된 모델은 VGG11 의 구조를 뼈대로 classifier layer 와 default class 를 줄인 소형 모델입니다.
# 필요한 패키지 import
import torch
import torch.nn as nn

class VGG(nn.Module):
    def __init__(self, config, num_classes=10, init_weights=True):
        super(VGG, self).__init__()
        self.features = self._make_layers(config)    # VGG 모델의 구조 정보(cfg) 로부터, Feature 추출기 작성
        self.avgpool = nn.AdaptiveAvgPool2d((7, 7))
        self.classifier = nn.Sequential(             # 이미지에서 추출된 특징(Feature)으로부터 class 를 추측하는 분류기 작성
            nn.Linear(512 * 7 * 7, 1024),
            nn.ReLU(inplace=True),
            nn.Dropout(p=0.3),
            nn.Linear(1024, num_classes),
        )
        if init_weights:                             # 가중치 초기화 로직
            self._initialize_weights()

    def forward(self, x: torch.Tensor) -> torch.Tensor:
        x = self.features(x)
        x = self.avgpool(x)
        x = torch.flatten(x, 1)
        x = self.classifier(x)
        return x

    def _make_layers(self, cfg):
        layers = []
        in_channels = 3
        for v in cfg:
            if v == 'M':
                layers += [nn.MaxPool2d(kernel_size=2, stride=2)]
            else:
                conv2d = nn.Conv2d(in_channels, v, kernel_size=3, padding=1)
                layers += [conv2d, nn.ReLU(inplace=True)]
                in_channels = v
        return nn.Sequential(*layers)

    def _initialize_weights(self):
        for m in self.modules():
            if isinstance(m, nn.Conv2d):
                nn.init.kaiming_normal_(m.weight, mode='fan_out', nonlinearity='relu')
                if m.bias is not None:
                    nn.init.constant_(m.bias, 0)
            elif isinstance(m, nn.BatchNorm2d):
                nn.init.constant_(m.weight, 1)
                nn.init.constant_(m.bias, 0)
            elif isinstance(m, nn.Linear):
                nn.init.normal_(m.weight, 0, 0.01)
                nn.init.constant_(m.bias, 0)

if __name__ == "__main__":
    vgg11_cfg = [64, 'M', 128, 'M', 256, 256, 'M', 512, 512, 'M', 512, 512, 'M']    # VGG 모델의 구조 정보
    model = VGG(vgg11_cfg, num_classes=10, init_weights=True)    # model 빌드

    # 테스트 데이터 입력 후 출력 확인
    test_input = torch.randn(1, 3, 224, 224)
    out = model(test_input)
    print(f"{out.shape} \n {out}")

    print("Model is Ready")

VGG 모델의 구조 정보로부터 CNN 기반의 모델을 빌드하고, 테스트 텐서를 넣어서 출력이 나오는 것 까지 확인을 해보는 코드 입니다.

마찬가지로 if __name__ == "__main__" 이하에 작성되어 있는 내용을 참고해, 이후 작성할 trainer 파일에서 완성된 model 을 호출 할 수 있습니다.

3. Criterion (loss_function)

criterion = nn.CrossEntropyLoss()

Loss_Function 의 경우, 지난번과 동일하게 class 분류에 많이 사용하는 CrossEntropyLoss 를 지정하였습니다.

CrossEntropyLoss 에 대한 보다 자세한 이해를 원하시면 아래 Pytorch 공식 문서를 참고해주세요.

https://pytorch.org/docs/stable/generated/torch.nn.CrossEntropyLoss.html

4. Optimizer 의 구성 (with Scheduler)

optimizer = torch.optim.Adam(
    model.parameters(),    # 역전파 연산을 할 모델의 파라미터
    lr=0.003               # 임의의 learning_rate
)
# 주어진 step 이 지날때마다 학습률(Learning Rate)을 선형으로 변환해주는 스케줄러
scheduler = lr_scheduler.StepLR(
    optimizer,             # 학습률을 조절할 optimizer
    step_size=100          # 학습률을 변환할 주기 (step)
    gamma=0.9              # 변환할 학습률 (상대값)
)

역전파 된 loss 의 gradient 결과를 활용하여 모델을 학습하도록 하는 Optimizer 입니다.

이번에는 Adam(Adaptive Moment Estimation) Optimizer 를 적용해보도록 하겠습니다.

지난번과 마찬가지로, 학습하고자 하는 모델의 파라미터(model.parameters())와 학습률(learning_rate) 를 지정해주면, 해당 파라미터를 학습률 만큼 변형하며 모델을 학습합니다

optimizer.step() 명령어를 활용하여 모델의 파라미터를 수정합니다.

거기에 더해 이번에는 step 에 따라 학습률(Learning Rate)을 선형으로 변환해주는 스케줄러를 함께 활용해보도록 하겠습니다.

초기에 너무 작은 값의 학습률을 지정하면, 모델이 수렴하기까지 긴 시간이 걸리게 되지만, 충분한 학습이 이루어진 이후에 적절히 학습률을 감소 시키면 학습에 필요한 시간도 단축하면서, 작은 보폭으로 보다 정확하게 수렴하는 파라미터를 찾을 수 있게 됩니다.

여기서는 간단한 적용을 위해, 주어진 step 이 지나면 주어진 값만큼 학습률을 변환하는 선형 스케줄러를 구성하였습니다.

( 필요에 따라 다양한 형태의 스케줄러 사용이 가능하고, 커스텀 할 수도 있습니다 )

5. Train Iterator

Train Iterator 부분은 기존과 큰 차이가 없습니다.

앞서 구성해 놓은 dataloader 와 model, optimizer, scheduler 들을 한데 모아 train step 을 진행하면 됩니다.

다만 이번에는 추가로 GPU 가속을 활용할 수 있도록 Device 세팅을 포함하고, 학습의 상태를 확인할 수 있도록 tqdm 을 활용해 학습 상태를 시각화하는 코드를 작성 해보겠습니다.

trainer.py 파일에 내용을 작성될 내용을 간단히 요약하면 아래와 같습니다.

( Loss Function & Optimizer & Scheduler 등의 요소가 작성되어있지 않아서 실제 바로 동작하진 않습니다. Train 에 직접적인 영향을 주는 구성 요소들만 추려놓은 것으로 이해바랍니다 )

# 필요한 패키지 import
import os
from tqdm import tqdm, trange
import torch
from torch import nn

# CUDA 를 활용한 GPU 가속 여부에 따라, 장치를 할당 할 수 있도록 변수로 선언
device = torch.device("cuda" if torch.cuda.is_available() else "cpu")

# Prepare Custom Model
model = VGG(parameters['vgg11_cfg'], num_classes=len(class_index), init_weights=True)  # model 빌드
model.to(device)     # 모델의 장치를 device 에 할당
model.zero_grad()    # 모델 gradient 초기화
model.train()        # Train 모드로 모델 설정

# Train Start
train_iterator = trange(int(parameters['epoch']), desc="Epoch")  # 학습 상태 출력을 위한 tqdm.trange 초기 세팅
global_step = 0

# Epoch 루프
for epoch in train_iterator:
    epoch_iterator = tqdm(
        train_dataloader, desc='epoch: X/X, global: XXX/XXX, tr_loss: XXX'  # Description 양식 지정
    )
    epoch = epoch + 1

    # Step(batch) 루프
    for step, batch in enumerate(epoch_iterator):
        # 모델이 할당된 device 와 동일한 device 에 연산용 텐서 역시 할당 되어 있어야 함
        image_tensor, tags = map(lambda elm: elm.to(device), batch)  # device 에 연산용 텐서 할당
        out = model(image_tensor)      # Calculate
        loss = criterion(out, tags)    # loss 연산

        # Backward and optimize
        loss.backward()
        optimizer.step()
        optimizer.zero_grad()
        scheduler.step()  # Update learning rate schedule
        global_step += 1
        # One train step Done

        # Step Description
        epoch_iterator.set_description(
            'epoch: {}/{}, global: {}/{}, tr_loss: {:.3f}'.format(
                epoch, parameters['epoch'],
                global_step, train_steps * parameters['epoch'],
                loss.item()
            )
        )

전체 학습 Dataset 에 대해, Dataloader 로 생성된 iteration 을 돌면서 step 마다 학습을 진행 합니다.

기존과 동일하게 1 step 마다 loss 를 계산하고, optimizer 를 초기화 한 뒤, loss 를 역전파 하고, 역전파된 정보에 따라 모델의 파라미터를 수정하는 일련의 과정이 코드에 작성되어 있습니다.

6. Evaluation Logic

기존에 구성된 학습기과 마찬가지로 학습된 모델의 정확도 평가를 위한 로직 입니다.

# Evaluation
model.eval()    # 모델의 AutoGradient 연산을 비활성화하고 평가 연산 모드로 설정 (메모리 사용 및 연산 효율화를 위해)
sum_eval_acc, sum_eval_loss = 0, 0
eval_result = {"mean_loss": 0, "mean_acc": 0}

eval_iterator = tqdm(    # Description 양식 지정
    eval_dataloader, desc='Evaluating - mean_loss: XXX, mean_acc: XXX'
)

# Evaluate
for e_step, e_batch in enumerate(eval_iterator):
    image_tensor, tags = map(lambda elm: elm.to(device), e_batch)  # device 에 연산용 텐서 할당
    out = model(image_tensor)  # Calculate
    loss = criterion(out, tags)

    # Calculate acc & loss
    sum_eval_acc += (out.max(dim=1)[1] == tags).float().mean().item()    # 정답과 추론 값이 일치하는 경우 정답으로 count
    sum_eval_loss += loss.item()

    # 평가 결과 업데이트
    eval_result.update({"mean_loss": sum_eval_acc / (e_step + 1),
                        "mean_acc": sum_eval_loss / (e_step + 1)})

    # Step Description
    eval_iterator.set_description(
        'Evaluating - mean_loss: {:.3f}, mean_acc: {:.3f}'.format(
            eval_result['mean_loss'], eval_result['mean_acc'])
    )
model.train()  # 평가 과정이 모두 종료 된 뒤, 다시 모델을 train 모드로 변경

Evaluation 로직은 함수로 분리하여, 각 Epoch 이 종료되는 시점마다 평가를 진행할 수 있도록 구성할 수 있습니다

전체 학습기 구성

지금까지의 단계를 토대로 trainer.py 파일을 완성하면 다음과 같습니다

# trainer.py

# 필요한 패키지 import
import os
from tqdm import tqdm, trange

import torch
from torch import nn
from torch.optim import Adam, lr_scheduler

from dataset import image_folder_dataset
from vgg_model import VGG

# CUDA 를 활용한 GPU 가속 여부에 따라, 장치를 할당 할 수 있도록 변수로 선언
device = torch.device("cuda" if torch.cuda.is_available() else "cpu")

def train(parameters):
    # Prepare Image DataSets
    train_image_dir = parameters['datasets'][0]
    eval_img_dir = parameters['datasets'][1]
    image_dataset = image_folder_dataset(train_image_dir, eval_img_dir,
                                         batch_size=parameters['batch_size'])

    # Train & Eval Dataloader
    train_dataloader = image_dataset['train_dataloader']
    eval_dataloader = image_dataset['eval_dataloader']
    class_index = image_dataset['class_index']
    train_steps = len(train_dataloader)
    eval_steps = len(eval_dataloader)

    # Prepare Custom Model
    model = VGG(parameters['vgg11_cfg'], num_classes=len(class_index), init_weights=True)  # model 빌드
    model.to(device)   # 모델의 장치를 device 에 할당
    model.zero_grad()  # 모델 gradient 초기화
    model.train()      # Train 모드로 모델 설정

    # Loss Function
    criterion = nn.CrossEntropyLoss()  # loss function

    # Optimizer & LR_Scheduler setting
    optimizer = Adam(model.parameters(),  # Adam 옵티마이저 세팅
                     lr=parameters['learning_rate'])
    scheduler = lr_scheduler.StepLR(optimizer,  # 선형 스케줄러 세팅 - 학습률 조정용 스케줄러
                                    parameters['scheduler_step'],
                                    parameters['scheduler_gamma'])

    # Train Start
    train_iterator = trange(int(parameters['epoch']), desc="Epoch")  # 학습 상태 출력을 위한 tqdm.trange 초기 세팅
    global_step = 0

    # Epoch 루프
    for epoch in train_iterator:
        epoch_iterator = tqdm(
            train_dataloader, desc='epoch: X/X, global: XXX/XXX, tr_loss: XXX'  # Description 양식 지정
        )
        epoch = epoch + 1

        # Step(batch) 루프
        for step, batch in enumerate(epoch_iterator):
            # 모델이 할당된 device 와 동일한 device 에 연산용 텐서 역시 할당 되어 있어야 함
            image_tensor, tags = map(lambda elm: elm.to(device), batch)  # device 에 연산용 텐서 할당
            out = model(image_tensor)      # Calculate
            loss = criterion(out, tags)    # loss 연산

            # Backward and optimize
            loss.backward()
            optimizer.step()
            optimizer.zero_grad()
            scheduler.step()  # Update learning rate schedule
            global_step += 1
            # One train step Done

            # Step Description
            epoch_iterator.set_description(
                'epoch: {}/{}, global: {}/{}, tr_loss: {:.3f}'.format(
                    epoch, parameters['epoch'],
                    global_step, train_steps * parameters['epoch'],
                    loss.item()
                )
            )

        # -- Evaluate & Save model result -- #
        # 한 Epoch 종료 시 평가, 평가 결과 정보를 포함한 이름으로 학습된 모델을 지정된 경로에 저장
        eval_result = evaluate(model, criterion, eval_dataloader)
        # Set Save Path
        os.makedirs(parameters['train_output'], exist_ok=True)
        save_path = parameters['train_output'] + \
                    f"/epoch-{epoch}-acc-{eval_result['mean_acc']}-loss-{eval_result['mean_loss']}"
        # Save
        torch.save(model.state_dict(), save_path + "-model.pth")

def evaluate(model, criterion, eval_dataloader):
    # Evaluation
    model.eval()  # 모델의 AutoGradient 연산을 비활성화하고 평가 연산 모드로 설정 (메모리 사용 및 연산 효율화를 위해)
    sum_eval_acc, sum_eval_loss = 0, 0
    eval_result = {"mean_loss": 0, "mean_acc": 0}

    eval_iterator = tqdm(  # Description 양식 지정
        eval_dataloader, desc='Evaluating - mean_loss: XXX, mean_acc: XXX'
    )

    # Evaluate
    for e_step, e_batch in enumerate(eval_iterator):
        image_tensor, tags = map(lambda elm: elm.to(device), e_batch)  # device 에 연산용 텐서 할당
        out = model(image_tensor)  # Calculate
        loss = criterion(out, tags)

        # Calculate acc & loss
        sum_eval_acc += (out.max(dim=1)[1] == tags).float().mean().item()  # 정답과 추론 값이 일치하는 경우 정답으로 count
        sum_eval_loss += loss.item()

        # 평가 결과 업데이트
        eval_result.update({"mean_loss": sum_eval_acc / (e_step + 1),
                            "mean_acc": sum_eval_loss / (e_step + 1)})

        # Step Description
        eval_iterator.set_description(
            'Evaluating - mean_loss: {:.3f}, mean_acc: {:.3f}'.format(
                eval_result['mean_loss'], eval_result['mean_acc'])
        )
    model.train()  # 평가 과정이 모두 종료 된 뒤, 다시 모델을 train 모드로 변경

    return eval_result

if __name__ == "__main__":
    # Train Parameter
    parameters = {
        "datasets": ["datasets/train", "datasets/evaluation"],                            # 학습용 데이터 경로
        "vgg11_cfg": [64, 'M', 128, 'M', 256, 256, 'M', 512, 512, 'M', 512, 512, 'M'],    # VGG 모델의 구조 정보
        "class_info_file": "datasets/class_index.json",                                   # 학습용 데이터의 class_info_file
        "epoch": 10,                # 전체 학습 Epoch
        "batch_size": 16,           # Batch Size
        "learning_rate": 0.003,     # 학습률
        "scheduler_step": 100,      # 어느정도 step 주기로 학습률을 감소할지 지정
        "scheduler_gamma": 0.9,     # 학습률의 감소 비율
        "train_output": "output"    # 학습된 모델의 저장 경로
    }
    train(parameters)  # train

    print("Train Complete")

초기 parameters 를 받아 학습을 진행합니다. (개인의 선호에 따라 파라미터는 수정하시면 됩니다)

앞서 구성한대로, 미리 Custom Dataset & DataLoader 를 만들고, Class 정보에 따라 자동으로 Custom 모델을 빌드 한 후, 학습을 진행합니다.

1 Epoch 이 완료되면 모델을 평가하고, 평가 결과 정보를 포함한 이름으로 모델을 저장합니다.

Project Skeleton

전체 학습기가 구성된 프로젝트의 스켈레톤은 다음과 같습니다.

PROJECT-BASE-DIRECTORY
    ├── /datasets
    │   ├── /train         # train_dataset
    │   │   ├── /bird
    │   │   ├── /cat
    │   │   └── /dog
    │   │
    │   ├── /evaluation    # eval_dataset
    │   │   ├── /bird
    │   │   ├── /cat
    │   │   └── /dog
    │   │
    │   └── class_index.json  - # dataset & dataloader 구성 시 자동 생성
    │
    ├── /output               - # 학습된 모델 저장시 자동으로 생성 (이하 경로에 학습된 모델 저장)
    │
    ├── dataset.py
    ├── trainer.py
    └── vgg_model.py

( 예시 데이터로 예시로 개(dog), 고양이(cat), 새(bird) 를 구성하였지만, 필요에 따라 적절한 학습 데이터를 구성하시길 바랍니다 )

Repository

최종적으로 완성된 전체 프로젝트의 저장소 입니다.

( 지난번 튜토리얼-1 의 학습기도 basic-trainer.py 파일에 작성되어있습니다 )

https://github.com/NerdFactoryAI/Trainer-Tutorial

학습

적절한 가상환경을 구성한 뒤, python trainer.py 명령어를 통해 학습을 진행하면 됩니다.

tqdm 을 활용해 학습 과정을 시각화 하여, 어느정도 학습이 진행되고 있는지 파악할 수 있습니다.

학습 중간 캡쳐

결론

이것으로 Pytorch 기반의 딥러닝 학습기 Tutorial 을 마무리 하였습니다. 부족한 내용이지만 여러분들의 딥러닝 학습기에 대한 이해를 높이는데 도움이 되었길 기대합니다.

여기에 작성되어있는 학습기는 이해를 돕기 위해 가독성을 우선하여 작성되었습니다.

따라서 개개인의 필요에 따라 더욱 최적화, 자동화가 이루어진 발전된 학습기를 작성할 여지가 충분히 있습니다.

커스텀된 데이터셋과 모델, 적절한 스케줄러와 옵티마이저를 활용해 여러분만의 Task 를 수행할 수 있는 모델을 학습해보시길 바랍니다.

Reference

딥러닝 모델 Trainer 개발을 위한 Tutorial-1 (with Pytorch)

Thu, 08 Oct 2020 00:00:00 +0000

개요

이번 포스팅에선 인공지능 학습기. 특히 지도학습을 위한 학습기가 동작하기 위해 필요한 구성 요소에 대해 알아보고, Pytorch 프레임워크를 활용하여 간단한 코드를 작성해보고자 합니다.

개발 환경 :
python 3.6 이상, pytorch 1.2.0 이상, torchvision 0.4.0 이상을 권장합니다

Model-Trainer 의 필수 구성 요소

지도학습은 입력된 데이터를 기반으로 모델에게 정답을 추론시키고, 그 결과와 실제 정답을 비교해 추출한 loss 를 역전파 하여, 최종적으로 모델이 정답을 추론 할 수 있도록 학습합니다.

이러한 일련의 과정을 위해서 필요한 필수 요소들은 다음과 같습니다.

DataSet - 학습 & 평가를 위한 (입력, 정답) 쌍으로 구성된 학습용 데이터 셋
Model - 추론을 위한 딥러닝 모델
Criterion - loss 연산을 위한 함수
Optimizer - 학습을 위한 Optimizer
Train Iterator - 학습을 위한 Train Step
Evaluation Logic - 모델이 얼마나 잘 학습되었는지 확인하기 위한 평가

( 위의 요소들 중 하나라도 부족하면 지도학습을 진행 할 수 없게 됩니다. )

Basic-Trainer 개발

학습기의 기본적인 요소들을 포함하여 최소 기능을 하는 학습기를 작성해 봅시다.

먼저 Pytorch 프레임워크와 필요 모듈들을 import 합니다

import os
import torch
import torch.nn as nn
import torchvision
import torchvision.transforms as transforms

Dataset 과 Dataloader 세팅
```
BASE_DIR = os.path.dirname(os.path.abspath(__file__))

# MNIST dataset
train_dataset = torchvision.datasets.MNIST(root=f'{BASE_DIR}/datasets',
                                           train=True,
                                           transform=transforms.ToTensor(),
                                           download=True)
eval_dataset = torchvision.datasets.MNIST(root=f'{BASE_DIR}/datasets',
                                          train=False,
                                          transform=transforms.ToTensor())

# Data loader
train_loader = torch.utils.data.DataLoader(dataset=train_dataset,
                                           batch_size=64,  # 임의 지정 batch
                                           shuffle=True)
eval_loader = torch.utils.data.DataLoader(dataset=test_dataset,
                                          batch_size=64,   # 임의 지정 batch
                                          shuffle=False)
```
필수 요소 중 1번. 학습 & 평가를 위한 (입력, 정답) 쌍으로 구성된 학습용 데이터 셋을 불러옵니다.

연습용 데이터로 MNIST 학습 데이터를 불러왔습니다

(처음 실행시키는 경우, Pytorch 아카이브로부터 데이터셋을 다운받아 코드를 실행하는 경로의 /data 하위에 MNIST 학습 데이터를 저장합니다)
- dataset
  
  (입력, 정답) 쌍을 활용해 학습용 데이터를 구축할 수 있도록 해주는 class 입니다. (입력, 정답) 각각의 tensor 형은 모델의 입력과 출력 tensor 모양과 동일해야 합니다.
  
  MNIST 데이터셋은 28*28 사이즈의 흑백 이미지므로, 입력 tensor 의 포멧은 (batch, 28, 28) 이 되고, 정답은 10개의 class 중 하나의 인덱스를 갖게 됩니다.
  
  (입력, 정답) 쌍은 train_dataset[0] 과 같이 숫자형 인덱스로 호출 가능합니다.
- dataloader
  
  dataset 을 받아서 dataset 내부의 학습 & 평가 데이터를 학습 batch 로 만들어 출력합니다.
  
  순서를 무작위로 섞는 옵션도 가능하며 (shuffle=True), for loop 의 요소로 input_batch & output_batch 를 출력합니다
  
  위 예시의 경우 임의로 64개 batch 를 할당하였으며, 1번의 step 동안 64개 데이터를 한번에 본 뒤 64개의 추론 결과를 동시에 출력하도록 함을 의미합니다.
  
  batch 에 대한 확인을 해보고 싶다면 아래와 같은 간단한 스크립트로 확인이 가능합니다 (tensor 사이즈의 1차원 요소값이 batch 입니다)
```
for input_batch, output_batch in train_loader:
    print(input_batch.shape[0], output_batch.shape[0])
```
이렇게 학습을 위한 입력 & 정답 쌍을 준비했습니다
Model 의 준비
```
model = nn.Sequential(
    nn.Linear(784, 1024),  # 28 * 28 = 784
    nn.Linear(1024, 10),
)
```
28 * 28 개의 노드로부터 입력을 받고(MNIST format), 1024 차원의 히든 벡터를 갖는 2개 층의 간단한 DNN 모델을 생성하였습니다.

이 모델은 (batch, 784) 모양의 tensor 입력을 받아, (batch, 10) 모양의 tensor 를 추론 결과로 출력하도록 구성되어 있습니다.

(모델은 필요에 따라 VggNet, ResNet, DenseNet 등 다양한 모델을 활용 할 수 있습니다. 입력과 출력 tensor 의 형태에만 주의를 바랍니다)
loss 함수의 준비
```
criterion = nn.CrossEntropyLoss()
```
class 를 분류하는데 많이 사용하는 CrossEntropyLoss 를 loss 함수로 지정하였습니다.

여러 class 중 가장 높은 값을 갖는 class 가 정답이 되도록 추론 할 수 있습니다.

CrossEntropyLoss 에 대한 보다 자세한 이해를 원하시면 아래 Pytorch 공식 문서를 참고해주세요.

https://pytorch.org/docs/stable/generated/torch.nn.CrossEntropyLoss.html

CrossEntropyLoss 는 추론 결과로 생성된 (batch, classes) 텐서와 (batch) 정답 텐서를 비교해 Loss 를 연산합니다.

위의 MNIST 데이터를 연산하는 모델의 경우, 모델에서 (batch, classes=10) 의 텐서가 출력되고, 정답은 tensor([0, 2, 1, 6, 4, …. (정답 class 의 index 값이 batch 만큼 존재)]) 형태의 텐서가 됩니다.

pytorch 는 loss.backward() 명령어를 활용하여 loss 의 역전파를 진행할 수 있습니다.
Optimizer
```
optimizer = torch.optim.SGD(
    model.parameters(),    # 역전파 연산을 할 모델의 파라미터
    lr=0.003               # 임의의 learning_rate
)
```
위에서 계산한 loss 값을 역전파 한 뒤, 해당 역전파의 gradient 결과를 활용하여 모델을 학습하도록 하는 Optimizer 입니다.

예시에서는 확률적 경사 하강법이 적용된 SGD(Stochastic Gradient Descent)을 활용하였습니다.

학습하고자 하는 모델의 파라미터(model.parameters())와 학습률(learning_rate) 를 지정해주면, 해당 파라미터를 학습률 만큼 변형하며 모델을 학습합니다

optimizer.step() 명령어를 활용하여 모델의 파라미터를 학습합니다.

Train Iterator

# Model 학습
epochs = 10  # 전체 데이터를 모두 학습하는 epoch 를 몇번 반복할 것인지. 임의 값
total_step = len(train_loader)
model.train()  # 모델의 AutoGradient 연산을 활성화하는 학습 모드로 설정

# epoch 루프
for epoch in range(epochs):

    # step 루프
    for i, (inputs, targets) in enumerate(train_loader):
        # MNIST 텐서는 (batch, 28, 28) 의 형태이므로,
        # 테스트 모델에 적합하도록 (batch, 768) 의 형태로 Reshape 합니다
        inputs = inputs.reshape(-1, 28 * 28)  # 28 * 28 = 784

        # 순전파 - 모델의 추론 및 결과의 loss 연산
        outputs = model(inputs)
        loss = criterion(outputs, targets)

        # Backward and optimize
        optimizer.zero_grad()  # optimizer 초기화 (과거 학습 step 의 gradient 영향을 받지 않기 위해 필요)
        loss.backward()  # loss 의 역전파
        optimizer.step()  # 모델의 학습

        # 학습 상태 정보 출력
        print('Epoch [{}/{}], Step [{}/{}], Loss: {:.4f}'
              .format(epoch + 1, epochs, i + 1, total_step, loss.item()))

전체 학습 Dataset 에 대해, Dataloader 로 생성된 iteration 을 돌면서 step 마다 학습을 진행 합니다.

1 step 마다 batch 사이즈 만큼의 데이터를 학습하며, epoch 횟수 만큼 전체 데이터셋을 반복해서 학습하게 됩니다.

학습을 위해 loss 를 계산하고, optimizer 를 초기화 한 뒤, loss 를 역전파 하고, 역전파된 정보에 따라 모델의 파라미터를 수정하는 일련의 과정이 코드에 작성되어 있습니다.

Evaluation Logic

model.eval()  # 모델의 AutoGradient 연산을 비활성화하고 평가 연산 모드로 설정 (메모리 사용 및 연산 효율화를 위해)
correct_cnt = 0
total_cnt = 0
for (inputs, targets) in eval_loader:
    # 학습 step 과 동일하게 추론 및 결과의 loss 연산을 진행
    inputs = inputs.reshape(-1, 28 * 28)  # 28 * 28 = 784
    outputs = model(inputs)
    loss = criterion(outputs, targets)

    _, predicted = torch.max(outputs.data, 1)  # 가장 큰 값을 갖는 class index 가 모델이 추론한 정답
    total_cnt += targets.size(0)
    correct_cnt += (predicted == targets).sum()  # 정답과 추론 값이 일치하는 경우 정답으로 count

print('Model Accuracy: {:.2f} %'.format(100 * correct_cnt / total_cnt))
model.train()  # 평가가 모두 완료되었으므로 다시 학습 모드로 전환

일정 step 만큼 학습이 되면, 실제 학습된 모델의 정확도가 어느정도인지 평가가 필요합니다.

이를 위한 Evaluation Logic 으로, 1번 단계에서 선언한 eval_dataset 과 eval_loader 를 활용합니다.

model.eval() 은 모델의 AutoGradient 연산을 비활성화하고, DropOut 및 Batch Normalize 같은 학습용 파라미터를 스킾하여, 모델이 평가모드로 동작할 수 있도록 합니다.

위의 단계를 토대로 전체 학습기 코드를 작성하면 아래와 같습니다

# Trainer-Tutorial-1 의 MNIST 기초 학습기 입니다

import os
import torch
import torch.nn as nn
import torchvision
import torchvision.transforms as transforms

BASE_DIR = os.path.dirname(os.path.abspath(__file__))

# MNIST dataset
train_dataset = torchvision.datasets.MNIST(root=f'{BASE_DIR}/datasets',
                                           train=True,
                                           transform=transforms.ToTensor(),
                                           download=True)
eval_dataset = torchvision.datasets.MNIST(root=f'{BASE_DIR}/datasets',
                                          train=False,
                                          transform=transforms.ToTensor())

# Data loader
train_loader = torch.utils.data.DataLoader(dataset=train_dataset,
                                           batch_size=64,  # 임의 지정 batch
                                           shuffle=True)
eval_loader = torch.utils.data.DataLoader(dataset=eval_dataset,
                                          batch_size=64,  # 임의 지정 batch
                                          shuffle=False)

# model
model = nn.Sequential(
    nn.Linear(784, 1024),  # 28 * 28 = 784
    nn.Linear(1024, 10),
)

# Loss Function & Optimizer
criterion = nn.CrossEntropyLoss()  # loss function
optimizer = torch.optim.SGD(
    model.parameters(),  # 역전파 연산을 할 모델의 파라미터
    lr=0.003  # 임의의 learning_rate
)

# Model 학습
epochs = 10  # 전체 데이터를 모두 학습하는 epoch 를 몇번 반복할 것인지. 임의 값
total_step = len(train_loader)
model.train()  # 모델의 AutoGradient 연산을 활성화하는 학습 모드로 설정

# epoch 루프
for epoch in range(epochs):

    # step 루프
    for i, (inputs, targets) in enumerate(train_loader):
        # MNIST 텐서는 (batch, 28, 28) 의 형태이므로,
        # 테스트 모델에 적합하도록 (batch, 768) 의 형태로 Reshape 합니다
        inputs = inputs.reshape(-1, 28 * 28)  # 28 * 28 = 784

        # 순전파 - 모델의 추론 및 결과의 loss 연산
        outputs = model(inputs)
        loss = criterion(outputs, targets)

        # Backward and optimize
        optimizer.zero_grad()  # optimizer 초기화 (과거 학습 step 의 gradient 영향을 받지 않기 위해 필요)
        loss.backward()  # loss 의 역전파
        optimizer.step()  # 모델의 학습

        # 학습 상태 정보 출력
        print('Epoch [{}/{}], Step [{}/{}], Loss: {:.4f}'
              .format(epoch + 1, epochs, i + 1, total_step, loss.item()))

    # 한 epoch 가 모두 돈 뒤, Model 평가
    model.eval()  # 모델의 AutoGradient 연산을 비활성화하고 평가 연산 모드로 설정 (메모리 사용 및 연산 효율화를 위해)
    correct_cnt = 0
    total_cnt = 0
    for (inputs, targets) in eval_loader:
        # 학습 step 과 동일하게 추론 및 결과의 loss 연산을 진행
        inputs = inputs.reshape(-1, 28 * 28)  # 28 * 28 = 784
        outputs = model(inputs)
        loss = criterion(outputs, targets)

        _, predicted = torch.max(outputs.data, 1)  # 가장 큰 값을 갖는 class index 가 모델이 추론한 정답
        total_cnt += targets.size(0)
        correct_cnt += (predicted == targets).sum()  # 정답과 추론 값이 일치하는 경우 정답으로 count

    print('Model Accuracy: {:.2f} %'.format(100 * correct_cnt / total_cnt))
    model.train()  # 평가가 모두 완료되었으므로 다시 학습 모드로 전환

# Model Checkpoint 저장
torch.save(model.state_dict(), 'mnist_dnn_model.pth')

결론

이번 포스팅에선 지도학습을 위한 최소한의 학습기 구성 요소를 활용해, 간단한 Basic-Trainer 를 작성하였습니다.

아무리 복잡해보이는 Trainer 라도 지도학습을 위한 학습기는 기본적으로 위와 같은 요소들로 구성되어있기 때문에, 전체 학습기의 구조를 이해하고 코드를 해석하는것이 이에 대한 이해 없이 바로 코드부터 들여다 보는것보다 효율적일 것으로 생각됩니다.

다음 포스팅에선 위의 Basic-Trainer 를 바탕으로 학습 및 평가의 편의성을 향상시킨 학습기를 작성해보도록 하겠습니다.

Reference

Object-Detection 을 위한 Image Augmentation

Thu, 10 Sep 2020 00:00:00 +0000

개요

인공지능의 학습을 위한 데이터가 부족할 때, 우리는 적절한 전처리를 통해 학습 데이터를 증가하곤 합니다. 이러한 과정을 Data Augmentation 이라고 하며, 사진(Image) 데이터의 경우 Augmentation 을 위한 많은 방법들이 알려져 있습니다.

하지만 객체 인식(Object-Detection)을 위한 Image Augmentation 의 경우, 단순히 알려진 방법으로 이미지 데이터만을 증가시킬 경우, 증가된 이미지에 해당되는 객체 영역(Bounding Box)에 대한 정보를 다시 잡아줘야 하는 문제가 발생합니다. 이는 굉장히 수고스러운 일이기에, 이미지에 포함된 객체 정보 역시 함께 증가를 할 필요가 있습니다.

이번 포스팅에서는 일반적인 Image Augmentation 방법들에 따른 Bounding Box 값의 연산에 대해 알아보고자 합니다.

Image Augmentation

Bounding Box 를 포함한 Augmentation 을 하려면 이미지 좌표에 대해 먼저 정의를 할 필요가 있습니다. 객체인식 학습 데이터를 위한 이미지 라벨링 툴 LabelImg 의 픽셀 좌표 연산 방식을 따라 좌표계를 정의하도록 하겠습니다.

이미지의 경우 좌상단의 꼭지점을 원점(0, 0)으로 보고 오른쪽 가로 축으로 +x, 아래쪽 세로 축으로 +y 를 잡습니다. 따라서 가로×세로 = 400×300 픽셀인 이미지라면, 이미지의 좌상단이 (0,0), 우상단은 (400,0), 좌하단 (0,300), 우하단 (400,300) 으로 좌표가 세팅 됩니다.

Bounding Box 의 좌표 역시 위와 같은 좌표 표기법을 사용하며 Box 의 좌상단과 우하단 좌표를 기록해 Box 의 위치를 특정합니다.

(y_min, x_min) = (a, b), (y_max, x_max) = (c, d)

이러한 좌표 연산을 통해 Image 와 Bounding Box 를 함께 증가해 보겠습니다.

(이미지의 밝기, 대비, 색 필터를 변환하는 방식은 Box의 좌표가 변하지 않아 기존의 Augmentation 만을 활용해도 무방하므로 이번 포스팅에서는 다루지 않겠습니다 )

1. Resize

가장 일반적인 Augmentation 방법으로 이미지의 크기를 변환하는 방식입니다. 이미지 사이즈의 증감 비율을 R 이라고 했을 때,

resize_height = original_height * R
resize_width = original_width * R

로 계산 가능하고, Bounding Box 역시

resize_x_min = original_x_min * R
resize_y_min = original_y_min * R
resize_x_max = original_x_max * R
resize_y_max = original_y_max * R

로 계산 가능합니다.

2. 좌우반전

반전의 경우, 이미지의 크기는 변화하지 않기 때문에 이미지의 height & width 는 동일하게 유지 됩니다.

Bounding Box 의 좌표는

# 상하 좌표에는 영향을 주지 않으므로 y_min, y_max 는 동일
fliped_x_min = width - original_x_min
fliped_x_max = width - original_x_max

가 됩니다. (상하 반전은 x가 고정되고, y 좌표에 대해 fliped_y = height - original_y)

3. 이미지 회전

Object-Detection 용 이미지 증가에 가장 복잡한 계산을 필요로 하는 Augmentation 방법입니다. 이 포스팅을 작성하기로 생각한 핵심 이유이기도 합니다.

이미지를 회전하는경우, 레터박스 같은 영역이 생기며 이미지 전체 사이즈가 커지게 됩니다. 이에 의해 전체 좌표 역시 바뀌게 됩니다.

회전된 모서리마다 빈 영역이 생김

원본 이미지 크기 = (w, h) 에서,

이러한 좌표 변환에 대응하기 위해 이미지의 중앙(기존 ($\frac{w}{2}$, $\frac{h}{2}$) 지점)을 원점 (0, 0)으로 하고 좌표를 다시 쓰면,

→ 좌상단($-\frac{w}{2}$, $\frac{h}{2}$), 우상단($\frac{w}{2}$, $\frac{h}{2}$), 좌하단($-\frac{w}{2}$, $-\frac{h}{2}$), 우하단($\frac{w}{2}$, $-\frac{h}{2}$)

또한 Bounding Box의 각 모서리 좌표를 P1 ~ P4 로 아래 그림과 같이 할당하면, 이미지 중앙을 기준으로 좌표를 다시 쓸 수 있습니다.

P1 = ($b-\frac{w}{2}$, $\frac{h}{2}-a$)

P2 = ($b-\frac{w}{2}$, $\frac{h}{2}-c$)

P3 = ($d-\frac{w}{2}$, $\frac{h}{2}-a$)

P4 = ($d-\frac{w}{2}$, $\frac{h}{2}-c$)

이제 회전된 이미지에 대한 좌표를 계산해보도록 하겠습니다. (너무 큰 각도의 회전은 학습에 방해가 되므로 ±5 도 이내의 각도로만 회전하는것을 상정합니다)

2차원 좌표 평면에서 점 (X , Y)를 원점(0, 0)을 중심으로 θ 만큼 회전 하였을 때, 변경된 좌표는

(Xcosθ - Ysinθ , Xsinθ + Ycosθ) 로 표기됩니다.

따라서, 회전된 이미지의 크기 (rw, rh) = (w×cosθ - h×sinθ , w×sinθ + h×cosθ) 이고,

마찬가지로 회전된 Bounding Box 의 좌표 P1’ , P2’ , P3’ , P4’ 역시 구할 수 있습니다.

이제 변환된 Box의 좌표로부터 다시 이미지의 좌상단을 원점으로 하는 박스의 x_min, y_min, x_max, y_max 를 구할 차례입니다. 이때, 회전한 각도의 ± 부호에 따라 min, max 값을 추출하는 좌표가 달라집니다.

반시계 방향의 경우 (-) 각도, 시계 방향의 경우 (+) 각도로 회전

이러한 일련의 과정을 Python 코드로 나타내면 다음과 같습니다.

import random
import numpy as np

def rotate_xyminmax(width, height, xmin, ymin, xmax, ymax):
    # (width/2, height/2)를 중심으로 degree 회전
    # ±5도 이내의 각도에서 랜덤하게 degree 지정
    degree = (random.random() - 0.5) * 10
    radian = degree / 180 * np.pi  # radian 으로 변환

    # 회전하여 확장된 이미지 영역 re_width, re_height
    # 픽셀 좌표는 정수형만 가능하므로 int로 자료형을 변환
    re_width = int(width * np.cos(radian) - height * np.sin(radian))
    re_height = int(height * np.cos(radian) + width * np.sin(radian))

    # Bounding Box 좌상단을 첫번째 점으로 두고, 반시계방향으로 Box Point 4개를 지정
    point = [(xmin - width / 2, height / 2 - ymin),  # P1
             (xmin - width / 2, height / 2 - ymax),  # P2
             (xmax - width / 2, height / 2 - ymax),  # P3
             (xmax - width / 2, height / 2 - ymin)]  # P4

    # 회전된 Box 의 좌표(P1', P2', P3', P4') 연산
    rotation_point = []
    for p in point:
        x, y = p
        rx = x * np.cos(radian) - y * np.sin(radian)
        ry = y * np.cos(radian) + x * np.sin(radian)
        rotation_point.append((rx, ry))

    # 좌표 변환 후, Image Range를 벗어나지 않도록 if 문으로 예외처리
    if degree >= 0:  # 시계방향 회전
        # Image Range를 벗어나지 않도록 if 문으로 예외처리
        re_xmin = int(rotation_point[0][0] + re_width / 2)  # P1'의 x좌표
        if re_xmin <= 0:
            re_xmin = 0
        re_ymin = int(re_height / 2 - rotation_point[3][1])  # P4'의 y좌표
        if re_ymin <= 0:
            re_ymin = 0
        re_xmax = int(rotation_point[2][0] + re_width / 2)  # P3'의 x좌표
        if re_xmax >= re_width:
            re_xmax = re_width
        re_ymax = int(re_height / 2 - rotation_point[1][1])  # P2'의 y좌표
        if re_ymax >= re_height:
            re_ymax = re_height

    else:  # 반시계방향 회전
        # Image Range를 벗어나지 않도록 if 문으로 예외처리
        re_xmin = int(rotation_point[1][0] + re_width / 2)  # P2'의 x좌표
        if re_xmin <= 0:
            re_xmin = 0
        re_ymin = int(re_height / 2 - rotation_point[0][1])  # P1'의 y좌표
        if re_ymin <= 0:
            re_ymin = 0
        re_xmax = int(rotation_point[3][0] + re_width / 2)  # P4'의 x좌표
        if re_xmax >= re_width:
            re_xmax = re_width
        re_ymax = int(re_height / 2 - rotation_point[2][1])  # P3'의 y좌표
        if re_ymax >= re_height:
            re_ymax = re_height

    return degree, re_xmin, re_ymin, re_xmax, re_ymax

마무리

지금까지 Object-Detection 을 위한 Image Augmentation 방법에 대해 알아보았습니다. 포스팅의 주요 전달 내용이 Bounding Box 정보를 포함한 Data Augmentation 이라서 이미지의 밝기, 대비, 색 필터를 변환하는 방식의 Augmentation 은 다루지 않았지만, 해당 방법들과 위의 방법들을 조합해 다양한 방식의 Data Augmentation 을 시도 해 볼 수 있습니다. 적절한 데이터 증가 방법을 활용하여 적은 데이터로도 인공지능 학습 정확도를 향상 시키는데 도움이 되길 기대합니다.

왜 기술블로그를 유지할까?

Mon, 10 Aug 2020 00:00:00 +0000

백만년만

너드팩토리 기술블로그의 마지막 포스트 업데이트는 작년 12월 이었습니다. 해가 넘어간 지도 반년이 넘었네요! 첫 포스트 이후로 대략 1년이 유지되었습니다. 죽은 사람이 숨을 쉬지 않듯 너드팩토리의 블로그는 그렇게 가사상태를 보내고 다시 숨을 쉽니다. 포스트 업데이트가 없었던 지난 반년동안 너드팩토리에 많은 변화와 고민이 있었습니다. 본 포스트에서는 그 중 기술블로그에 대한 고민을 풀어보고자 합니다.

블로그?

weBLOG

익히 알려졌듯이 블로그의 어원은 web + log 로써 사전적으로 웹에 남기는 기록이라는 뜻이 됩니다. 또한 이러한 합성어의 유래는 개인이 알리고자 하는 바를 웹에 업로드하는 일기(log) 로써 상당히 개인적인 동기에 의한 웹사이트 입니다. 위키피디아에 의하면 최초의 블로그는 게임 제작자 이자 영화 제작자인 Justin Hall 이 작성한 온라인 일기 라고 합니다. 이후 블로그가 대중화 되면서 신문사에 준하는 뉴스를 제공하는 블로그가 탄생하고, 대형 포탈에서 플랫폼 형태의 블로그를 제공하는 등 다양한 형태로 변모하게 되었습니다.

개발자의 블로그

개발자는 특성 상 생산하는 결과물 (코드) 를 종이에 기록하기 매우 까다롭습니다. (도움이 전혀 되지 않는다는 의미는 아닙니다.) 그렇기에 개발자들은 본인의 학습 결과 등을 블로그에 기록하는 문화가 존재했습니다. 온라인에 차곡차곡 쌓인 이러한 포스트 들은 개발자들에게 상호 참고 및 도움을 주는 역할을 담당합니다. 이는 속한 조직과 분야를 뛰어넘어 개발자 들 간 상부상조의 문화가 되는 수준에 이르렀습니다. 개발자는 블로그를 통해 본인의 노하우를 공개하고 서로간의 피드백을 주고 받습니다. (물론 SNS 도 이러한 역할을 담당합니다.)

기업의 블로그

어원에서 알 수 있듯이 블로그의 기원은 극히 개인적은 동기에 의한 기록 입니다. 하지만 대중의 요구에 따라, 혹은 기발한 시도에 의해 다양한 형태의 블로그가 제시되었고 소비되고 있습니다. 기업이 블로그를 활용하게 된 계기 또한 이러한 대중의 수요에 의해 탄생했다고 볼 수 있습니다. 인터넷 사용이 대중화된 현대에 전통적인 매스미디어를 벗어나 저비용으로 기업의 아이덴티티를 제공하고 제품을 홍보할 수 있는 수단이 되었 던 것입니다. 이렇게 기업의 블로그는 다분히 상업적인 성격을 띄고 있습니다.

소프트웨어 기업의 블로그

흥한 소프트웨어 기업이 늘어나면서 소위 인하우스 개발자가 속한 기업 이 늘고 있습니다. 이러한 기업에서는 특별한 형태의 블로그가 등장하게 되는데 바로 기술에 대해 이야기 하는 블로그! 가 그것입니다. 이러한 블로그는 아래에 나열한 사항에 대해 중요한 의미를 지닌다고 생각합니다.

기술이 제품 수준을 견인한다.
뛰어난 인재의 관심을 유도한다.
기술을 공유하고 상호 발전한다.
뛰어난 기술이 제품 홍보에 도움이 된다.

너드팩토리 블로그의 의미

“너드팩토리는 우리의 이야기를 통해 기술 생태계가 더 나아지길 바라며 우리가 연구한 다양한 기술 이야기를 공유하고 있습니다.”

너드팩토리의 블로그의 목적 또한 소프트웨어 기업 블로그의 의미 상당히 계승하고 있습니다. 특히 너드팩토리의 기술이 기술 생태계에 미약하나마 기여하길 바라는 마음이 담겨 있습니다. (제품 홍보는 덤 ^^) 너드팩토리는 지난 6개월 간 조직의 기술연구를 지속하며 내실을 다지는 시간을 가졌습니다. 이를 통해 너드팩토리 기술이 사회에 공익적인 역할을 담당하고 기술생태계에 좋은 영향을 미치는 그날까지 달려보고자 합니다.

ICT 인턴십 수기

Fri, 20 Dec 2019 00:00:00 +0000

시작 그리고 시작

인턴으로 근무했던 4개월이 이렇게 빨리 지나갈 줄은 꿈에도 몰랐습니다. 시작 전에는 4개월이 길다고 느껴졌는데 지금은 4개월의 끝에 와서 저 자신의 부족한 점을 깨닫고 도약하기 위해 준비를 하고 있습니다. 다행인 점은 인턴으로 끝나는 것이 아닌 너드팩토리의 구성원들과 함께 할 수 있다는 점, 그리고 너드팩토리에서 도약을 할 수 있다는 점입니다.

너드팩토리의 문화

너드팩토리에서 저의 직무와 관련된 업무에 성실하게 임하면서 최신 기술, 디자인 패턴 등 꾸준히 공부하고 성장하려고 노력했습니다. 하지만 그보다 더 중요한 것은 너드팩토리만의 에자일한 문화를 경험했다는 것입니다.

에자일 모델을 적용하기 위한 너드팩토리만의 문화

에자일 방법론은 매우 빠르고 긴박하게 움직여야 하므로 빠른 의사소통과 대처 그리고 즉각적인 테스트가 중요합니다. 이를 위해서는 팀의 문화가 뒷받침되어야 합니다. 그래서 너드팩토리는 다음과 같은 문화를 가지고 있었습니다.

영어 호칭 + 님 ⇒ 수평적 의사소통
직무만 존재할 뿐 직급과 계급은 없다.
데일리 스크럼을 통한 업무 공유

위의 조건들로 다음과 같은 시너지가 발생했습니다.

회의나 스크럼을 통해 수평적 의사소통의 효과가 더욱 극대화됩니다. 구성원들은 저를 인턴으로 바라보는 것이 아닌 한 명의 개발자로 인식하고 회의에 참여하여 서로의 의견 및 지식을 공유하게 됩니다. 회의라는 것이 불편하고 답답한 분위기가 아닌 활기찬 분위기에서 진행이 되고 그에 따라 더욱더 창의적이고 다방면의 생각을 서로가 효과적으로 도출할 수 있는 환경이 조성되어 있습니다.
데일리 스크럼을 비롯하여 각종 회의나 일상에서도 서로의 업무를 공유하게 됩니다. 이때 서로의 업무를 빠르게 알고 협업을 좀 더 유기적으로 진행 할 수 있지만, 그보다 더 중요한 것은 자신의 업무를 공유함으로써 생기는 책임감입니다. 업무의 수준과 강도 등에서 구성원과 비교될 수 있는 상황은 자기계발을 이뤄질 수 있게 하는 동기부여가 됩니다.

이렇게 질 높은 문화를 유지하기 위해서는 구성원 전부가 자기계발을 꾸준히 해야 합니다. 팀의 문화와 회사의 문화가 실력이 있고 신뢰가 있는 사람을 만들고 있습니다.

즐거운 성장

너드팩토리의 문화를 경험하면서 학교에의 삶의 태도에 반성하게 되는 순간이 많았습니다. 단순히 게으르게 살았다기보다는 정확한 목표 없이 학부 과정만 이수하면서 흥미를 찾으려고 노력하지 않고 그냥 기계처럼 할당된 과제만 하는 것에 안주했었습니다. 자의적으로 무언가를 탐구하기보다는 성적을 잘 받기 위해라는 목적에 의해 교과목을 공부하고 프로젝트를 진행하였습니다. 제가 하는 프로그래밍적 지식을 넓히는 데는 재미있고 흥미로웠으나 무엇을 위해 배워야 하는지 목표가 없었습니다.

인턴십 기간은 학부 과정과는 다른 치열함이 있었고 대학에 있을 때 보다 훨씬 바쁜 시기를 보냈습니다. 당연히 처음에는 잘 해내고 싶다, 인정받고 싶다는 마음이 컸기에 제 능력을 초과해서 사용하기도 했고 새벽에 일어나서 프로젝트와 관련된 공부를 하고 출근하기도 했었습니다. 하루하루가 시험 전날과 같은 느낌이었습니다. 하지만 저 스스로가 발전시키는 프로젝트의 규모, 제품의 질이 높아질수록 너무나 즐거웠습니다. 물론 이러한 조직의 문화가 맞지 않는 사람들도 있겠지만 저는 다행히 너드팩토리의 문화가 좋았고 능동적이고 행복한 저 자신을 찾게 되어서 구성원과 문화에 감사했습니다.

인턴십 프로젝트

저는 웹 프론트엔드 직군으로 지원을 했었고 그에 따라 인턴 기간 동안 크게 두 가지의 프로젝트를 진행했습니다. 프로젝트는 전부 React 기반에서 작업을 했습니다.

우리아이 애플리케이션 웹 소개페이지 개발

개발 간 협업의 방식 그리고 겪은 문제와 해결할 수 있었던 방법들을 터득할 수 있었습니다. 그리고 반응형 디자인과 인터렉션, SVG 등 UI/UX에 대한 부분도 공부할 수 있었습니다.

재플린을 통한 디자인 공유

프론트엔드 영역은 디자이너와의 의사소통과 상호작용이 활발 해야 하고 즉각적인 피드백이 많이 이루어집니다. 노션앱에서도 그러한 의견이 코멘트 형식으로 자유롭게 전달되긴 하지만 디자인 협업 툴에서 더 극대화됩니다. 너드팩토리에서는 Zeplin이라는 프로그램을 이용하여 디자인을 공유하고 의견을 주고받습니다.

컴포넌트 스타일링의 중요성

React는 컴포넌트 기반으로 View를 구성합니다. 그에 따라 스타일링 역시 컴포넌트 기반으로 하게 됩니다. 소개페이지 특성상 재활용 되는 View가 많고 동적인 요소와 애니메이션들이 많이 들어가 있습니다. 이를 좀 더 쉽게 구현하기 위해 CSS in JS 라이브러리 중 Styled-Components를 사용하였습니다.

사실 숙련된 개발자이거나 HTML과 CSS를 순서대로 학습했다면 의심 없이 순수한 CSS를 사용했을 수도 있습니다. 하지만 저는 이전에 Vue.js 라는 프레임워크로 웹을 처음 접했고 Vue의 스타일링 방식이 어느 정도 state에 따라 스타일 바인딩이 가능했었다는 점입니다. 그렇기에 React에서 순수 css를 적용하는 것이 나빠 보일 수밖에 없었습니다.

순수 CSS만을 사용했을때의 문제점

우선 state에 따른 css의 동적인 UI를 구성하려고 할 때 기존의 프로그래밍적 사고방식으로는 해결하기가 힘든 점이 있었습니다. 그렇기에 인라인 스타일 형식으로 조건부 스타일링을 구현하거나 여러 개의 클래스를 선언하고 state에 따라 매핑 시켜야 한다는 문제가 있었습니다. 그래서 제가 생각한 문제는 다음과 같습니다.

state 값에 따라 스타일을 바인딩 해야 하는 경우
props가 많아지고 그에 따른 조건부 스타일링도 많아질 때
거의 같은 형태의 스타일링을 가지고 있으나 일부분만 변경하여 새로운 컴포넌트를 만들어야 할 때
같은 스타일을 가지고 있는 다른 선택자의 경우
색상 값과 같은 반복되는 키워드가 존재할 때

그래서 선택한 Styled-Component 라이브러리

물론 Sass 혹은 Less를 사용하여 위의 문제들을 해결할 수 있습니다. 프로그래밍적 동작 방식을 지원하지만, 여전히 CSS 클래스를 사용하고 있다는 점 네이밍을 고려한 개발을 해야 한다는 점 등 여러 가지 귀찮은 점들이 있었습니다. 그래서 CSS in JS 중 대표적인 Styled-Component 라이브러리를 사용하였습니다. 자세한 내용은 너드팩토리 기술 블로그에 있으니 참고하시기 바랍니다.

AIVORY 관리자페이지 개발

아키텍처의 필요성과 버전 관리의 중요성을 알 수 있었습니다.

버전관리

너드팩토리는 크게 스프린트 단위로 버전 관리를 하고 있습니다. 버전에 대한 목표나 정책은 스프린트를 계획할 때 확립하고 버그에 대한 반영 버전은 마이너 픽스로 반영을 하고 있습니다. 너드팩토리는 코드 버전 관리를 GitLab의 원격저장소를 활용하고 있습니다. 대학에 있을 때 역시 과제나 프로젝트 관리를 GitLab을 이용했기 때문에 인터페이스를 다루는 데 있어서 어려움은 없었습니다.

마일스톤을 통한 버전 관리

이슈 리스트

github보다 버전관리와 이슈트래킹이 좀 더 세분되어있고 GUI 역시 더 이쁩니다 . 다만 서버 상태가 불안정하고 가끔 503 에러가 떠서 당황할 때가 있었습니다. 이슈에 대한 브랜치를 생성하여 작업이 완료되면 Merge를 하는 형식입니다.

Merge request 리뷰

위와 같이 MR을 하였을 때 MR 담당자와 코드리뷰를 진행하고 있습니다.

SourceTree

그리고 저는 GitBash을 사용하지 않고 소스트리를 이용하여 git을 관리하고 있습니다. GUI를 사용하고 명령어를 콘솔에서 일일이 계속 입력할 필요가 없어서 좋습니다. 오히려 더 직관적이라 브랜치를 빠르게 넘나들면서 이슈를 관리하고 있습니다.

디자인패턴에 적합한 리팩토링

AIVORY 관리자페이지는 Flux 패턴에 따라 state들을 관리하고 있습니다. 인계를 받을 당시 디자인 패턴에 따르지 않는 여러 문제가 있었고 현재는 그것들을 해결하기 위해 리팩토링을 하고 있습니다.

기존 코드에서는 View 영역에 집중된 Axios 기반 비동기 API 로직들이 존재했습니다. 인턴 기간에 AIVORY GS인증을 위해 에러 검출 및 테스트를 진행하였는데 이때 에러를 찾는 과정이 조금 힘들었습니다. Flux의 단방향 데이터 흐름의 이점을 전혀 살리지 못한 구조였습니다. 그래서 현재는 데이터 변화와 흐름을 예측할 수 있도록 리팩토링을 진행하고 있습니다.

생기는 이슈들
- 에러 메세지 중복 팝업
- 컴포넌트 리랜더링
- 기타…

마치며..

인턴 기간 모르는 게 많아 구성원분들을 많이 괴롭혔습니다. 제가 모르는 부분에 대해 같이 고민해 주시고 길을 알려주시는 모습에 매우 감사했습니다. 그러한 너드팩토리의 구성원들과 앞으로 함께할 수 있어 기쁘고 고객이 행복한 제품 그리고 내가 행복한 제품 만들기 위해 노력하겠습니다.

ICT 인턴십 수기

Fri, 20 Dec 2019 00:00:00 +0000

인턴십 기간동안 내가 경험한 것들

안녕하세요~! 너드팩토리에서 PO(Product Owner) 어시를 맡고있는 데이지입니다.😎 제가 ict 인턴십을 통해 너드팩토리에서 4개월 조금 안되는 기간동안 한 경험을 소개해드릴게요! 너드팩토리의 문화에 관심이 있거나 궁금하신 분들이 읽으시면 좋을 것 같습니다.

간단한 소개 입사 초반에 저는 너드팩토리에서 기획, 마케팅 직무를 맡게 되었습니다. 컴퓨터 공학을 전공했지만 기획직군의 일을 경험해보고 싶어서 선택한 일이었죠. 일을 하다보니 영역이 확장되어 PO도 하게 되었습니다.

🗣 데일리 스크럼을 통한 의사소통 방식

첫 출근한 날, 오전에 애자일 방법론과 데일리 스크럼에 대한 설명을 들었습니다. 데일리 스크럼이란 '날마다 하는 짧은 회의'로 매일 현재상태를 업데이트하고 조율하는 것을 말합니다.

기획직군의 경험이 전무하고 무엇을 해야 할지도 명확하지 않았기 때문에
저는 매일 아침 스크럼때 어떤 말을 해야할지 항상 고민이 많았습니다. 솔직히 말하면 스트레스 였습니다.

하지만 해야할 일을 찾고 구체적인 계획을 세우고나니 내가 하는 일과 관련된 구성원들과 소통할 수 있게 되고 소통을 통해 더 나은 제품을 만들 수 있는 환경이 형성되었습니다.

이 과정에서 계획의 중요성을 알게 되었고 내가 맡은 일에 대한 책임감을 갖게 되었습니다. 일의 진행을 한 눈에 확인하고 조율할 수 있어서 PO뿐 아니라 구성원 모두에게 좋은 제도라고 생각합니다.

🤓 능동적인 업무 환경

인생의 대부분을 수동적으로 살아온 저에게 능동적인 업무 환경은 낯설었지만 저의 직무인 기획, 마케터에 대해 공부를 하여 점차 일을 만들어갔습니다.

초반에는 갈피를 잡지 못해 주어진 일만 했지만 ‘서당개 3년이면 풍월을 읊는다’고 (아직 그 정도는 아니지만) 스스로 일을 찾아서 하고 있습니다.

능동적으로 업무를 계획하고 이루어가는 과정에서 성취감을 느꼈고 자존감도 상승했습니다.

평소 계획을 잘 세우지 않고 ‘무계획이 계획’이라고 여기던 저의 가치관에 변화를 준 아주 좋은 경험이었습니다. 이런 능동적인 자세는 앞으로 무슨 일을 하더라도 필요한 부분이라고 생각합니다.

업무 중에 구성원들과 급하게 상의해야할 일이 생기면 양해를 구하고 벙개를 요청하거나 데일리 스크럼 시간에 회의목적을 밝히고 회의를 요청하며 자유롭게 제품을 위한 이야기를 할 수 있습니다. 이러한 제도가 좋은 제품을 생산하는 바탕이 되어주는 것 같습니다.

👩‍🔧 실무 경험

저는 비전공 편입생입니다. 전적대학교에서는 입시 성적에 맞춰 제약공학과를 들어갔고 제약공학, 화학 등을 시작으로 실험과목이 정말 많았습니다. 2학년 한학기동안 하기 싫은 실험수업을 하고 있던 중 제약회사 견학을 갔을 때 저는 깨달았습니다.

‘내가 이 전공을 살려서 취업을 하면 오래 버티지 못하고 포기할 것이다’라는 것을. 그때 편입을 결심하고 컴퓨터 공학과로 편입했습니다.

편입을 한 계기는 코드 몇 줄로 인해 다양한 변화를 줄 수 있다는 점이 흥미로웠고 새로운 것을 배우는게 즐거워서 입니다. 하지만 심화과정을 배우는 3학년들과 함께 수업을 듣다보니 ‘내가 이곳을 졸업하면 무엇을 해야하지? 실제로 회사에서는 어떤 일들을 할까? 학교에서 배우는 것과 차이가 큰가? 등의 다양한 생각과 고민들을 하던 중 좋은 기회로 ict인턴십 제도를 통해 너드팩토리에서 실무경험을 할 기회를 얻게 되었습니다.

제가 실무경험을 통해 느낀점은 다음과 같습니다. 제품을 만드는 것은 '여러가지의 부품을 가지고 하나의 결과물을 창조하는 것이다.'라고 생각합니다.

제가 설계한 설계안을 가지고 회의를 진행하고 디자이너가 디자인을 하고 디자인 회의를 진행하고 디자인을 보면서 개발을 진행하고 이슈가 생기면 설계자, 디자이너, 개발자 모두 모여 회의를 진행하는 방식으로 업무를 진행했습니다. 위처럼 모든 직군의 사람들이 모든 직군의 사람들이 한 제품을 가지고 업무를 진행합니다.

기획 - 디자인 - 개발 - 기획 - 개발 - 디자인 - 개발(애자일) 또 중간중간 회의들… 다양한 사람들과 기술, 노력의 화합으로 하나의 제품을 만들어본 것과 그 화합의 과정을 직접 경험했다는 것이 가장 뜻깊은 경험이었습니다.

😯🤫 구성원들과 의사소통 하는 법

너드팩토리에서는 영어호칭을 사용합니다. 처음에는 영어호칭을 사용하기가 다소 민망😊 했지만 계속 사용하다보니 편하게 구성원들과 이야기 할 수 있어 오히려 더 좋았습니다!

그리고 메터모스트를 통해 업무에 관한 내용, 벙개 소집 그리고 ~~말장난~~을 하며 소통하는 방식이 정말 편리하고 트렌디하다고 느껴졌습니다. 상사에게 보고하지 않고 회의가 필요할때 언제든지 양해를 구하고 회의를 진행할 수 있고, 인터넷 상으로 간편하게 의견을 물을 수 있습니다.

🚪 끝으로

너드팩토리를 세마디로 요약해 보았습니다.

기회가 된다면 꼭 한번 경험해 보기를 추천!
최고의 조직 문화
트렌디한 의사소통 방식과 구성원들

2019 패밀리데이

Wed, 18 Dec 2019 00:00:00 +0000

배경

너드팩토리는 독특한 이름을 가지고 있습니다. 특히 가족분들은 ‘너드’라는 단어가 생소하고 그 뜻이 이해하기 힘든 난해함을 가지고 있어 구성원들이 우리를 가족들에게 소개하기 어렵다는 문제를 토로해왔습니다. 사실 가족이란 구성원 개인 삶의 원동력인 만큼 너드팩토리는 이 문제가 그냥 지나칠 문제가 아니라고 생각하고 어떻게 이 문제를 해결할 수 있을지 고민했습니다. 사실 어떤 솔루션이 제시되어도 결국 ‘백문이불여일견’이라는 것에 모두가 동의하고 2019년 송년회는 가족과 함께 우리를 보여주자는 이야기에 모두 동의했습니다.

패밀리 데이

사실 갑자기 추진하려다 보니 난제도 많았습니다. 여러 행사와 모임이 있는 연말까지 늦출 수는 없어 이야기가 나온 바로 일주일 뒤에 진행하기로 했고, PT준비부터 다과, 현수막 준비 등 많은 걸 보여드리고 더 풍성한 내용으로 차리고 싶었던 저희의 마음은 급해지기만 했습니다. 다행스럽게도 1층 아로파홀이 연말 준비를 위해 크리스마스 느낌을 내고 있어 우리는 우리 본연의 모습을 보여드리는 것에 집중하고 지금부터 할 수 있는 것에 집중하여 잘 준비하는 것을 목표로 했습니다.

행사 당일이 되자 떨림과 설렘은 모두 발표자인 제 몫이었고 구성원들은 한껏 들뜬 마음으로 가족들과 연락을 주고 받으며 마지막 준비에 박차를 가했습니다. 가족들의 위치를 묻고, 언제 오는지 연락하며 기대하는 구성원들의 표정을 보며 잘 해야한다는 부담감과 압박감도 느꼈지만 어차피 이렇게 된 것 즐기자는 마음가짐으로 조금씩 부담을 즐기기 시작했습니다.

발표 직전 생각보다 많은 가족분들이 회사에 들어오시자 회사 임원분들도 긴장되었는지 행사 세션을 시작 직전까지 저희 행사 내용들을 검토하시기도 했습니다. 어렵게 모신 귀한 분들이 제대로 된 행사처럼 느껴지게 준비하지 않았다는 핀잔과 함께 시작한 행사에서 30~40분 가량 준비된 발표로 우리를 전부 보여드릴 수는 없겠지만 조직이 어떤 마음인지 조금이라도 전달할 수 있지 않을까라는 생각으로 본격적인 행사를 시작했습니다.

발표는 새로 합류할 예정인 분들의 가족 분들까지 모시고 시작되었고, 돌도 안된 1살짜리 아이부터 50~60대 부모님들까지 참석하셔서 자리를 빛내주셨습니다. 개인적으로 제법 다양한 발표 자리에 서봤는데 연령층이 이렇게나 다양한 발표는 처음이었습니다. 아니나 다를까 준비해둔 개그 코드는 하나도 먹히지 않고 분위기도 냉랭했었는데 그래도 타깃한 연령대에 속하신 분들은 웃어주셔서 다행이라고 생각했습니다.

그렇게 준비된 발표가 끝나고 사무실을 구경하며 둘러보실 수 있는 투어가 시작되었습니다. 직접 눈으로 우리 가족이 일하는 사무실을 마주하시자 새롭고 신선한 충격을 받으신 것 같았습니다. 워낙 자유로운 느낌의 회사가 신기하다고 여기시는 분부터 아늑하다는 분까지 다양한 감상평을 남겨주셨습니다.

회고

투어를 모두 마치고 원래 가족분들과의 시간을 위해 조기 퇴근을 계획했는데 회사에서 식사라도 대접하고 싶다는 마음에 잠시 기다림의 시간을 갖게 되었습니다. 아무래도 같이 식사하는 것은 불편하니 식사권이라도 드리자는 의미였는데 너무 갑작스러워 준비가 덜 되어 있는 상황에서 경영지원실의 도움을 받아 여기저기 전화로 알아보느라 시간이 지체되었습니다. 그동안 아무 말이라도 하며 지루하지 않게 해드린다는게 아무 말 대잔치가 되어버려 회고 글을 쓰는 지금도 얼굴이 붉어집니다.

그래도 가족분들의 미소와 손 잡고 응원한다며 내년에도 초대해달라는 멋진 말씀을 들으며 이번 행사 준비하길 정말 잘했다고 혼자 굉장히 뿌듯해 했습니다. 저 뿐만 아니라 너드팩토리의 구성원 모두 즐거움이 가득했으리라 믿으며, 행사 당일 스냅 사진과 하이라이트 영상 방출합니다. (사진과 영상 촬영해준 데이지님, 도로시님 감사드리며 영상은 제일 밑에 있습니다!)

원본 사진 다운로드

Styled-Components를 이용한 React 컴포넌트 스타일링

Fri, 25 Oct 2019 00:00:00 +0000

Overview

‘우리아이’ 소개페이지를 개발하면서 경험했던 컴포넌트 스타일링 방법과 그 중 React 기반의 ‘CSS-in-JS’ 방식 중 하나인 Styled-Components 라이브러리를 소개하려고 합니다. 그중 조건부 스타일링을 하는 방법으로 기존의 순수 CSS가 어떤 문제를 가졌는지 파악하고 개선하려는 방법으로 Styled-Components 라이브러리는 어떠한 방식으로 작동하는지 코드를 통해서 알아보겠습니다. 개발은 React 환경에서 진행되었습니다.

순수 CSS의 조건부 스타일링

다음은 Dropdown 버튼을 눌렀을 때 하단으로 Link 메뉴가 등장하는 화면입니다.

인라인 형식

const DropdownContent = ({ show }) => (
  <div
    className={
      show ? "dropdown-content  dropdown-content-visible" : "dropdown-content"
    }
  >
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
);

const App = () => {
  const [dropdownVisible, setDropdownVisible] = useState(false);

  const toggleDropdown = () => {
    setDropdownVisible(!dropdownVisible);
  };
  return (
    <>
      <div className="dropdown">
        <button className="dropbtn" onClick={toggleDropdown}>
          Dropdown
        </button>
        <DropdownContent show={dropdownVisible} />
      </div>
    </>
  );
};

CSS 클래스 명을 활용한 조건부 스타일링

const App = () => {
  const [dropdownVisible, setDropdownVisible] = useState(false);

  const toggleDropdown = () => {
    setDropdownVisible(!dropdownVisible);
  };
  return (
    <>
      <div className="dropdown">
        <button className="dropbtn" onClick={toggleDropdown}>
          Dropdown
        </button>
        <div
          className="dropdown-content"
          style=
        >
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </>
  );
};

문제점

가장 대표적인 방법 두 가지를 이용하여 순수 CSS에서 state 변화에 따른 조건부 스타일링은 어떤 방식으로 하는지 보았습니다. 여기서 생기는 문제점은 다음과 같습니다.

state 값에 따라 스타일을 바인딩 해야 하는 경우
props가 많아지고 그에 따른 조건부 스타일링도 많아질 때
거의 같은 형태의 스타일링을 가지고 있으나 일부분만 변경하여 새로운 컴포넌트를 만들어야 할 때
같은 스타일을 가지고 있는 다른 선택자의 경우
색상 값과 같은 반복되는 키워드가 존재할 때

이러한 고질적인 CSS의 문제점 때문에 CSS 클래스가 많아 질 수도 있고 인라인 스타일링 길이가 길어질 수도 있습니다.

CSS 전처리기 - Sass

CSS의 언어적 특성과 위의 불편함을 해결하기 위해 중첩, 변수, 믹스인, 확장 및 로직을 스타일시트에 구현한 전처리 엔진 형태의 Sass, Less와 같은 CSS 전처리기가 등장했습니다.

Sass의 효율적인 CSS 구조 설계

사실 순수 CSS에서 태그 혹은 @import 를 사용해서 CSS 파일을 구조화 할 수는 있습니다. 다만 각 CSS 파일 호출이 매번 새로운 HTTP 요청을 발생시키고 성능저하의 원인이 될 수도 있습니다. 그러나 Sass의 @import는 개발 환경에서 많은 CSS 파일이 복잡하게 얽혀있더라도 하나의 스타일시트로 컴파일이 됩니다. 즉 HTTP 요청에 의한 성능 이슈를 해결하였습니다.
결과적으로 CSS의 구조화가 가능해짐에 따라 스타일시트를 한눈에 파악하기 쉬워졌습니다. 협업 관계에서도 스타일시트 구조를 논리적으로 파악할 수 있게 도와줄 수 있습니다.

다음은 Sass를 이용한 스타일시트 구조 트리의 일부분입니다.

│  _bootstrap.scss
│  _custom.scss
│  _reset.scss
│  __core.scss
│  __pages.scss
│  __variables.scss
│
├─core
│  │  _animations.scss
│  │  _components.scss
│  │  _forms.scss
│  │  _mixins.scss
│  │  _utilities.scss
│  │
│  ├─animations
│  │      _animations.scss
│  │      _base.scss
│  │      _bubbles.scss
│  │      _floating.scss
│  │
│  ├─components
│  │      _collapse.scss
│  │      _lists.scss
│  │      _nav.scss
│  │      _navbar.scss
│  │
│  ├─forms
│  │      _buttons.scss
│  │      _checkbox.scss
│  │      _form.scss
│  │      _inputs.scss
│  │
│  ├─mixins
│  │      _animations.scss
│  │      _arrow-variant.scss
│  │      _buttons-variant.scss
│  │      _devices.scss
│  │      _font-awesome.scss
│  │      _icons-variant.scss
│  │      _keyframes.scss
│  │      _patterns.scss
│  │      _position.scss
│  │      _sections.scss
│  │      _shapes.scss
│  │
│  └─utilities
│          _background.scss
│          _border.scss
│          _brands.scss
│          _curve-svg-background.scss
│          _devices.scss
│          _gradients.scss
│          _icons.scss
│          _links.scss
│          _misc.scss
│          _mockup.scss
│          _overlay.scss
│          _position.scss
│          _responsive.scss
│          _shapes.scss
│          _spacing.scss
│          _speech-bubble.scss
│          _text.scss
│          _type.scss

기타 기능적인 부분은 Styled-Components에서도 지원하기 때문에 Sass를 사용했을 때 문제점만 언급하고 넘어가겠습니다.

문제점

그렇다 하더라도 다음과 같은 문제가 있습니다.

정해진 가이드가 없으면 구조가 복잡해진다.
CSS 클래스 명에 대한 고민은 여전하다.
스크롤 지옥도 여전하다
여전히 CSS 클래스로 조건부 스타일링을 하고 있다.

실제로 CSS 전처리기를 사용하더라도 CSS의 난해함을 정리하기에는 부족합니다. 이것은 CSS 자체의 문제이기도 합니다. CSS는 변수도 없고, 루프문과 함수사용이 불가합니다. 그런데 요소를 쓰던, 클래스나 id를 쓰던 아니면 그 어떤 선택자를 쓰던 다 받아주는 관대함도 있습니다.
물론 BEM과 같은 CSS 클래스 명을 정의하는 방법론 등이 있지만, 언어 레벨에서 느끼는 불편함은 사라지지 않습니다.

Styled-Components

Styled-Components는 위의 문제를 해결하려는 방법들 중 하나이며 Tagged 템플릿 리터럴을 이용해 스타일 정보를 실제 CSS 코드를 사용하여 자바스크립트 파일 안에 스타일을 선언하는 ‘CSS-in-JS’ 방식 중 하나입니다. (인라인 방식과는 다릅니다.) 컴포넌트와 스타일 간의 매핑을 제거하고 SASS나 LESS와 같은 전처리기가 제공하는 프로그래밍적 동작 방식도 제공합니다.

라이브러리 설치

yarn add styled-components

Basic

더 이상 HTML 요소에 스타일을 입힐 필요도, 클래스 명과 HTML 요소를 기반으로 컴포넌트를 만들 필요가 없습니다.

순수 CSS

Styled-Components

위의 두 방식을 비교해 보면 그다지 차이가 없다고 느낄 수도 있지만 일단 Styled-Components를 사용했을 때 CSS 클래스를 사용하지 않는다는 것을 중요시 봐야합니다.
우선 CSS는 구조와 스타일을 분리하려는 방법입니다. 그 구조와 연결고리를 하는 역할인 클래스 계층을 없애 버리는 방식은 처음 접하는 입장에서는 직관적인 방법이 아니라고 생각이 들 수 있습니다. 그렇지만 스타일과 구조의 분리가 오히려 복잡도의 증가를 일으킬 수 있습니다. 그러나 Styled-Components는 이러한 문제를 자바스크립트의 기능을 이용하여 해결하였습니다.

Code samples

Props를 통한 조건부 스타일링

styled-components를 import해서. js에서 스타일링 할 수 있습니다.
여러 개의 CSS 클래스를 사용하여 스타일을 적용하는 것처럼 props를 사용하여 특정 스타일을 부여해줄 수 있습니다.
& 문자를 사용하여 Sass처럼 자기 자신 선택이 가능합니다.

import React from "react";
import styled from "styled-components";

const Container = styled.div`
  background-color: lightgray;
  width: 100%;
  height: 100vh;
`;

const Button = styled.button`
  color: white;
  min-width: 120px;

  /* props로 넣어 준 값을 직접 전달해 줄 수 있습니다. */
  background-color: ${props => props.color || "blue"};

  /* & 문자를 사용하여 Sass 처럼 자기 자신 선택이 가능합니다. */
  &:hover {
    background-color: white;
    color: black;
  }
  & + button {
    margin-left: 1rem;
  }
`;

const App = () => {
  return (
    <Container>
      <Button>버튼1</Button>
      <Button color="red">버튼2</Button>
    </Container>
  );
};

export default App;

Global Style

body를 위해서 컴포넌트를 만들 필요가 없습니다.

    import React from "react";
    import styled, { createGlobalStyle } from "styled-components";

    const GlobalStyle = createGlobalStyle`
      body {
        margin: 50px;
        padding: 50px;
        background-color: black;
      }
    `;
    ...
    const App = () => {
      return (
        <Container>
          <GlobalStyle />
          <Button>버튼1</Button>
          <Button color="red">버튼2</Button>
        </Container>
      );
    };
    ...

혹은 전역으로 font-family를 다음과 같이 설정할수도 있습니다.

const GlobalStyles = createGlobalStyle`
      body {
        @import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
        font-family: "Noto Sans KR", sans-serif !important;
      }
    `;

Extension

컴포넌트를 재활용하면서 추가 html 태그를 부여하고 싶을 때 기존 컴포넌트를 확장해서 새로운 태그를 만들 수 있습니다. ex) 버튼을 앵커, 링크로 사용하고 싶을 때

    import React from "react";
    import styled, { createGlobalStyle } from "styled-components";
    ...
    const Button = styled.button`
      color: white;
      min-width: 120px;

      /* props로 넣어 준 값을 직접 전달해 줄 수 있습니다. */
      background-color: ${props => props.color || "blue"};

      /* & 문자를 사용하여 Sass 처럼 자기 자신 선택이 가능합니다. */
      &:hover {
        background-color: white;
        color: black;
      }
      & + button {
        margin-left: 1rem;
      }
    `;
    const Anchor = Button.withComponent("a");
    ...
    const App = () => {
      return (
        <Container>
          <GlobalStyle />
          <Button>버튼1</Button>
          <Button color="red">버튼2</Button>
    			<Anchor href="http://google.com">google</Anchor>
        </Container>
      );
    };
    ...

추가로 확장된 태그에 스타일링이 가능합니다.

const Anchor = styled(Button.withComponent("a"))`
  color: black;
`;

Animation

keyframes를 import 합니다. CSS3의 keyframes와 같은 기능입니다. 각 프레임의 스타일을 정의하는 것과 동일합니다.
props를 통해 rotateAni일 경우 animation CSS가 작동하도록 하였습니다.
역시 props를 통해 duration과 같은 속성값을 넘겨줄 수 있습니다.

    import React from "react";
    import styled, { createGlobalStyle, keyframes, css } from "styled-components";
    ...
    const rotation = keyframes`
      from{
        transform: rotate(0deg);
      }
      to{
        transform: rotate(360deg);
      }
    `;
    ...
    const Button = styled.button`
      color: white;
      min-width: 120px;

      /* props로 넣어 준 값을 직접 전달해 줄 수 있습니다. */
      background-color: ${props => props.color || "blue"};

      /* & 문자를 사용하여 Sass 처럼 자기 자신 선택이 가능합니다. */
      &:hover {
        background-color: white;
        color: black;
      }
      & + button {
        margin-left: 1rem;
      }

      ${props => {
        if (props.rotateAni) {
          return css`
            animation: ${rotation} ${props.duration}s linear infinite;
          `;
        }
      }}
    `;
    ...
    const App = () => {
      return (
        <Container>
          <GlobalStyle />
          <Button>버튼1</Button>
          <Button color="red" rotateAni duration={2}>
            버튼2
          </Button>
          <Anchor href="http://google.com">google</Anchor>
        </Container>
      );
    };

Extra Attributes

custom attribute를 부여하고 싶을 때 attrs 메소드를 사용합니다.

    import React from "react";
    import styled, { createGlobalStyle} from "styled-components";
    import resticon from '../../img2/common/restLeft.png';
    ...
    const RestIcon = styled.img.attrs({
      src: resticon,
    })`
      color: white;
      position: absolute;
      top: 37%;
      left: -7%;
      width: 41px;
      height: 33px;
    `;

    const App2 = () => {
      return (
        <Container>
          <GlobalStyle />
          <RestIcon />
        </Container>
      );
    };

Nesting

특정 부모 컴포넌트에서 자식 컴포넌트는 스타일 속성을 특정하게 부여받을 수 있습니다.

    const Card = styled.div`
      background-color:white;
    `
    ...
    const Container = styled.div`
      height: 100%;
      width: 100vh;
      background-color: yellow;
      ${Card}{
        background-color: blue;
      }
    `

Mixin and Group

CSS 그룹을 의미합니다.
다중 상속이 가능하므로 재사용 가능한 스타일들을 유연하게 사용할 수 있습니다.
CSS 키워드로 CSS 블록을 만들고 사용할 컨테이너에서 적용 가능하며 재사용 가능합니다.

const Sticky = css`
  position: fixed !important;
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.11);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.11);
  transition: all 0.6s ease-in-out;
  color: black;
`;
const Navigation = styled.nav`
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 1030;
  background-color: transparent;
  min-height: 70px;
  transition: all 0.3s ease 0s;
  display: flex;
  align-content: center;
  padding: 0;
  flex-flow: row nowrap;
  justify-content: flex-start;
  ${Sticky}
`;

아래와 같이 Mixin을 만들 수도 있습니다.
파라미터를 설정할 수 있고 실제 사용하는 컴포넌트에 따라 파라미터를 변경하면서 스타일을 간단하게 변경할 수 있습니다.
실제로 디자이너가 10개의 모양과 색상이 다른 원 모양의 디자인을 주문할 때 순수 CSS라면 많은 CSS 클래스를 만들어야 하지만 Mixin을 이용하면 간단하고 직관적으로 스타일을 할 수가 있습니다.

const RingVariant = (radius, stroke = "10") => css`
  position: absolute;
  border-radius: 50%;
  height: ${radius * 2}px;
  width: ${radius * 2}px;
  border: ${stroke}px solid rgba(0, 0, 0, 0.5);
`;

const ShapeRing1 = styled.div`
  ${RingVariant(40, 15)};
  top: 30%;
  left: 0;
  transform: translateX(-50%);
`;

const ShapeRing2 = styled.div`
  ${RingVariant(60, 15)};
  top: 15%;
  left: 0;
  transform: translateX(50%);
`;

또한 Mixin을 만들때 디폴트값을 주어 파라미터가 없어도 디폴트한 디자인을 생성할 수 있습니다.

컴포넌트의 재활용

소개페이지 특성상 원페이지로 작성되고 폼마다 좌우 마진이 일정하고 반복되는 스타일이 많기 때문에 재활용에 가장 큰 이점을 가집니다. 더는 CSS 코드를 컴포넌트별로 불필요하게 생산할 필요가 없습니다.

아래 형식으로 스타일된 컴포넌트를 구성하고 랜더링을 하는 컴포넌트들에서 import 하여 사용할수있습니다.

export const ContentLayout = styled.div`
      display: block;
      height: 100%;
      max-width: 1220px;
      margin-left: auto;
      margin-right: auto;
`;

export const FeatureTitle = styled.div`
      font-family: Handon3gyeopsal600g;
      font-size: 58px;
      letter-spacing: -2.07px;
`;

export const FeatureDesc = styled.div`
  font-family: Handon3gyeopsal300g;
   color: #454f5d;
   font-size: 38px;
   line-height: 1.39;
   letter-spacing: -1.35px;
`;

각 폼마다 좌우가 대칭되어야 하거나 디자인 가이드에 제공되는 스타일 이외의 것이 필요할 때 폼에 맞게 컴포넌트를 수정할 수 있으며 당연히 그렇게 변경된 스타일은 폼 내부에만 적용됩니다.
아래 코드는 스크롤 위치에 따라 bool 값이 props로 넘어오며 그에 따라 애니메이션을 작동시키는 로직입니다.

Theme

색상 혹은 색상 팔레트를 이용한 글로벌 작업 혹은 글로벌한 정의가 필요한 스타일이 있으면 Redux처럼 사용이 가능합니다.
ThemeProvider를 import 합니다.
모든 컴포넌트를 ThemeProvider에 연결해야합니다.
컴포넌트에 props로 글로벌 정의한 스타일을 가져옵니다.

theme.js;

const theme = {
  Secondary01: "#323b45",
  Secondary02: "#6d747b",
  Soft_Pink: "#ffa1a3",
  Inactive_Button: "#f5f5f5",
  Placeholder_Text: "#b6b9bd",
  Cancle_Text: "#8a8c8f",
  Status_Critical: "#ff3b30",
  White: "#ffffff",
  Black: "#000000"
};

export default theme;

import React from "react";
import styled, { createGlobalStyle, ThemeProvider } from "styled-components";
import theme from "./theme";

const GlobalStyle = createGlobalStyle`
      body {
        margin: 0px;
        padding: 0px;
      }
    `;
const Container = styled.div`
  height: 100%;
  width: 100vh;
`;

const Button = styled.button`
  border-radius: 30px;
  padding: 25px 15px;
  background-color: ${props => props.theme.Soft_Pink};
`;

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Container>
        <GlobalStyle />
        <Button>hello</Button>
      </Container>
    </ThemeProvider>
  );
};

export default App;

Styled-theming

theme을 보다 쉽게 관리할수있는 Styled-Components의 확장 tool입니다.
예를 들어 요소를 같이 전달 해줄 수 있기 때문에 Light vs Dark mode에 대한 솔루션이 될 수 있습니다.
각 모드의 색상을 미리 정의하고 props값 단 하나의 변화로 전역으로 설정된 모든 컴포넌트의 색상이 해당 모드에 맞게 변경됩니다.

Result

결과적으로 본문에서 언급한 Sass나 Less를 이용한 CSS 구조 설계와 같은 방식들이 유용하기는 하지만 조건부 스타일링의 방법 등 여전히 제한적인 문제가 있었습니다. 그러나 Styled-Components 라이브러리는 위의 문제들을 해결할 수 있는 방법을 제시하고 있습니다.

다음과 같은 고민을 하고 있는 리액트 개발자라면 Styled-Components를 사용해 볼 것을 추천합니다.

CSS 작업 시 SASS, LESS 혹은 Webpack을 이용한 구조화 작업에서 시간을 엄청나게 소비한 적이 있을 때
CSS 파일 새로 만들고, 클래스명 만들고, 컴포넌트에서 CSS 파일을 왔다 갔다 하면서 시간을 소비한 적이 있을 때
Sass를 좋아하고 Nesting, variable, Mixin을 사용하고 싶을 때

마지막으로 CSS의 계속되는 진화로 인해 개발 방법 또한 바뀌고 있습니다. 순수 CSS, Sass, CSS 모듈, Styled-Components 등으로 발전되는 형태에서 무조건 최신의 기술을 사용해야 하는 법은 없습니다. 개발자의 코드에 최적으로 정의된 스타일링 방법을 따라갈 수는 없다고 생각합니다. 그럼에도 불구하고 개발자라면 최신의 기술을 알고 추구하는 것이 더 나은 개발자가 되는 길이라고 생각합니다.

SNS 마케팅 파헤치기

Fri, 25 Oct 2019 00:00:00 +0000

마케터는 기업에서 소비자와 가장 가까운 사람이라고 생각합니다.
좋은 마케터는 소비자에게 친근하고 자연스럽게 다가가야 하고 그러기 위해서 소비자를 잘 파악해야 하고 소비자가 있는 시장을 잘 분석해야 합니다.

지금부터 제가 너드팩토리에서 마케터로 일하면서 알게 된 마케팅 방법과 진행 과정을 공유해 드리려고 합니다.

마케팅 타깃 매체, 도구, 방법은 정말 다양합니다. 매체 선택만 하더라도 tv광고, 유튜브 배너 광고, 전단 등 다양한 방법이 있죠. 그 중 제가 선택한 것은 sns 마케팅으로 많은 회사에서 사용하고 있는 마케팅 방법 중 하나 입니다.
당근마켓같은 경우에는 마케팅의 70%정도를 페이스북에 의존하고 있다고 합니다. 세대가 바뀌고 기술이 발전하면서 전자기기(모바일 기기)의 사용이 꾸준히 늘고 있습니다. 마케팅 타깃이 소셜 미디어를 사용하고 있을 경우, 전파력이 높아 홍보대상이 자연스럽게 확산될 수 있기 때문에 '이거 잘만 홍보하면 적은 돈으로 많은 사람들에게 홍보할 수 있겠다'라는 생각에 sns 마케팅 시장에 관심을 가지게 되었습니다.

간단하게 말하자면 아래 순서와 같습니다.

모바일 기기 사용자가 증가 > 모바일 기기의 sns 이용률 증가 > 국내 소셜미디어 이용자 규모가 증가 > sns를 활용한 마케팅 시장 확장

링크를 통해 블로그, 페이스북, 트위터 등의 상호 연동이 가능하여 한 번에 통합하여 홍보할 수 있습니다.
블로그에 올린 글을 다시 작성해서 페이스북에 올릴 필요가 없습니다. 토스같은 경우 토스 블로그를 운영하며 작성한 글을 페이스북 게시글에 링크를 다는 방식으로 운영하고 있습니다.
sns 마케팅이 곧 바이럴 마케팅(Viral Marketing)이 될 수 있습니다.
예를 들어, 페이스북의 ‘좋아요’ 표현은 내가 아는 지인의 sns에 빠르게 보여 지고 다른 사람들에게 확산되어 자동으로 넓은 범위로 홍보 할 수 있습니다. 이것이 sns 마케팅의 최고 장점이라고 생각합니다.(개인적 의견)
sns는 온라인 광고로, 오프라인 광고들과 달리 큰 자본 없이도 운영이 가능하며 sns에는 타임라인, 좋아요 등 활용할 수 있는 서비스가 많고 다양합니다. 그리고 고객과의 소통을 통한 제품의 피드백이나 블로거와의 연동을 통한 유도성을 자유롭게 활용할 수 있습니다. 뷰티, 패션 쪽에서는 유튜브 크리에이터들과 홍보 캠페인을 진행하며 높은 광고 효과를 보고 있습니다.
한국 고용 정보원의 김중진 연구위원은 “기업들이 유튜브 크리에이터에게 광고를 주는 이유는 기존 연예인 등 특정인에게 들이는 비용보다 훨씬 낮은 비용을 가지고도 전 세계적으로 홍보할 수 있기 때문”이라고 했습니다.
고객이 기업 sns에 글을 쓰면 관리자가 고객의 댓글에 실시간으로 답변을 해주는 등의 고객의 요구를 쉽게 파악할 수 있는 실시간 커뮤니케이션이 가능합니다. 이로 인해 친근한 이미지를 줄 수 있습니다.

마케팅 대상과 매체 정하기

마케팅 대상 정하기

'적을 알고 나를 알자'라는 말이 있습니다. 복싱 경기를 앞둔 선수가 상대전수의 경기 방식을 알고 그에 맞는 전략을 세우면 경기에서 승리할 수 있습니다.
따라서, 마케팅 타깃을 정확히 파악해야 마케팅 전략을 잘 세울 수 있겠죠?(네~) 서비스의 내용에 따라서 소비자의 연령대, 성별 등을 짐작해 볼 수 있고 이것들이 마케팅 전략에 큰 영향을 미칩니다.

제가 우리아이 서비스 마케팅을 어떤 식으로 진행했는지 공유해 드리겠습니다. ‘아이를 위한 육아일기’ 컨셉으로 ‘일기 작성’과 ‘작성한 일기장 공유’ 등의 기능을 제공하는 ‘우리아이’ 서비스의 경우에는 마케팅 대상을 다음과 같이 특정지어 보았습니다.

평균 출산 연령은 32.8세
평균초혼연령이 남편 33.15세, 아내 30.40세 결혼생활 중 첫째아 출산까지의 평균 기간 이 2.16년 인 것으로 보아 ‘우리아이’ 서비스 주요 사용자는 남편 35.31세, 아내 32.56세 이상
‘우리아이’ 서비스의 주요 사용자는 25-29세 ~ 35-39세 여성

이렇게 서비스 예상 사용자를 특정하면 마케팅 범위가 줄어들어 비교적 수월하게 홍보할 수 있습니다.

마케팅 매체 정하기

적이 누군지 알았다면 이제는 적의 본거지를 알아봐야 합니다. 타깃의 본거지를 치기 위해 타깃이 주로 활동하는 매체를 알아보았습니다.
위에서 조사한 성별, 연령대를 기준으로 선호하는 소셜 미디어(sns)를 알아보았습니다.

성별, 연령별 선호 sns

‘우리아이’ 서비스 주요 고객층인 25~39세 남성과 여성의 선호도가 가장 높은 sns는 `인스타그램, 네이버 밴드, 페이스북, 카카오 스토리, 네이버 카페
여성과 남성 모두 연령대가 높아질수록 네이버 밴드, 카페, 카카오 스토리와 같은 친목과 소통이 주된 목적인 sns를 이용하는 경향이 있습니다.
‘우리아이’ 서비스의 예상 주요 사용자인 20-40대는 인스타그램, 페이스북, 네이버 밴드 사용이 많습니다.

위의 내용을 바탕으로 타깃 매체는 페이스북, 인스타그램, 네이버 밴드, 카카오스토리, 네이버 카페로 범위를 줄이고 매체 별 발전 가능성을 살펴보았습니다. 공들여서 마케팅을 했는데 시장이 퇴보하고 있으면 말짱 도루묵이기 때문에 신중해야 합니다.(참고로 저는 도루묵 좋아합니다.)

소셜 미디어 서비스별 사용시간 조사 그래프를 바탕으로 sns 채널별 점유율 추이를 정리해 보았습니다.

주로 이용하는 소셜 미디어는 페이스북 > 인스타그램 > 네이버 카페 > 네이버 밴드 순
인스타그램과 네이버 카페 사용률은 증가하고, 페이스북과 카카오 스토리는 감소하는 경향을 보였습니다.

위의 두 가지를 기준으로 마케팅 매체를 페이스북, 인스타그램, 네이버 밴드로 선정하였습니다. 이제 타깃이 주로 활동하는 매체가 어떤 특성을 가지고 있는지 조사하여 더 구체적인 홍보 전략을 수립해 볼까요?(네~)

매체별 시장 분석

특성, 기대효과, 예산을 큰 틀로 잡고 선정 매체 시장 분석을 진행했습니다.

페이스북

페이스북 페이지 광고 모델

페이스북 페이지의 ‘홍보’버튼 활용 비즈니스 계정으로 브랜드 페이지를 제작한 뒤, 올린 게시물을 필요에 따라 홍보할 수 있습니다.
관심사와 연령을 선택하여 타겟을 지정할 수 있습니다.
엄마, 아빠, 육아, 일상, 유아, 자녀, 일기, 임신, 딸, 아들, 맘을 관심사로 지정하고 연령을 25-45세로 타겟팅, 기간 30일로 하여 지출을 계산해 보았을 때,
하루당 1,000원 기준으로 추산 도달 수 30~100명씩 증가하여
예1) 30일 _ 일일 1,000원(추산 도달 수: 72-210) = 지출 30,000원
예2) 30일 _ 일일 2,000원(추산 도달 수: 106-307) = 지출 60,000원
예상 소요 예산과 추산 도달 수는 위와 같습니다.

※추산 도달 수: 일일 기준
※ 캠페인의 종류와 타깃, 노출 위치에 따라 예산이 변동 될 수 있음.

인스타그램

인스타그램 비즈니스 계정 광고 모델

행동 유도 버튼에 url을 추가할 수 있습니다.
‘행동 유도 버튼’이란 게시물에 링크를 버튼 형태로 다는 것으로 이것을 활용하여 링크 페이지의 접근도를 높이고 자연스럽게 노출시킬 수 있습니다.
관심사와 연령을 선택하여 타겟을 지정할 수 있습니다.
페이스북과 연동하여 홍보할 수 있습니다.
만약 브랜드에서 페이스북과 인스타그램 두 가지 매체를 사용하여 홍보를 한다면 인스타그램 스토리 또는 게시물을 게시할 때 연동 유무를 선택하여 한 번에 두 매체에 게시물을 업로드 할 수 있습니다.
엄마, 아빠, 육아, 일상, 유아, 자녀, 일기, 임신, 딸, 아들, 맘을 관심사로 지정하고 연령을 25-45세로 타겟팅하여 지출을 계산해 보았을 때,
하루당 1,000원 기준으로 추산 도달 수 1000~1100명씩 증가하여
예1) 30일 _ 일일 1,000원(추산 도달 수: 1100-2800) = 지출 30,000원
예2) 30일 _ 일일 2,000원(추산 도달 수: 2100-5700) = 지출 60,000원
예상 소요 예산과 추산 도달 수는 위와 같습니다.

※추산 도달 수: 30일 기준

네이버 밴드

밴드 페이지 관리

육아정보 공유페이지를 만들어서 유용한 정보를 공유하며 페이지 멤버 모집(육아정보 제휴 업체에게 공유 받아서 노출)
멤버가 100명 이상 모이면 어플리케이션 노출 게시글 작성

밴드 페이지 상위 노출 전략

검색 키워드와 밴드이름 유사하게 설정 밴드 이름으로 설정한 단어 중심으로 검색 상위에 노출됩니다. 예를 들어, ‘우리아이’의 경우에는 ‘육아’, ‘일기’, ‘일상’ 등의 단어를 조합하여 밴드이름으로 설정하면 되겠습니다.
나열 순서에 맞는 밴드 이름(특수기호, 숫자, 영문, 한글 순으로 나열됨)
대표태그 설정(같은 태그 글끼리 모아보기에 활용) #육아#맘#일상 등

밴드 멤버 모집하기

‘새로 시작한 밴드’ 홍보 신청하기(무료) ‘새로 시작한 밴드’를 신청하면 새글 피드의 상단에 ‘추천 정보’ 항목으로 나타납니다.
밴드 페이지 소개말, 제목 -> 검색 키워드와 일치시켜 줍니다.
내용, 공지사항, 키워드 설정, 지역 설정 -> 타깃에 맞춤 설정 예상 지출 예산: 0원

네이버 밴드가 유료광고 매체에서 제외된 이유

네이버 밴드의 프로모션 진행 시, 약정금액(고정가)가 4천 만원이기 때문에 위험부담을 안고 광고를 할 수 없었습니다….

그 다음..

위처럼 사용자, 마케팅 매체 선정, 매체 별 분석의 과정을 거친 후에 각 항목들을 한 차례 더 세분화하여(마케팅 대상의 관심사, 경험, *광고 방식까지 고려) 구체적인 계획을 세우고 선정한 매체에 서비스를 시험 홍보합니다.
도달율, 접근성 등의 시험 홍보 결과를 바탕으로 마케팅 전략을 수정 및 보완하여 다시 진행합니다.

*광고 방식: CPM, CPC, CPA 등이 있음.

지금까지 햇병아리 마케터의 ‘sns마케팅 파헤치기’ 글 이었습니다. 언젠가 프로 마케터가 될 그 날을 위해… to be continued…

너드팩토리 블로그

ICT인턴십 후기

참여 동기

노아

포토

무엇을 했을까요?

🔎 배운 점 & 소감

노아

포토

⭐여담⭐

노아

포토

우리 서비스에 데이터를 어떻게 보여줄까?

성적이 더 좋은 학생이 누구일까요?

데이터 시각화란?

데이터 시각화에서 중요한 것

데이터

독자

구성

+ 좋은 데이터 시각화라고 한다면?

시각화에 활용되는 컬러

1. 정성적 색상 스케일(qualitative color scale)

2. 순차적 색상 스케일 (sequential color scale)

3. 발산형 색상 스케일 (diverging color scale)

그래서 서비스에는 어떻게 적용하면 좋을까?

QA를 통해 얻은 제안들

디자인 관련

제안하고 싶은 형태

개인화 추천 관리

개인화 추천 분석(새로운 부분)

아쉬운 부분

TDD 적용하기 (Python Django)

1. 개요

2. 사전준비

3. 개발

APITestCase

1. 테스트 코드 작성

2. 실제 코드 구현

1. 테스트 코드 작성

2. 실제 코드 구현

1. 테스트 코드 작성

2. 실제 코드 구현

3. Yellow

TestCase

1. 테스트 코드 작성

2. 실제 코드 구현

3. 리팩토링

1. 테스트 코드 작성

2. 구현

1. 테스트 코드 작성

2. 구현

4. 회고

테스트 코드

적용 시기

작업 시간

정답을 알려줘

자연어처리 모델을 활용한 개인화 추천시스템

여는 글

1. 개인화 추천 기술란?

2. 토픽 모델링이란?

배경

위키 정의

컨셉

정리

3. 개인화 추천에서의 토픽 모델링

4. 예고편

Reference

Gatsby를 어떻게 적용할 수 있을까? (+ gatsby에 typescript 적용하기)

들어가며

Gatsby.js

JAM Stack과 동작원리

우리는 왜 Gatsby를 사용하려고 하는가

1. React.js 기반 프레임워크이다

2. 성능이 좋다

3. SEO에 유리하다.

Gatsby 기술 스택을 어떻게 잘 사용할수 있을까

기술 블로그 마이그레이션

Gatsby에 TypeScript 적용하기

Install

마치며