본문 바로가기

사전캠프(23.11.20~12.15)/UXUI 사전캠프 데일리 미션 - 3주차

[월]▸ UI/UX 디자인 아티클 스터디

12.04(월요일)

1️⃣

  1. 오늘의 아티클(주제) - UI
    UI 용어를 정리해야 하는 이유(https://brunch.co.kr/@tigrisdesign/2)
  2. 아티클 정보 요약(핵심) 
    팀 내, 타 부서와의 원활한 소통을 위해서 UI 용어 정리
  3. 인사이트(개념 1~3개) 
    용어들을 각자 쓰고 싶은대로 쓰거나, 의미를 잘못 이해하고 또 정확히 파악하기 어려운 경우가 종종 발생한다. 때문에 용어 정리를 정확히 짚고 넘어가면 좋다.
    원활한 소통을과 수정을 최소화 하기 위해 서로 알맞은 용어를 사용하자.

2️⃣

  1. 오늘의 아티클(주제) - UI
    UI 디자인 가이드 : 디자이너의 즐겨찾기(https://brunch.co.kr/@august9/345)
  2. 아티클 정보 요약(핵심) 
    디자이너를 위한 25가지 리소스 공유- 디자이너가 즐겨찾기에 추가할만한 것들!
  3. 인사이트(개념 1~3개)

    1. Magiceraser : 사진에서 지우고 싶은 부분을 몇 초만에 쉽게 제거
    2. Let's Enhance : 품질 저하 없이 이미지 해상도를 높이는 자동 AI 편집기
    3. Answer Socrates : Google에서 사람들이 물어보는 다양한 주제의 질문들을 찾아 볼 수 있는 사이트
    4. The Hive Index : 최고의 온라인 커뮤니티 찾기
    5. Automator : 한 번의 클릭으로 시간을 절약하는 Figma 작업을 위한 맞춤형 드래그앤드롭 자동화 구축
    6. Tri Confetti : 일일 목표를 기념하기 위한 습관 추적기
    7. Dark Mode Design : 최고의 다크 모드 웹사이트 및 툴 모음
    8. Who Can Use : 다양한 유형의 시각 장애를 가진 이용자가 우리 디자인을 어떻게 보는지 확인 할 수 있는 접근성 사이트
    9. SaaS Landing Page : SaaS 랜딩 페이지 레퍼런스
    10. Every Pixel : 50개의 주요 스톡 이미지 에이전시에서 검색
    11. Shortcuts : 검색 가능 하도록 모아둔 디자이너를 위한 모든 단축키
    12. Font in the wild : 다양한 타이포 조합 예제 모음(영문)
    13. Design Vault : 실제 제품의 UI 패턴 및 디자인 영감모음(해외)
    14. Type Scale : 몇 초 만에 폰트 가이드라인 만들기
    15. UI8 : 디자이너를 위한 마켓플레이스 (디자인 리소스, UI 키트, 와이어프레임, 아이콘 등)
    16. UXUI Monster : 웹 프로젝트를 위한 디자인 영감 모음
    17. Design System Reop : 자주 업데이트 되는 디자인시스템 예제, 아티클, 도구 및 대화 모음
    18. Gradienta : 멀티컬러 그라디언트모음 - CSS코드, JPG 다운로드, 오픈 소스
    19. User Stock : UI 목업, 프로토타입 등에서 아바타로 사용 가능한 프로필 사진 (무료)
    20. Drawer : 고품질 로티 애니메이션 마켓 (구매 및 판매)
    21. Snap Camera : Snapchat 렌즈 효과를 PC 및 Mac에서 라이브 스트림 및 비디오 채팅에 적용
    22. Design system for Figma : Figma를 위한 전세계 디자인 시스템 컬렉션
    23. Un tools : 문제해결, 의사 결정 및 시스템 이해에 도움이되는 사고 도구 및 프레임워크 모음
    24. UXArchive : 세계 최대의 모바일 유저 플로우 라이브러리
12.07(목요일)

1️⃣

  1. 오늘의 아티클(주제) - 피크마
    피그마의 컴포넌트 프로퍼티(Property)와 베리언트(variants) 사용법(https://ux.stories.pe.kr/329)
  2. 아티클 정보 요약(핵심) 
    피그마에서 가장 중요하고 이해가 필요한 것 3가지 - 컴포넌트 프로퍼티(Property), 베리언츠(Variants),오토레이아웃(Autolayout)
  3. 인사이트(개념 1~3개) 
    Property - 속성 : 인스턴스의 디자인 패널을 통해 미리 마스터 컴포넌트에 설정해 놓은 속성(property)을 선택 또는 입력으로 지정한 변형을 줄 수 있음.
    Variants - 변형 : 몇 개의 마스터 컴포넌트를 베리언츠로 하나로 묶어서 설정하며 인스턴스로 사용할 때 디자인 패널에서 그 중 하나를 선택하여 사용함.
    (마스터 컴포넌트를 생성하고 인스턴스를 복제하여 사용할 때 미리 세팅해 놓은 속성이나 베리언츠의 설정으로 인스턴스에 제한된 변형을 줄 수 있음. ex, 버튼의 on/off, 버튼의 위계 구분 등)

    [Component Property]
    하나의 컴포넌트에 3종류(Boolean, Instance swap, Text)의 프로퍼티가 있으며, 이 프로퍼티를 여러 번 사용하면서 여러 건의 프로퍼티를 만들 수 있음.

2️⃣

  1. 오늘의 아티클(주제) - UI

  2. 아티클 정보 요약(핵심) 

  3. 인사이트(개념 1~3개)
12.0(금요일)

1️⃣

  1. 오늘의 아티클(주제) - 피크마

  2. 아티클 정보 요약(핵심) 

  3. 인사이트(개념 1~3개) 

2️⃣

  1. 오늘의 아티클(주제) - UI

  2. 아티클 정보 요약(핵심) 

  3. 인사이트(개념 1~3개)