[유데미X스나이퍼팩토리] UI/UX 포트폴리오 과정 2WEEK

2021.07.08 6일차 - 오토레이아웃

오토레이아웃의 기능은 자동으로 간격으로 주고 블록 단위로 조합할 수 있다는 것이다. 

어디에 간격을 주고, 어디에 묶을지 고려해서 덩어리를 나눈다.

블록 단위 조합

마진

 오토레이아웃의 중요한 개념은 허그와 컨테이너이다. 컨테이너는 상대적으로 밖에 있는 요소를

의미하고 상대적으로 안쪽에 있는 요소는 컨텐츠라고 한다. 허그는 컨텐츠를 안고 가는 개념이기 때문에 가장 안쪽에 있는 컨텐츠는 허그를 사용할 수 없다. 오토레이아웃 리사이징으로 허그를 통해 컨텐츠가 크기가 늘어남에 따라 함께 늘어난다. 

 

 

 

 

2021.07.09 7일차 - 프로토타입

 오른쪽에 있는 프로토타입을 선택하여 인터렉션을 추가하여 프레임, 요소 등에 Action을 준다. 주로 On click과 On drag를 사용했다.

On click : 클릭
On drag : 드래그, 스와이프
While hovering : 마우스가 올라가 있는 동안
While pressing : 마우스를 누르고 있는 동안
Mouse enter : 마우스가 올라갈 때
Mouse leave : 마우스가 나갈 때
Touch down : 누를 때
Touch up : 뗄 때

Flow starting piont : 재생 시 첫 지점
smart animate : 자연스러운 전환
Open overlay : 오버레이 열기
Move in/out : 나타나는 방향

 

 

 

 

 

 

2021.07.10 8일차 - 와이어프레임&프로토타입

 개선해야 할 CGV 앱에 대한 와이어프레임을 제작하였다. 우리 팀이 개선해야 할 부분인 메인 홈, 영화예매, 팝콘 구매, 더보기 페이지와 그에 해당하는 상세페이지에 대한 와이어프레임을 제작했고, 이를 바탕으로 개선된 UI 디자인 제작을 진행했다. 

 

 

 

 

2021.07.11 9일차 - 프로토타입&피피티

 어제에 이어 개선될 UI 디자인을 제작했고 시연할 수 있도록 프로토타입을 제작하였고, 피그마에 발표에 사용할 프레젠테이션도 함께 제작하였다.

 

 

 

 

2021.07.12 10일차 - 발표&프로젝트 설명

 같은 팀 팀원이 최종 발표자의 역할을 맡아 발표를 하였다. 어제 또 다른 한 팀원과 함께 발표 대본을 작성하였는데, 발표를 맡은 팀원 분이 어색하게 넘어가는 문장과 내용이 있어 당황했다는 말을 들었지만 잘 마무리하여 발표 중 표가 나지 않아서 다행이었다.

 2주 간의 짧은 시간이었지만 잘 마무리하게 된 것 같아 안심이 되었고, 실무 프로젝트에 대한 사전 교육이 된 것 같아서 앞으로의 프로젝트에서 잘 할 수 있을 것이라고 생각한다.

 

 

웅진씽크빅 x 유데미 웹사이트 리뉴얼 프로젝트 

 나는 두 가지 프로젝트 중 웅진씽크빅에서 하는 유데미 웹사이트 리뉴얼 프로젝트 선택했다. 웹사이트 리뉴얼 프로젝트는 4주의 프로젝트 기간 동안 유데이 큐레이션 이벤트 리스트 페이지와 유데미 부트캠프 지원자 모집 상세페이지를 개선하는 과정 2가지 주제로 진행한다.
 유데미를 사용해 본 것은 아니지만 타 사의 성인용 학습 플랫폼을 사용해 봤기 때문에, 기획 및 디자인 하는 사람 뿐만이 아니라 사용자라고 생각했기 때문에 그 결험을 잘 살릴 수 있을 것이라고 생각한다. 또한 기존에 있는 플랫폼을 개선하는 주제이기 때문에 현업의 경험을 느낄 수 있고  프로젝트 기획자의 역량을 키울 수 있을 것이다.

 

 

 

 

---

 

1. 이번주 수업에서 좋았던 점은?

• 오토레이아웃에 대한 어려움이 있었는데 블록 단위로 나눠서 묶어야 한다는 점과 허그의 개념을 통해 더 잘 다룰 수 있게 되어 좋았다. 
• 개선안을 만들기 전 와이어프레임을 만들어서 개선안과 비교할 수 있어 좋았다.

 

2. 이번주에 새롭게 배운 점은?

• 프로토타입을 통해 피그마로 만든 UI를 시연할 수 있었다.

 

3. 배운 것에 관해서 내가 부족했던 부분은?

• 오토레이아웃, 그룹화, 컴포넌트 등 배웠던 것들을 사용하는 것보다 일일이 다 제작하여 중복되는 과정이 있었던 것 같다. 이를 잘 활용하여 효율적으로 제작할 수 있도록 해야겠다.

 

4. 앞으로 뭘 더 하면 좋을까? 

• 이어서 실무 프로젝트를 진행해 나갈 예정인데, 지금까지 배웠던 내용과 배움 속에서 내가 잘 할 수 있는 부분을 이용하여 프로젝트를 잘 마무리할 것이다. 
• 프로젝트를 하면서 제작할 포트폴리오를 잘 활용할 수 있도록 열심히 하고 잘 정리 해야겠다.