공부

Figma 챕터를 마무리하며 (~Day21 까지)

정말 정신없는 2주가 흘러갔다.배운 내용을 복습 포스트로 꾸준히 올리고 싶었는데, 생각보다 쉽지 않았다. 피그마에는 아직 모르는 기능이 많았고, 컴포넌트 구조를 잡거나 레이어 순서를 정리하다 보면 예상보다 시간이 훨씬 오래 걸렸다.와이어프레임은 비교적 빠르게 그릴 수 있었지만, 디자인 작업으로 들어가니 툴을 더 깊게 이해해야 하는 순간이 많았다. 화면을 예쁘게 만드는 것만으로는 부족했고, 나중에 수정하기 쉬운 구조를 만드는 일까지 함께 고민해야 했다.배웠던 이론들은 시간이 날 때 차차 정리해볼 예정이다. 이번 글에서는 우선 새롭게 알게 된 점과 아직 어려웠던 부분을 기록해보려고 한다.1. 새롭게 알게 된 점이번 과정에서 가장 기억에 남는 건 컴포넌트와 인스턴스를 구조적으로 사용하는 방법이었다.Botto..

오즈코딩스쿨의 15일차~16일차 수업을 뒤이어 리뷰한다.배운 순서가 조금 달라서, 통합 리뷰를 하고자 한다. 15~16일차1. 컴포넌트- 메인 컴포넌트와 인스턴스- 프로퍼티의 정의, 종류, 사용법- Figma의 여러 Tip / 주의사항2. 인스턴스 스왑3. Varients (다음 회차에) 메인 컴포넌트와 인스턴스컴포넌트에서 가장 중요한 관계는 Main Component와 Instance의 관계다.- Main component : 원본. 수정 시 연결된 디자인이 함께 변경 된다.- Instance : 원본 컴포넌트를 복사해서 사용하는 요소 작업 속도를 높이고, 일관성 있는 디자인을 만들 수 있다. 컴포넌트를 사용해 실습을 해보았다.여기에서 Constraints 기능을 사용해, 위에 떠있는 팝업을..

오즈코딩스쿨 14, 15일차 리뷰디자인의 4단계 피라미드에 대해 배우고, foundation / variables를 피그마에 직접 적용해보며,마지막으로는 브랜드들의 디자인 시스템마다의 특징을 스스로 분석해보는 시간을 가졌다. 14일차 : 디자인 Foundation, Variables 디자인 파운데이션Design Foundation 디자인 파운데이션은 MVP project 과정 중 UXUI 설계에 해당한다. I. 문제정의- 시장조사- 사용자 리서치- 페인 포인트 도출 II. 아이디어 도출- 브레인스토밍- 개발 우선순위 선정 (mvp 기능 도출) III. UXUI 설계- DESIGN FOUNDATION- 프로토타입 설계 IV. 개발 / QAV. 배포VI. 데이터 검증, 개선 Design Fo..

오즈코딩스쿨의 13일차 수업 리뷰아직 피그마 기초를 다루는 시간이다! Auto Layout 사용해서 반응형 디자인 실습해보기 새롭게 배운 점 (from Grid 실습)- 이미지 내부 설정이 Crop 이 아닌 Fill로 되어 있어야 반응형에 들어갔을 때 자동으로 정렬이 된다. - 그리드에서 오른쪽의 콘텐츠 자동정렬을 해제해야 원하는 대로 디자인을 배열할 수 있다.- 최대 / 최소 넓이를 지정했을 때 반응 새롭게 배운 점 (from Auto layout 실습)- 내부의 Gap은 Auto로, 프레임은 Fill(가로의 경우 w를 Fill, 세로의 경우 h을 fill)로 설정해야 반응형을 했을 때 제대로 늘어난다. Figma Constraints프레임 크기가 달라질 때, 레이어가 어느 방향을 기준으로 유지되..

오즈코딩스쿨의 11~12일차 리뷰를 작성해보고자 한다. 11일차 -- IA/유저플로우/와이어플로우 -- Grid & Spacing Rule-- 와이어프레임의 역할 더블 다이아몬드 프로세스 현업에서 가장 많이 쓰는 더블 다이아몬드 프로세스를 배우면서 시작했다.이전에 리메인커리어에서 프로젝트를 진행했을 때에도, 동일한 방식으로 개인 프로젝트를 진행해본 경험이 있다. Discover(발견) -- 데스크리서치에 해당한다. [발산] 방안) SWOT, BM 분석, 경쟁사 조사, 시장현황 파악, VOC(Voice of Customers) 수집, 오픈 서베이, 기사 자료, 정량(Surver), 정성(IDI) Define(도출) -- 문제상황 > 인사이트를 도출한다. [수렴] 방안) 핵심타겟 정의 / Per..

오즈코딩스쿨의 10일차 수업 중 배웠던 UI 화면 요소 관련 내용만 따로 정리해보고자 한다. 탐색 & 이동 UI사용자가 '지금 어디에 있는지, 다음에 어디로 갈지' 이해하게 만드는 요소들 브레드크럼-- 현재 위치를 단계적으로 이해하게 만드는 경로 표시 요소 페이지네이션-- 긴 목록을 여러 페이지로 나눠서 보여줄 때, 현재 위치와 다음 이동 범위를 알려주는 요소 인피니티 스크롤-- 아래로 스크롤할수록 콘텐츠가 계속 자동으로 로드되는 방식 메뉴-- 여러 기능을 모아 보여주는 메뉴 아이콘 패턴 (벤토 메뉴, 햄버거 메뉴, 미트볼 메뉴 ... ) 입력 & 선택 UI 사용자가 입력, 선택, 상태 변경을 하는 interaction 요소 검색 필드 = Search Field (서치 필드)-- 내비게이션이 길어..

캠프를 시작하기 전에는 전공에서 배웠던 디자인 이론을 다시 복습하는 시간이 되지 않을까 생각했다. 디자인 이론을 다시 점검하고, 정해진 커리큘럼 안에서 꾸준히 케어를 받는 정도로 기대하고 있었다.그런데 막상 수업을 들어보니 예상보다 실습의 비중이 컸다. 개념을 듣고 바로 과제로 적용해보는 시간이 많았고, 피드백을 받으면서 내가 놓친 부분을 확인할 수 있었다. 혼자 책을 읽거나 자료를 찾아보며 공부할 때와는 달랐다. 같은 내용을 배우더라도 직접 만들어보고 수정하는 과정이 있으니 훨씬 오래 기억에 남았다. 수업 중 인상 깊었던 부분은 AI를 사용할 때의 접근 방식이었다. 이전에는 AI에게 원하는 내용을 한 번에 요청하고 결과를 받아보는 식으로 사용했다면, 수업에서는 사고 과정을 단계별로 나누어 정리하는 방..

오즈코딩스쿨의 7일차 교육 리뷰 오늘 앞전 시간에는 Suno AI를 이용해 영화씬에 어울리는 음악을 생성해보고, 프로필 사진 제작을 해보았다.두번째 시간부터 디자인 이론과 심리학에 대해 배워보았다.오늘 배운 이론의 내용이 그렇게 많지는 않아서, 간단한 정리로 마칠 수 있을 것 같다. 근접성의 원리-- 가까이에 있는 것들은 그룹으로 보인다.-- 관련 있는 정보는 가까이, 관련 없는 정보는 멀리 배치한다. 유사성의 원리-- 비슷하게 생긴 것들은 같은 그룹으로 보인다.-- 같은 기능은 같은 디자인, 같은 카테고리는 같은 색상 / 일관성을 유지한다. 연속성의 원리-- 시선이 자연스럽게 흐르는 방향으로 요소들을 연결해서 본다.-- 수평/수직 메뉴 구조, 탭 디자인, 타임라인 등 폐쇄성의 원리-- 불완전..

도입 -- 오즈코딩스쿨의 프로덕트 디자이너 부트캠프 과정 6일차 수강 후기 수업을 수강한지 어느덧 6일차이다.점점 수업 시간에 필기를 하면서 겸사겸사 블로그를 쓰기가 어려워지는 것 같다.그만큼 배울 내용도, 팔로업할 내용도 많아서 스스로 탐색 해본 뒤 소감을 적어올리게 되는 것 같다...ㅎㅎ . . . 부트캠프를 시작하기 전에, 초반의 내용이 너무 많이 겹치면 어떡하나 걱정이 앞섰었는데, 오히려 내가 약하다고 생각하는 디자인에 대한 기초 지식이나, ai를 다루는 시간들이 꽤 많아서 약점 보완을 독톡히 하는 것 같다. 다방면으로 공부할 게 많은 IT 업계에서 살아남기 위해, 계속해서 열심히 수강 하고싶다는 생각이 들었다. ㅎㅎ 부트캠프들을 여럿 볼 때, UX 이론을 먼저 가르쳐주는 곳이 있었고, 디자인 ..

AI를 업무에 광범위하게 활용하는 법에 대해서 배웠다. 1. 클라이언트의 말 해석하기 가장 먼저 디자인 지식이 없는 클라이언트로부터 요청을 받았을 때, AI를 활용하는 법에 대한 프롬프트를 몇 개 공유해주셨다.디자인에 대한 지식이 부족한 클라이언트라면 흔히 할 수 있는 모순된 말의 의도를 해석하거나, 모순된 단어쌍을 미리 받아보는 시도 등을 해볼 수 있었다. 포스터 제작을 맡았는데 클라이언트로부터 이런 요청이 들어왔어. 이걸 어떻게 해야 할까? 해석의 방향 5가지를 제안하고 가장 가능성 있는 안을 근거와 함께 1개만 추천해 줘. 또한 그 안과 비슷한 예시 이미지를 pinterest 링크로 첨부해 줘"브랜드 포스터를 화려한데 심플하게 제작해 주세요"디자인 실무에서 클라이언트가 자주 요청하는 상반되는 느낌을..