매주 AI NEWS & TRENDS 받아보기 >
SNS에서 만나요
문의하기

Mobbin 데이터셋

디자이너를 위한 AI Tool 구축

오픈데이터셋 더 알아보기
TAGS
디자인 시스템
디자인 레퍼런스
UI
객체탐지
디자이너 전용 AI Tool
Bounding Box
이미지
디자이너를 위한 AI Tool 구축

디자인 시스템은 디자이너와 엔지니어의 공통의 시각적 언어이며, 누구나 쉽게 만들어 사용할 수 있게 보편화되었음에도, 여전히 디자인 시스템은 큰 장애물을 가지고 있습니다. 더 많은 컴포넌트와 패턴들이 포함될수록 더 사용하기 복잡해진다는 것입니다. 이를 해결하기 위해 인공지능이 사람을 대신해 수많은 디자인 요소들을 반복해서 학습하고, 마치 오타를 찾아주는 것처럼 디자이너의 화면에서 자동으로 디자인 시스템의 규칙을 추천해주는 디자인 자동화 툴을 만들고자 본 프로젝트를 시작했습니다.

About

디자인과 머신러닝을 접목하는 연구

셀렉트스타는 더욱 스마트한 인공지능을 위한 고품질 학습 데이터를 제공합니다. 본 데이터셋은 셀렉트스타가 주최한 인공지능 데이터셋 지원사업의 일환으로, 데이터 눈알 붙이기 팀과 협업하여 무료로 구축하였습니다.

데이터 눈알 붙이기 팀은 네이버와 라인의 디자이너들이 모여 시작한 사내 스터디 동호회에서 출발했습니다. 

이 동호회는 UX디자인 전문가와 Design system 라이브러리의 전문가들로 구성됐으며, LINE 메신저를 비롯한 글로벌 디자인 및 제품 개발 업무 과정에서 디자이너들이 겪고 있는 생산성의 문제를 획기적으로 해결 할 수 있는 다양한 기술을 스터디 해왔습니다.

그리고 스터디의 일환으로서 디자인 업무에 머신러닝 기반의 객체탐지 (Object Detection)을 접목해보는 새로운 시도를 해봤고, 프로토타이핑 결과 실제 가능성을 확인했습니다. 그리고 이런 데이터셋을 오픈소스로 구축할 수 있다면 다양한 디자인 분야에서 큰 발전을 이룰 수 있을 것이라 확신하여 [2021 인공지능 데이터셋 지원사업]에 참여했고, 셀렉트스타의 도움으로 저희의 목표에 한걸음 가까이 갈 수 있었습니다. 저희는 지금도 계속 디자인과 머신러닝을 접목하는 연구를 하고 있고, 조만간 재미있는 제품을 공개할 수 있도록 노력하고 있습니다.

프로젝트 진행 소감

“객체 검출 프로젝트를 진행하면서 가장 어려운 점은 데이터를 확보하고 가공하는 전처리 단계입니다. 단순하게 데이터량이 많은 것보다 정확하게 라벨링된 데이터를 확보하는 것이 모델의 성능에 더 큰 영향을 미칩니다. 그런 의미로 저희 프로젝트가 지원 프로그램을 통해서 셀렉트스타를 만난 것은 큰 행운이었습니다.

셀렉트스타의 서비스는 단순한 크라우드소싱 플랫폼이 아닌 연구자와 치열하게 논의하면서 라벨링 가이드를 체계적으로 만드는 것부터 시작했습니다.다른 플랫폼에서도 PDF 가이드를 업로드하는 과정이 있었지만 경험이 없는 연구자들에게는 어떤식으로 가이드를 만들 수 있을지 부터가 큰 벽과 같았는데, 셀렉트스타의 프로젝트 매니저와 그분들의 다양한 노하우를 통해서 저희도 훌륭한 가이드를 만들 수 있었고 실제 라벨링을 효율적으로 진행하는데 큰 도움이 됐습니다.”

데이터셋 스펙

본 데이터셋은 저작권 문제로 인하여 샘플데이터만 제공됩니다.

  • 총 11,999장의 이미지에 대한 라벨링 진행

  • 50,000건 이상의 박스 가공

데이터 수집 및 가공 방법

  • iOS 앱 상 13개 UI 카테고리에 bbox 라벨링하기

  • 각각의 UI를 크라우드 워커에게 설명하기 위한 설명서 작성

  • PoC 작업을 통한 app별로 상이한 UI에 대한 공통 특징 찾아내기 (ex. Floating Action Button은 음영이 있고, 대체로 원형이며, 화면 하단에 위치한다)

  • 작업 정확도를 높이기 위해 코너케이스가 많은 UI 카테고리는 나머지 카테고리와 분리하여 진행

  • LabelMe를 활용한 최종 검사 진행

  • 코드로 data 후처리 작업 진행

Data Collection

네이버 / 라인플러스 프로덕트 디자이너 분들의 자체 스터디에서 시작된 프로젝트

 

  • 디자이너를 위한 AI tool을 만들고자 목표
  • iOS 앱 내 "UI"에 bbox를 그려 AI가 각각의 UI를 학습하는 모델을 구축하고자 함
  • 이에 셀렉트스타는 데이터 눈알 붙이기 팀에서 제공한 raw data (다양한 iOS 앱 캡처 화면 이미지) 내 13개 UI 카테고리에 대한 bbox 가공 작업 진행

직접 참여하여 데이터의 수집 및 가공을 진행했습니다. 셀렉트스타의 크라우드소싱 플랫폼 '캐시미션(앱)'에서 크라우드 유저들이 앱 디자인에 박스 그리기 미션을 직접 참여하여 일부 데이터의 수집 및 가공을 진행했습니다.

'캐시미션(웹)'에서 전문 가이드 팀이 작성한 크라우드 유저들의 미션 이해를 돕기 위한 가이드_ ‘앱 디자인에 박스 그리기’

Sample Data

{
  "version": "4.5.6",
  "flags": {},
  "shapes": [
    {
      "label": "page control",
      "points": [
        [
          646.8384074941451,
          1210.3044496487119
        ],
        [
          794.6135831381732,
          1230.679156908665
        ]
      ],
      "group_id": null,
      "shape_type": "rectangle",
      "flags": {}
    },
    {
      "label": "text field",
      "points": [
        [
          57.732394366197184,
          1556.3380281690143
        ],
        [
          1383.0845070422536,
          1674.6478873239437
        ]
      ],
      "group_id": null,
      "shape_type": "rectangle",
      "flags": {}
    },
    {
      "label": "radio",
      "points": [
        [
          1286.4197530864196,
          1735.8024691358023
        ],
        [
          1370.9677419354837,
          1823.6559139784947
        ]
      ],
      "group_id": null,
      "shape_type": "rectangle",
      "flags": {}
    },
    {
      "label": "radio",
      "points": [
        [
          1285.8024691358023,
          1961.111111111111
        ],
        [
          1370.6403823178014,
          2045.3118279569899
        ]
      ],
cs

UI1.json



   UI1.jpg
   ./json/UI1.json
   
      roboflow.ai
   
   
      1440
      2560
      3
   
   0
         page control      Unspecified      0      0               646.8384074941451         1210.3044496487119         794.6135831381732         1230.679156908665                text field      Unspecified      0      0               57.732394366197184         1556.3380281690143         1383.0845070422536         1674.6478873239437                radio      Unspecified      0      0               1286.4197530864196         1735.8024691358023         1370.9677419354837         1823.6559139784947                radio      Unspecified      0      0               1285.8024691358023         1961.111111111111         1370.6403823178014         2045.3118279569899                radio      Unspecified      0      0               1286.4197530864196         2187.037037037037         1370.3703703703702         2269.135802469136                radio      Unspecified      0      0               1285.8024691358023         2409.876543209876         1369.2688172043006         2494.0000000000005

UI1.xml

{
  "version": "4.5.6",
  "flags": {},
  "shapes": [
    {
      "label": "text field",
      "points": [
        [
          77.77777777777777,
          160.49382716049382
        ],
        [
          1361.7283950617284,
          354.32098765432096
        ]
      ],
      "group_id": null,
      "shape_type": "rectangle",
      "flags": {}
    },
    {
      "label": "text field",
      "points": [
        [
          79.01234567901234,
          390.12345679012344
        ],
        [
          1363.4408602150536,
          586.0215053763441
        ]
      ],
      "group_id": null,
      "shape_type": "rectangle",
      "flags": {}
    },
    {
      "label": "text field",
      "points": [
        [
          75.83333333333334,
          620.8333333333334
        ],
        [
          1361.0294117647059,
          818.3823529411765
        ]
      ],
      "group_id": null,
      "shape_type": "rectangle",
      "flags": {}
    },
    {
      "label": "text field",
      "points": [
        [
          79.01234567901234,
          854.3209876543209
        ],
        [
          1364.1975308641975,
          1050.6172839506173
        ]
      ],
      "group_id": null,
      "shape_type": "rectangle",
      "flags": {}
    },

UI2.json



   UI2.jpg
   ./json/UI2.json
   
      roboflow.ai
   
   
      1440
      2560
      3
   
   0
   
      text field
      Unspecified
      0
      0
      
         77.77777777777777
         160.49382716049382
         1361.7283950617284
         354.32098765432096
      
   
   
      text field
      Unspecified
      0
      0
      
         79.01234567901234
         390.12345679012344
         1363.4408602150536
         586.0215053763441
      
   
   
      text field
      Unspecified
      0
      0
      
         75.83333333333334
         620.8333333333334
         1361.0294117647059
         818.3823529411765
      
   
   
      text field
      Unspecified
      0
      0
      
         79.01234567901234
         854.3209876543209
         1364.1975308641975
         1050.6172839506173
      
   
   
      button
      Unspecified
      0
      0
      
         77.77777777777777
         1118.5185185185185
         1361.7283950617284
         1298.7654320987654

UI2.xml

{
  "version": "4.5.6",
  "flags": {},
  "shapes": [
    {
      "label": "icon",
      "points": [
        [
          54.782608695652165,
          269.5652173913043
        ],
        [
          139.1304347826087,
          353.9130434782608
        ]
      ],
      "group_id": null,
      "shape_type": "rectangle",
      "flags": {}
    },
    {
      "label": "page control",
      "points": [
        [
          655.6291390728477,
          366.2251655629139
        ],
        [
          785.4304635761589,
          402.64900662251654
        ]
      ],
      "group_id": null,
      "shape_type": "rectangle",
      "flags": {}
    },
    {
      "label": "icon",
      "points": [
        [
          1151.3966480446927,
          1484.3575418994412
        ],
        [
          1240.782122905028,
          1573.1843575418993
        ]
      ],
      "group_id": null,
      "shape_type": "rectangle",
      "flags": {}
    },
    {
      "label": "icon",
      "points": [
        [
          1281.5642458100558,
          1484.9162011173185
        ],
        [
          1367.0391061452515,
          1567.5977653631285
        ]
      ],
      "group_id": null,
      "shape_type": "rectangle",
      "flags": {}
    },

UI3.json



   UI3.jpg
   ./json/UI3.json
   
      roboflow.ai
   
   
      1440
      2560
      3
   
   0
         icon      Unspecified      0      0               54.782608695652165         269.5652173913043         139.1304347826087         353.9130434782608                page control      Unspecified      0      0               655.6291390728477         366.2251655629139         785.4304635761589         402.64900662251654                icon      Unspecified      0      0               1151.3966480446927         1484.3575418994412         1240.782122905028         1573.1843575418993                icon      Unspecified      0      0               1281.5642458100558         1484.9162011173185         1367.0391061452515         1567.5977653631285                slider      Unspecified      0      0               59.11475409836066         1709.8360655737706         1382.4324324324325         1770.2702702702702                button      Unspecified      0      0               636.8159203980099         2086.567164179104         802.4875621890546         2252.238805970149                icon      Unspecified      0      0               967.6616915422884         2132.835820895522         1074.1293532338307         2201.9900497512435                icon      Unspecified      0      0               367.6616915422885         2134.328358208955         476.61691542288554         2201.9900497512435                button      Unspecified      0      0               1252.73631840796         2116.9154228855723         1346.7661691542287         2215.4228855721394                button      Unspecified      0      0               93.5323383084577         2115.92039800995         187.56218905472636         2214.9253731343283                icon      Unspecified      0      0               91.54228855721392         2312.9353233830843         190.04975124378106         2415.92039800995                icon      Unspecified      0      0               667.6616915422885         2310.4477611940297         773.6318407960198         2417.9104477611936                icon      Unspecified      0      0               1251.2437810945273         2311.9402985074626         1350.7462686567162         2413.930348258706

UI3.xml

활용분야

디자이너를 위한 AI Tool

CC BY-SA 

복사, 배포 및 재가공 또는 2차 저작물을 만들 수 있으며, 반드시 저작자 및 출처를 표기하고 동일한 라이센스를 적용해야합니다.
https://creativecommons.org/licenses/by-sa/3.0/deed.en

Close
Search

Hit enter to search or ESC to close