STUDY

WIL : Weekly I Learned지난 일주일을 돌아봄으로써 나의 현재 상태를 파악하고더 나은 다음 주를 만들기 위해 어떤 부분을 어떻게 채워나갈지 고민하는 것 FACTS(사실, 객관) : 이번 일주일 동안 있었던 일, 내가 한 일 - 본격적으로 피그마의 용어들과 컴포넌트를 제작하는 단계에 진입했다.- 강의 All완강- 아티클 스터디(4개)- 개인퀘스트(JD파악 및 내 핵심역량, 관심분야 찾기) 및, 실전연습(컴포넌트 만들기, 클론디자인)FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌 내가 하고 싶은 것이 뭘까🤔리서치를 하면 할수록 BX는 참 포지션이 적다고 느껴진다.실무경험이 많은 UI디자이너가 할 수 있는 영역이고, 그렇다고 브랜드디자인만 하자니 업무 범위가 너무 광활하고..아무래..

아티클 스터디https://gogumafarm.kr/%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88%EC%9D%98-ux%EC%B0%B8%EA%B3%A0%EC%84%9C-%EB%93%80%EC%98%A4%EB%A7%81%EA%B3%A0-%EC%A0%84%EA%B2%A9-%ED%95%B4%EB%B6%80%ED%95%98%EA%B8%B0/ 디자이너의 UX참고서, 듀오링고 전격 해부하기 | 고구마팜듀오링고로 언어 공부도 하고 디자인 공부도 한다던데...?gogumafarm.kr   [주제]듀오링고 전격 해부 [아티클 요약]몰입도를 높이는 UI, UX장벽 낮추기→ 각지고 딱딱하며, 자잘한 요소를 제거하여 사용자의 긴장 해소: Gamipication: 게임을 모방한 UI, 동글동글 귀엽고 쉬운 ..

[강의]체계적으로 배우는 피그마 기초 완전 정복 5주차6~10강 프로토타입디지털 제품에서 실제 제품 만들기 전, 테스트하는 것구현 정도에 따른 단계1)Lo-fi(Low-fidelity)낮은 단계의 프로토타입, 전체 흐름을 맞춰볼 수 있는 수준. ex)와이어프레임2)Hi-fi(High-fidelity)실제 제품과 거의 유사한 수준의 프로토타입->프로토파이 활용하는 편프로토타입을 만드는 이유1)제품 출시 전 발생할 이슈에 대해 사전 예방이 가능.아이디어와 컨셉을 실제 제품처럼 테스트해보고 결정에 도움. 시제품과 유사한 프로토타입은 사용자 대상 피드백 수집 도구로 사용 가능2)팀 구성원과 시각 결과물로 효과적으로 소통 가능3)기획단계에서 생각하지 못한 부분이나, 사용자 시나리오를 통해 나은 방향으로 수정 가능..

[강의]체계적으로 배우는 피그마 기초 완전 정복 4주차 6~8강[강의]체계적으로 배우는 피그마 기초 완전 정복 5주차 1~5강 텍스트 프로퍼티합성 컴포넌트- 바텀시트, 다이얼로그, 리스트, 카드, 탭 등 복잡한 구조등이 있음- 네스티드(Nested) 인스턴스'감싼'이라는 뜻. 다른 컴포넌트들이 안에 들어있다는 뜻팝업같은 것을 떠올리면 됨상위 컴포넌트: 팝업 창 / 하위 컴포넌트: 팝업 내 버튼탭 컴포넌트: 네비게이션 컴포넌트로, 현재 화면을 전환한다.(라벨+인디케이터) *셀렉된 것/비셀렉된 것 구분 가시화 중요■Hero section:앱 메인화면에서 가장 상단, 잘 보이는 영역■App bar:앱 상단 고정 바.:현재 화면의 이름을 알려주면서, 이전 화면으로 돌아갈 수 있게 해줌. :현재 화면의 보정 기능..

[아티클 스터디]https://techblog.gccompany.co.kr/%EC%97%AC%EA%B8%B0%EC%96%B4%EB%95%8C-%ED%8D%BC%EC%86%8C%EB%82%98%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%A7%8C%EB%93%A4%EC%96%B4%EC%A1%8C%EC%9D%84%EA%B9%8C-3c299cff3bc0 여기어때 퍼소나는 어떻게 만들어졌을까?글. 정혜수(Riley) / UX Researchertechblog.gccompany.co.kr  [주제]여기어때의 퍼소나 제작기 [아티클 요약]퍼소나(Persona)란?특정 제품이나 서비스를 사용할 다양한 사용자를 실제로 관찰해서 얻은 정보를 바탕으로 만드는 전략적 가상의 인물 -’새로운 디자..

WIL : Weekly I Learned지난 일주일을 돌아봄으로써 나의 현재 상태를 파악하고더 나은 다음 주를 만들기 위해 어떤 부분을 어떻게 채워나갈지 고민하는 것 FACTS(사실, 객관) : 이번 일주일 동안 있었던 일, 내가 한 일 - 본격적으로 피그마의 용어들과 컴포넌트를 제작하는 단계에 진입했다.- 강의 2, 3주차 완강- 아티클 스터디(3개)- 개인퀘스트(JD파악 및 내 핵심역량, 관심분야 찾기)FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌 프로덕트를 만드는 사람들은 이렇구나🤔프로덕트 디자인 외 기타 유사 업무들의 JD를 서치 및 스터디한게 업무 파악이 많이 되었다.다만 어느 업무나 그렇듯..업무가 중첩되거나, 하나의 포지션에서 여러가지 직무를 맡고 있는 경우가 대부분이다.토스..

[강의]체계적으로 배우는 피그마 기초 완전 정복 3주차6-10강 디자인 시스템UI자체 뿐만이 아니라 UI의 규격, 스펙, 용례, 주의사항등에 대한 종합적인 제품 가이드라인[이를 만들기 위한 필요역량]- 만들고자 하는 제품 전체를 관통하는 통찰력, 집중력- UI에 대한 깊은 이해: 확장성 있게, 코드 구조에 영향을 주지 않도록- 코드에 대한 이해가 어느정도 필요- 이를 플랫폼 디자이너라 함- UI를 목적에 맞게 잘 설계하고 가이드라인을 만들어야 함- 경력자가 제작해야 효율적 디자인 시스템이 만들어짐* UI키트 수준이어도 무조건 나쁜건 아니다.* 적은 인원에 소통이 원활한 조직은 오히려 문서화가 비효율적팀과 제품의 발전 단계에 따라 UI가이드 or 디자인시스템 취사 선택할 것[디자인 시스템의 장단점]장점1)..

https://brunch.co.kr/@yonniek/15 목록에서 상세 정보를 얼마나 보여주는 게 좋을까?커머스 목록 UX의 유용성과 혼란 사이 균형 잡기 | 기획을 고민하다 보면 무엇도 더하지 않고 단순함을 추구할지, 복잡함의 길로 갈 것인지 두 갈래 선택 앞에 서서 갈등하게 되는 순간이 반드시brunch.co.kr  [주제]커머스 서비스를 기획할 때에 보여지는 좋은 목록 UX에 대하여(*모바일 커머스 사례를 중심으로)[아티클 요약]혼란스럽지 않은 것이 중요!: 단순함과 복잡함은 옵션이지, 더 나쁘거나 좋은 것이 아니다.복잡함을 다루는 방법서비스 특성을 고려목적형: 필요 정보, 설명 목적 지향 (예시: 검색을 통해 물품을 구매하는 쿠팡)검색, 필터, 정렬 기능 활용상품 상세 확인 시에 상세 페이지로 ..

[강의]체계적으로 배우는 피그마 기초 완전 정복 3주차1-5강 파운데이션- 색상(Color)- 서체(Font, Typography)- 간격, 여백(Spacing, Gap)- 곡률(Radius)- 그리드(Grid)- 고도(Elevation)- 아이콘(Icon)1.컬러컬러 스타일 만들기1) 기본 2~3컬러 지정2) 해당 색상을 HSL값을 조정하여 총 10단계로 나눔3) 이후, 기본 컬러(White & Black)을 만들고, 회색 색상을 골라 10단계 설정 피그마 내 Foundation(Coolors, Styler) 참고*Plug-in으로 Cooler, Styler 사용함 컬러 비율 1:3:6법칙- Primary / Secondary / Background의 비율을 1:3:6으로2.폰트 스타일[!]여러가지 폰..

[강의]체계적으로 배우는 피그마 기초 완전 정복 2주차5-7강 Frame & ConstraintConstraint- 제약(조건), 제한이라는 뜻- Auto-layout을 정말 자동 레이아웃으로 만들어주는 기능으로,   오토레이아웃 '내'의 개체들이 움직이는 방식을 제한한다는 뜻(오토레이아웃 X)  (Parent Container 크기가 변할 때, Child Container는 어디를 기준으로 변할지 정함)*오토레이아웃은 그 자체로도 이미 레이아웃을 자동으로 쌓을 수 있음.*하지만 반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 대 규칙을 만들어줘야 함.- 옵션 설명(★★★★★)-주요 기능이니 꼭 실습 여러번 할 것  1)Left/Right: 도형의 형태는 변경..