UIUX 디자인 공부 4주차 학습일지 01
보여지는 것의 중요함
들어가는 말.
분명 뇌내 시뮬레이션은 완벽했는데 손은 따라주지 않는 경우들이 빈번하게 존재한다. 드로잉이나 작문, 디자인 등이 있다. 오늘은 영상 편집이었다.
나는 팀의 발표를 맡아 스크립트 제작과 녹음, 녹화 및 영상 편집을 담당하게 되었다. 호기롭게 '발표하겠습니다'라고 했지만 내가 지금까지 했던 발표는 녹화가 아닌, 라이브였다. 그러니까 나는 '현장에서' '그럴 듯하게' 말하는 것은 할 수 있었으나, 각을 잡고 스크립트를 써서 녹음하고 영상을 편집하는 건 처음이었기 때문에 후회를 많이 했다.
사실 조원 분들이 매우 고생해주셨는데 이 발표 하나 때문에 그간의 고생이 폄하될까봐 매우 걱정된다. 그래도... 내용은 좋으니 제발 다들 봐주시길 바란다.(디자이너 지망생이 할 말은 아닌 것 같다)
오늘의 DONE LIST
1. 제로베이스 4주차 개인 과제 01
1) 커머스 카테고리 페이지 수집
2) 커머스 카테고리 페이지 컴포넌트 분류
2. 제로베이스 그룹 과제 1 진행
1) 발표 스크립트 녹음
2) 발표 영상 편집
3. 제로베이스 UI 디자인 강의 수강
1) 디자인 환경
2) 레이아웃과 그리드 시스템 1
3) 레이아웃과 그리드 시스템 2
4) 컬러 시스템
1. 제로베이스 4주차 개인 과제 01
일단 이 과제에는 난관이 두 개 있었다.
1. 제로베이스에서 예시로 보여준 카테고리 화면의 기준이 애매하다.
: 나만 그랬을 수도 있는데, 예시로 올려놓은 화면이 전체 카테고리 페이지가 아닌, 특정 카테고리에 진입했을 때 페이지였다. 한 마디로 상위 카테고리에 진입했을 때 나타나는 페이지. 내가 생각한 카테고리 페이지는 햄버거 메뉴를 눌렀을 때 뜨는, 카테고리가 테이블 UI로 정리된 페이지였는데 제로베이스 예시는 완전히 달라 헷갈렸다. 그래서 구글링도 해보고, 드리블도 뒤져보고, 피그마 커뮤니티에서 화면들을 다운 받아 네이밍을 확인했는데 카테고리 페이지는 전부 햄버거 메뉴 눌렀을 때 뜨는, 테이블 UI의 그 페이지였다. 프로덕트 리스트와 하위 카테고리가 있는 페이지는 대개 '카탈로그'라는 이름으로 불리고 있었다.
그래서 결국 제로베이스 강사님께 두 번 물어봤는데 두 번 다 '학습과제 기준'에 대한 답은 들었으나 진짜 '카테고리 페이지의 의미'는 듣지 못했다. 과제를 하는 이유는 실무를 잘 익히기 위함인데, 왜 이걸 알려주지 않는지 알 수 없었지만 일단 자료 수집 과정에서 카테고리와 카탈로그의 의미도 알게 되고 피그마 커뮤니티를 통한 페이지/컴포넌트 네이밍 방법도 익혔으니 됐다, 싶었다.
2. 피그마에서 자동 리사이징 되는 바람에 이미지 파일이 자꾸 깨졌다.
: 이걸로 시간 다 보냈다. 열심히 화면을 수집해서 카톡으로 나에게 보냈고 그걸 피그마에 올렸는데 완전히 깨져있더라. 카톡에서 깨졌나 싶어 확인했더니 너무 긴 화면들이라 카톡에서부터 깨져있었다. 그래서 일일이 구글 드라이브에 올렸는데 용량 초과로 업로드 실패. 다시 나에게 메일 보내기를 해 일일이 원본 파일을 다운 받아 피그마에 드디어 올렸는데! 리사이징이 됐다는 토스트가 뜨면서 파일이 깨졌다. 완전 멘붕.
리사이징 이슈는 이틀 동안 계속 구글링한 덕분에 해결했지만, 근본적으로 해결하진 못한 상황이다. 피그마 쓰시는 천사 같은 분들... 혹시 이미지 깨짐 현상을 해결할 수 있는 방법이 있다면 댓글로 이야기해주세요. 여러분의 작은 선함이 불쌍한 디자이너 지망생을 구합니다.
2. 제로베이스 그룹 과제 1 진행
결국 섹션 별로 끊어서 녹음했다. 스크립트가 꽤 양이 많다보니 원큐에 녹음하는 건 '절대' 불가능할거라 생각해서 섹션 별로 끊어서 녹음했다. 섹션 간 전환은 몇 초를 잡아야 할지 이런 거에 완전히 무지해서 몇 번이고 다시 녹음했다. 발음도 영 좋지 않은 편이라 열심히 또박또박 읽었다. 팀원 분들의 피드백은 다행히 알아듣긴 쉬우셨다고...
자막도 처음엔 추가하려 했으나 생각보다 여백이 많지 않고 장표에 텍스트가 많아 굉장히 지저분해보였다. 결국 자막은 포기하고 영상과 음성을 합쳤는데! 미묘하게 싱크가 안맞았다. '이런 거 껌이지'라며 조금씩 맞추려 했는데 세밀한 조절이 폰으로는 안 되어서 웹으로도 시도했다, 프로그램으로도 시도했다 이것저것 만져봤다. 덕분에 세상에 이렇게 많은 무료 영상 편집 툴이 있고, 그 툴들은 전부 막판에 '돈 안 내면 워터 마크 박을 거지롱!'이라고 하거나 '1년 결제 안 하면 720px로 출력할 거지롱!'이라며 날 협박했다.
덕분에 편집에만 2시간이 넘게 걸렸다는 슬픈 이야기.리서치 내용은 좋은데 그게 발표로 표현이 안 되어 슬플 따름이다...
3. 제로베이스 UI 디자인 강의 수강
드디어 본격적인 UI 디자인 시스템에 대해서 배웠다. 해상도는 내가 이전에도 공부했던 내용이라 다행히 이해가 가능했다. <UI 요소 간격 어떻게 맞춰요?(8point Grid)>라는 글을 쓰면서 정리했던 내용이 다시 나와 반가웠다.
사실 이 내용을 아는 것보다 활용하는 게 중요하다고 생각해 개발자 연인에게 디자이너에게 파일을 받을 때 배수로 파일을 받는지 물어봤다. 결과는 '그런 거 없다'. 피그마로 작업한다면 딱히 배수에 따라 사이즈를 달리 줄 필요는 없다. 개발자가 화면 사이즈에 맞게 조절하며, 이는 피그마에서도 확인 가능한 작업이라고.
오늘의 한줄평
그런 거 없다.
오늘의 학습 시간: 8H 10M
