MYOWN - 나만의 것을 직업으로!

업무 내용 개괄

  1. 사내에 통일되지 않은 Look & Feel을 가진 웹 서비스가 다수 존재
  2. 디자인 시스템 기획 프로젝트를 본인 주도하에 착수함
  3. 디자이너와 함께 디자인 시스템 리서치와 레거시 프로젝트 리뷰를 진행함
  4. 다음과 같은 항목이 디자인 시스템 초안에 포함됨
    1. 컬러 팔레트
      • 브랜드 컬러 4색
      • 포인트 컬러 2색 (선과 면)
      • Positive, Negative 2색
      • 무채색 2색
      • 기초색 7가지(Red ~ Purple)에 대한 밝기 10가지(50~900) 총 70색 팔레트
    2. 폰트 스타일 (사이즈, 굵기, 스타일)
      • 데스크탑용 용도별 폰트 스타일 (제목 5종, 부제 1종, 본문 3종, 버튼 1종, 캡션 2종)
      • 모바일용 용도별 폰트 스타일 (동일)
    3. 스페이싱, 그리드
      • 0, 1, 2, 4, 8, 8의 배수 픽셀의 스페이싱
      • 데스크탑 12컬럼, 거터 20px
      • 모바일 4컬럼, 거터 8px
    4. 아이콘, 그래픽 에셋
      • 평소에 사용하던 아이콘들을 정리하여 stoke only와 fill only 두가지 스타일 검색 가능하게 Notion DB에 정리
      • 지금까지 사용된 그래픽 에셋들을 아카이빙하여 검색 가능하게 Notion DB에 정리
    5. 기본 컴포넌트
      • Button 4종 (Default, Primary, Negative, Dead)
      • Panel 2종 (Default, Selected)
        • 클릭시 선택되는 박스
      • Select
      • Tag 4종 (Default, Primary, Negative, Dead)
        • 박스 내부에 텍스트가 있음
        • 각 컬러 바리에이션마다 일반과 close button(x)이 있는 바리에이션 2종이 있음
      • Text Input
      • Textarea
      • Date Picker
      • Checkbox
    6. 조합 컴포넌트
      • Multi-Select
        • Select와 동일하나, 다중 선택이 가능하고 선택된 선택지의 리스트가 Tag로 하단에 표시됨
      • Select Group
        • 상위 Select에 선택된 값에 따라 하위 Select의 선택지가 변경되는 Filter 기능이 있는 Select
      • 등
  5. 디자인 시스템 초안을 적용하여 자사 메인홈페이지를 수정함

기술 스택

Design Tools

Langs

Front-end