FittingCal 만들기 : 종이 한 장이 불러온 나비효과

소개 글도 있다.

2017/09/04 -  FittingCal : 키, 몸무게, 간단한 질문으로 옷 핏 추측하기

1. 시작
 시작은 간단한 종이 한장이었다. C, python도 다룰 줄 모르던 2015년, 베트남 여행 중 카페에서 프로그래밍을 배우면 만들어 보겠다고 일기에 적었다. 언제 만들어 볼 수 있을까 하다가 이제는 얼추 원하는 모습을 만들수 있을거라는 생각이 들었다.

      

2. 데이터 구하고 분석하기

# 데이터 구하기
 혼자서 수많은 사람들의 신체 데이터를 구할 수는 없다. 정부에서는 공공 데이터를 제공하고 있다(data.go.kr). 약 15000명의 105개의 인치수 데이터를 모아놓은 공공데이터가 있었다. 옷 사이즈는 인터넷 쇼핑몰에서 제공하는 치수 데이터(예를 들어 기장, 허벅지, 밑단)를 가져오면 된다.

# 데이터 분석하기

 한국인 인체 치수 데이터를 구하긴 했지만 불필요한 정보들이 많다. https://sizekorea.kr에서 항목에 대한 설명을 제공한다. 설명을 기초로 해서 105개 항목중에서 옷 치수와 비교할 때 필요한 항목을 추렸다. 추린 항목들로 사용자의 실제 치수를 어떻게 추측할지 고민했다.

# 추측하는 알고리즘 만들기

 이용자들이 키와 몸무게 그리고 자신의 신체 특징을 알려주고 쇼핑몰에 사이즈를 문의한다. 이 방법을 그대로 사용하기 위해서 실제로 키와 몸무게 신체 특징이 실제 신체 치수와 큰 상관관계를 가지는지 알아보았다. 표에서 보여주듯 몸무게는 신체 너비를, 키는 신체 높이를 잰 항목과 큰 상관관계(둘다 약 0.9)가 있었다. 

방법1:  의사결정 tree 추측

인체 부위 별 사이즈와 매칭 -> 사이즈 데이터(S/M/L)로 일반화 -> 키, 몸무게 정보와 매칭 -> 사이즈로 추정

 의사결정 트리는 학습시킬 데이터와 결과값을 매칭시켜 학습시켜 주면 된다. 몸무게, 사이즈별 부위별 데이터(학습)를 모아 몸무게, 키별로 하나의 사이즈(결과)를 지정하려 했다. 사용자가 키와 몸무게만 입력하면 지정된 사이즈를 불러와서 사이즈를 추측할 수 있을거라 생각했다. 

 테스트 해보니 매우 부정확한(약 55%) 학습능력을 보였다. 키, 몸무게 별로 데이터가 너무 적었고, 정답 개수가 적은 의사결정 트리와는 달리 8개 사이즈로 결과값의 종류가 너무 많았다. 게다가 세세한 데이터가 나와있는데 굳이 한 사이즈로 줄일 필요가 없다는걸 만들고 깨달았다(하..) 그래서 이방법을 폐지하고 개인의 특성을 잘 반영하는 방법을 고민했다. 

  키와 몸무게로 인체 치수들을 추측할수는 있다. 하지만 키, 몸무게는 같지만 허벅지가 유난히 굵은 사람 처럼 부위별 특징을 반영하지는 못한다. 신체적 특징을 반영하는 방법을 고민했다

  방법2 : t분포를 사용한 추측

키,몸무게, 부위 특징 -> 인체 부위 별 사이즈 추측 -> 옷과 비교

 정제되지 않은 데이터를 키와 몸무게 반올림 값으로 분류해서 dictionary로 (예.{'177':{'60':{부위별 데이터},'61':{부위별 데이터}}}) 입력했다. 키 몸무게 조건으로 필터링한 데이터를 유의수준 95% 안에서 부위별로 최대값, 최빈값, 최소값 데이터를 추렸다. 키와 몸무게 조건을 모두 만족하는 데이터는 10개를 넘지 않는 경우가 많았기 때문에 t분포를 통해 유의수준을 계산했다. 결과는 부위별로 세가지 key를 가지도록 했다. 허벅지가 굵다고 하면 key 2의 value를 리턴하는 방식이다.

인체 치수를 추정하는 객체 일부

 하지만, 키가 매우 크거나 몸무게가 매우 높은 이상치로 갈수록 데이터가 급속히 줄어들었다. 대안으로 최소 데이터 개수를 5개로 잡고 키와 몸무게를 x축, y축으로 두고 가장 가까운 거리의 데이터들을 불러왔다. 거리가 (몸무게 3kg, 키 3cm) 보다 멀어지면 그 데이터는 수집하지 않았다.

4. 플랫폼 구축하기

# 플랫폼 고르기
방법1 : 카카오봇으로 플랫폼 만들기
  django를 공부해서 기본적인 백엔드 지식은 있었지만 사이트 디자인을 위한 Javascript나 bootstrap 등의 프론트엔드지식이 없었다. 그래서 django 백엔드만 쓰면 되는 카카오봇을 만들어보았다. 키, 몸무게, 옷 실측값, 몇가지 질문에 답하면 결과들을 답해주는 방식이었다. 얼핏 보기에 쉬워 보이는 방법이라 바로 만들어 보았다.

 그런데 결과(옷 사이즈)를 얻기 위해 질문이 너무 많아 대답하는데 부담이 있었고 데이터를 잘못 입력하면 고치기도 힘들었다. 입으면 어떤 느낌이 날지는 어차피 시각적으로 표현을 해주어야하는데 글자를 이용해야 하는 카카오봇으로는 한계가 있었다. 

방법2 : 웹사이트 만들기
  PHP나 nodejs를 배워서 만들어볼까 생각해보았으나 python으로 데이터를 분석했기에 Django를 개발 환경으로 선택했다. 다른 프로그램과 비교할수는 없으나 python 좋다.

로그인-> 신체 데이터 입력 -> 옷 실측값 입력 -> 추측 결과 확인

 사이트의 구조는 위와 같이 만들었다. 

# 프론트엔드 디자인

 나는 디자인 감각이 거의 없다. 사이트 디자인을 구축할 때 기본적인 지식, 구글링 능력, 개발자 도구, 좋은 예로 삼을 사이트가 이 정도라도 만드는 데에 중요한 역할을 했다.  

 먼저 프론트엔드를 동적으로 꾸밀 줄 몰라 몇가지 내용들을 배워야했다. 이고잉님의 생활코딩으로 Javascript와 JQuery를 배웠다. 무턱대고 처음부터 만드려고 하기보다 이미 만들어진 것들을 기본적인 지식을 이용해 바꾸려고 하니 훨씬 편했다. 여기에 문제들이 생기면 google이 도와준다. (구글링을 하다보면 영어가 얼마나 필요한지 뼈져리게 느끼게 된다)

 css/html 디자인은 에러가 뜨지 않고 이상한 결과만 보여주기 때문에 왜 이런 결과가 나오는지 모르는 경우가 많았다. 처음에는 그냥 소스코드를 무작정 살펴보기만 했다. 대부분 이유를 알수가 없다. css에서는 여러가지 코드가 겹치면 우선순위를 정하는 명시도(Specificity)를 계산하는데 이런것 까지 직접 계산하기는 힘들었다. 그러다 신세계를 만났다!! 크롬 개발자도구(Ctrl+Shift+i)를 사용하면 어떤 css를 상속받아서 사용하는지 알 수있다. 이럴 때 마다 혼자서만 공부하려고 해서는 안된다는 생각이 든다.

# 데이터 구조(Django 코딩) 만들기

  말은 간단하지만 코드는 간단하지 않다는 것을 알수 있는 단계다. "여러 사이즈를 입력할 때 공통된 이름은 한번만, 사이즈별로 다른 부분은 여러번 입력해서 각각의 사이즈에 따로 저장하고 싶다"라는 생각은 새롭게 formset구조를 이해해야 하고 또 공통된 옷 이름은 Foreignkey를 이용해서 여러번 입력될수 있도록 해야했다. 덕분에 공부는 많이 했지만... 비개발자들이 개발자들에게 요구사항을 들으면 왜 답답해지는지 알것 같았다.

# 결과 시각화 
  - 옷 입은 상태 시각화하기
  그림은 직접 그릴 능력도 없고 직접 그린다고 해도 계속 데이터가 변하는 문제가 있다. D3를 이용해 데이터에 따라 그림을 다르게 그려 보았다.

 데이터 시각화를 하려니 기존 항목값을 새롭게 가공해야 했다. 예를 들어 남자의 밑위 항목값은 그곳(?)을 피해서 재는데 실제로 옷을 입으면 그곳(?)이 없는 것이 아니므로 따로 값을 추가해줘야 했다. 데이터를 분석할 때에는 정확히 어떤 의미인지 파악할 필요가 있다.

 처음에 시각화를 할때 실제 몸과 유사하게 그리려고 했었다. 하지만 전달하려는 의미가 직관적으로 전달되지 않았다. 또 시각화 중에 변수가 너무 많아 그리기가 어려웠다. 그래서 앞에서 본 모습으로 길이를 나타내고, 옆에서 본 모습으로 너비를 나타내도록 했다. 더 직관적으로 보였다.

 - 그래프 그리기
   옷 입은 상태 시각화는 느낌을 파악할 수는 있으나 실제로 어느정도 남거나 모자라는지 알리는 역할을 하지 못했다. 그래프로 추측하는 실제 숫자를 보여주면서 차이를 제대로 이해할수 있도록 돕는것이 좋다고 생각했다. 
   그룹별로 두개의 데이터를 쉽게 비교할수 있는 그래프를 찾다가 좋은 예시를 발견했다.

이 그래프를 조금 변형해서 그래프를 그렸다. 역시 있는 예시를 응용해서 내가 조금씩 바꾸는게 훨씬 편하다. 물론 변형할 때 코드 이해가 꼭 필요하다.

5. 배포하기

 Django에서 debug=False만 해주고 튜토리얼 를 따라 배포 서버에 올리기만 하면 끝날 줄 알았다. 그런데 user가 올리는 media 파일들이 읽어지지 않았다!

 구글링해보니 debug=True를 하면 원래는 django에서 자동으로 파일들을 읽어왔지만, debug모드를 끄면 보안 문제 때문에 읽을 수가 없었다. 그리고 sqlite는 매번 데이터를 migrate할때마다 초기화되고 여러명이 동시에 사용하기에 최적화 되어있지 않다고 한다.

 구글링을 해봐도 자료가 일목요연하게 정리된 것이 없었고 구글링하느라 많은시간을 보냈다. 그러다가 django를 배포하기 위한 방법들을 알려주는 강의(https://nomade.kr/vod/deploy/)를 찾았고 덕분에 쉽게 배포했다. 아마존 클라우드를 사용해서 정적/동적 파일을 관리하는 S3와 DB를 효율적으로 관리하는 RDS 서비스를 사용하였다. 강의가 유료였지만 구글링을 하는 시간을 5만원을 주고 샀으니 꽤 괜찮았다. 게다가 그냥 단순한 구글링으로 몰랐던 점들도 꺠달을수 있어서 좋았다.

 도메인도 샀다. 몇개의 자료(링크1 링크2)를 보고 사이트 도메인도 샀다. 할인이벤트를 해서 이천원대에 도메인을 샀다. 생각보다 싸다!!!

6. 지인들의 사용기

 먼저 배포해보기 전에 친구들이 사용해 보았다. 로그인을 가장 불편해 했다. 자기가 입력해야할 양이 그 데이터를 얻음으로써 얻는 가치보다 작다고 판단하면 사용하지 않는다. 이 데이터가 좋은지 나쁜지도 모른 상태에서 회원가입, 신체정보, 옷 정보 모두를 입력하라고 요구한다면 나라도 이용하지 않을거라는 생각이 들었다. 그래서 '일회용 추정'을 만들었다. 계속해서 신체 데이터를 저장할수는 없지만 굳이 로그인을 하지 않고도 데이터 정보를 얻고 싶은 사람들이 사용할수 있도록 했다. 만약 이 데이터가 괜찮았다고 생각한다면 가입할거라는 생각했다. 

 그리고 계속 chrome으로 개발을 진행해 다른 브라우저를 고려하지 못했다. internet explorer를 이용하는 친구가 결과가 이상하다고 말해주었다. js에 문법오류가 있었는데 크롬은 이 오류를 자기 스스로 고쳐서 계산한 것이었다.(구글짱) 또 창 크기에 따라 svg 이미지 크기를 조정하는 viewbox가 제대로 작동되지 않았다. 구글링해보니 ie는 viewbox 처리에 버그가 있었다. 그래서 ie를 사용하면 절대값으로 크기를 지정해 주었다. cross-browser문제도 꼭 신경쓸 필요가 있다. 

글자 분석이 없고 d3로 그린 svg가 너무 작다.

7. 완벽주의와 감정

 초기에는 과제가 아니라서 마음 편하게 만들었다. 한 기능을 만들때 마다 뿌듯했다. 하지만 개발 중에 계속해서 마음에 안드는 것들이 보여 끝없이 수정했고 진도는 나가지 못했고 우울해 졌다.

 완벽주의의 늪에 갇혔다. 당장 필요한 기능들도 있었지만 불편할거라는 막연한 생각때문에 계속해서 고치다가 그 기능 구현에만 매달리는 경우가 더 많았다. 결함을 줄이려고 노력하는 것은 중요하지만 일단은 중요한 구현부터 하고 마무리 하는게 중요하다(작업이 끝나고도 배포때문에 이렇게 고생할 줄 알았다면 계속해서 사이트를 고치는 작업을 하지는 않았을 것이다)

책도 하나 샀다.

 그래서 일단 마감날짜를 두고 완성해보기로 했다. 과제가 아니라 마감 날짜가 원래 없지만 스스로의 마감을 두니 필요한것과 불필요한것들을 구분할수 있게 된다. 게다가 불필요한 기능들을 나중에 구현하겠다고 미루면 나중에 더 좋은 방법이 생각나더라.

8. 마치며

 개발은 온전히 내 힘으로 만들어서 결과를 볼 수 있다는 점에서 매력적이다. 종이 쪼가리가 하나의 결과물로 변신한다는건 정말 뿌듯한 일이다. 아마 아무도 안쓰는 프로그램으로 끝나겠지만 사이트를 처음부터 끝까지 만들어보았다는 것에 의의를 둔다. 
 시간을 내서 만들던 프로그램이 끝나니 이제 뭘 해야할지 모르겠다. 또 뭘 만들어야 하나? 지금은 협업이 힘든 상황이지만 다음에는 꼭 협업을 해서 만들어 보고 싶다.