전체 글
![](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/dzPCO2/btsgD9uh5Hy/mr82ljFXUIowiDD8Iv1KO1/img.png)
![](https://tistory1.daumcdn.net/tistory/4951783/skin/images/no-image.jpg)
결론부터 말하자면 단연 피그마(Figma)라고 생각한다. 피그마 추종자로서 어떤 디자인을 하더라도 피그마를 먼저 켜서 작업한다. 아래와 같은 이유로, 기존에 있는 디자인 툴을 모두 제치고 피그마가 나에게 있어서 1위 디자인 툴이다. 1. 환경적 제약이 거의 없다 Adobe에서 운영하는 디자인 프로그램 같은 경우에는 다운로드가 필수이다. 하지만, 피그마는 웹 브라우저 기반 프로그램이기 때문에 언제 어디서나 컴퓨터를 바꿔가면서도 사용할 수 있다는 장점이 있다. 2. 실시간 저장이 가능하다 실시간 저장이 되기 때문에 일러스트, 포토샵, 스케치업 등과 같이 무거운 프로그램을 쓰다가 작동이 멈추고 저장하지 못하는 불상사는 생기지 않는다. 3. 제공하는 무료 서비스만으로도 충분하다 회사 프로젝트를 진행하는 정도로 ..
![](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/bycHD7/btsgsSl68cL/eMk2M1Fk4QKir5Pf9uZXIK/img.png)
![](https://tistory1.daumcdn.net/tistory/4951783/skin/images/no-image.jpg)
User Journey Map이란? 사용자가 과업을 수행하는 동안 하는 행동, 느끼는 감정 그리고, 상호작용하는 접점을 시간순서로 정의한 것. 사용자 여정 지도를 통해 알 수 있는 것 사용 동기(Motivations) 시작 점(User Approach) 행동(Action) 감정(Emotions) 도구(What they use for) 시간(Time and Sequence) 사용자 여정 지도의 활용 팀원 및 이해관계자들(Stakeholders)의 공통된 이해를 돕는다. 디자인 의사결정의 주요 기준이 된다. 기회 요인(Opportunity)과 문제점(Problem)을 도찰할 수 있고 특히 선후관계를 파악할 수 있다. 사용자가 우리 제품을 어떻게 수용하고 있는지 쉽게 파악할 수 있다. 타 부서와의 협업에 매우..
![](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/bucs4N/btsguLF8yG3/bL5l0e33n5CLqAF2HIODIk/img.png)
![](https://tistory1.daumcdn.net/tistory/4951783/skin/images/no-image.jpg)
![](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/t1E4Z/btsgvBXAZmX/oJGUmCt3zMH8mTSNtzHQ80/img.png)
![](https://tistory1.daumcdn.net/tistory/4951783/skin/images/no-image.jpg)
3주차 과제가 나왔다. 2주차에 진행했던 유저 리서치 수행계획서 작성에 이어서 유저 리서치를 완료 후, 유저 리서치 결과 보고서를 작성하여 제출하는 것이다. 우리 조는 빠르게 진도를 빼는 팀원들 덕분에 서베이를 2주 차에 완료하였고, 화요일에 각자 벤치마킹할 앱 3개씩을 정했다. 슬랙을 늦게 확인해서 나를 제외한 팀원들이 전부 벤치마킹할 어플을 정한 상태였다. 국내 스트리밍 어플이 생각보다 많지 않았기 때문에, 남은 선택지는 이제는 비주류로 되어버린 어플뿐이었다. 생각을 달리 해서 한국과 달리 미국 스트리밍 어플은 어마어마한 사용자들을 가지고 있기 때문에, 벤치마킹할 요소가 충분히 있을 것이라고 생각해서 아래의 세 개의 어플을 벤치마킹 계획을 짰다. Tidal Pandora Radio Amazon Mus..
![](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/b2zxX5/btsgtBj4W8J/Bp7kei0eLvSoV1vBt2g0Z1/img.png)
![](https://tistory1.daumcdn.net/tistory/4951783/skin/images/no-image.jpg)
![](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/cd31Sn/btsgttNajnh/Kuqop20e03SK0rnkbTJKyK/img.png)
![](https://tistory1.daumcdn.net/tistory/4951783/skin/images/no-image.jpg)
제로베이스 UIUX 디자인 스쿨을 선택한 가장 큰 이유는 4개월 만에 이론, 그룹 프로젝트, 포트폴리오까지 100% 온라인으로 완성할 수 있기 때문이다. 회사를 다니면서 오프라인 강의를 참여하기에는 어려움이 있었고, 20대 후반인 나이로 시각디자인학과를 졸업하기가 마땅치 않았다. 현재 조건으로 이론과 실습을 6개월이 되지 않는 기간으로 압축해서 배울 수 있는 곳을 찾다가 가장 이상적으로 부합한 곳이 제로베이스 UIUX 디자인 스쿨이었다. 제로베이스 UIUX 디자인 스쿨 커리큘럼을 보면, 1주 차부터 포트폴리오를 진행하는 게 아니라, 9주 차까지 온라인 강의를 통해 UIUX 이론과 실습을 진행할 수 있기 때문에 이론이 부족한 나에게 가뭄의 단비 같았다. 타 프론트엔드 부트캠프를 진행했을 때는 이론을 진행하..
![](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/V2sUT/btsguhSYcLE/eqc3KbaA38BWkAXCRxYgOK/img.png)
![](https://tistory1.daumcdn.net/tistory/4951783/skin/images/no-image.jpg)
UI (User Interface) 디자인은 사용자가 디지털 제품이나 서비스와 상호작용할 때 직접적으로 다루는 인터페이스 디자인이다. 이는 버튼, 폼, 아이콘 등과 같은 인터랙티브한 요소들을 포함한다. UI 디자인은 쉽게 이해하고 사용할 수 있는 인터페이스를 제공하여 사용자가 제품이나 서비스를 효과적으로 이용할 수 있도록 한다. UX (User Experience) 디자인은 사용자가 제품이나 서비스를 사용하는 과정에서 느끼는 모든 경험을 포괄하는 디자인이다. 이는 사용자가 제품이나 서비스를 처음 접하는 단계부터 끝까지 모든 경험을 고려한다. UX 디자인은 사용자가 원하는 결과를 얻을 수 있도록 사용자의 요구와 선호를 고려하여 제품이나 서비스의 기능과 디자인을 개선한다. 이는 UI 디자인과 함께 제품이나 ..
![](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/epqqcF/btsgtAk9VHd/rv8I3nKzzkY3ZX8JpQMWHk/img.png)
![](https://tistory1.daumcdn.net/tistory/4951783/skin/images/no-image.jpg)
프론트엔드 개발자에서 UI/UX 디자이너로... 피그마를 오랜만에 켜보았다. 타 플랫폼에서 프론트엔드 부트캠프를 수료하고 프론트엔드 개발자로 취업에 성공했었지만, 디자이너로써 큰 성장을 이루고 싶은 마음에 결국 다시 이 길을 걷기로 마음먹었다. 높은 연봉을 포기하고, 박봉인 직업을 나열했을 때 절대 빠지지 않는 디자인 업계로 다시 돌아가는 것을 주변에게 알렸고 다들 많이 아쉬워했다. 지난 몇 개월 동안 나를 돌아봤을 때, 나는 무엇을 할 때 가장 큰 즐거움을 느꼈을까에 대한 답은 디자인이였다. 화면을 구상하고 유저 인터렉션을 고민할 때 필요이상으로 몰입한 나를 볼 수 있었고, 단지 연봉이 낮다는 이유만으로 애써 무시하고 있었다. 이제는 가장 의욕적으로 하고 싶은 것을 할 때가 되지 않았나 하고 이 길을 ..
![](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/PMwbQ/btrIADHKHrK/gIq9Ixo1KtlnmIpkxYFzwk/img.png)
![](https://tistory1.daumcdn.net/tistory/4951783/skin/images/no-image.jpg)
컴포넌트의 데이터 관리 ⇒ 상태 관리 컴포넌트가 가지고 있는 데이터 ⇒ props와 state props와 state는 따지고 보면 둘 다 일반 자바스크립트의 객체이다. 그런데 렌더링 결과물에 영향을 주는 데이터를 가지고 있다. props Component가 부모 Component로부터 받아온 데이터이다. 읽기 전용이라 props는 절대 수정하면 안 된다. props는 순수 함수처럼 동작해야 한다. state Component가 가지고 있는 데이터이며 내부에서 바뀔 수 있는 값이다. 함수형 컴포넌트는 useState() 훅을 사용해서 상태 값을 가질 수 있다. state는 직접 수정하면 안 된다. state는 비동기적으로 업데이트된다. 리렌더링 발생조건 1. State(상태) 변경이 있을 때 2. 새로운..