티스토리

잔디심기

검색하기

블로그 홈

잔디심기

planting-grass.tistory.com/m

감잔디 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 - 실무 프로젝트 Week4 마무리 8/6(화)에 마지막 피드백을 받고 발표팀에 선정되면 최종 성과 발표회때 참석하여 발표를 해야 했다.아쉽게도 우리 팀은 발표팀에 선정되진 못하였으나 조언주신대로 피드백 내용은 마지막까지 반영해보려 했다. 최종 피드백 정리 1) 참여기업(웅진씽크빅, 유데미 큐레이션) - 프로젝트 기간이 끝난 후에도 아쉬운 부분을 꼭 만들어보고 개선해봤으면 좋겠다. 좋은 디자이너가 되기 위해 이번 프로젝트의 최종 결과물을 단순히 결과 보고서 제출용으로 사용하는 것이 아니라 멘토링 했던 내용을 꼭 가져갔으면 좋겠다. - 설득력이 가장 좋았던 내용이었으나 디자인적인 요소가 아쉬워 눈에 띄는 포인트가 없다. 멘토의 피드백 내용을 반영하여 본인들이 만족할 만큼 만들어봤으면 좋겠다. 2) 멘토 - 우선 좋은 .. 공감수 0 댓글수 1 2024. 8. 11.
[유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 - 실무 프로젝트 Week3 진행상황 화요일(7/30)에 멘토 피드백을 받아 해당 내용을 바탕으로 장표를 수정하였다. 지난주까지의 진행상황은 발표 장표 70%정도, 와이어프레임 65%정도였다.하지만 피드백 이후 이 진척도는 큰 의미가 없게 되었다.왜냐하면 요구사항대로 많은 수정을 거쳤기 때문이다. 우리가 두명이서 진행하다 보니 늘 다른 팀에 비해 어느정도 완성도를 보이는지가 궁금했는데 가지고 온 결과물이 예쁘지 않기 때문에 진척도는 소용이 없다는 식의 답변을 받았다. 주요 피드백1. 여전히 예쁘지 않다>> 이건 자꾸 들어도 당혹스러운게 어디가 어떻게 예쁘지 않은지 정확하게 말을 안해주고 그냥 안예쁘다고만 해서 어떻게 고쳐야 할지 감 잡기가 어려웠다. 그저 핀터레스트에서 포트폴리오 하나 가져다가 참고하라는 말 뿐 2. 뒷 배경지 블랙으로 깔.. 공감수 1 댓글수 0 2024. 8. 5.
[유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 - 실무 프로젝트 Week2 진행상황 주차별 코칭 사항은 이렇지만현재 3주차, 4주차까지 손대고 있다.최종 산출물 작업은 틈틈이 진행하고 있고 (한 스텝 마무리되면 그에 해당하는 발표 장표 만드는 방식)와이어프레임이 마무리되어서 디자인 작업에 들어갔다. 1주차 산출물 멘토 피드백 매주 화요일에는 멘토 피드백 시간이 있다.우리 팀이 순서상 네개의 팀 중 가장 마지막에 피드백을 받아서 좀 아쉽다. 그날 프로젝트 시작하기 전에 피드백 받고 시작하면 더 효율적일 것 같았다. 여튼 1주차에 만든 것들을 바탕으로 2주차에 멘토 피드백을 받았다.(내가 발표를 맡았고 팀원이 서기를 맡아 피드백 내용을 받아 적어주었다) 1주차 산출물 1주차에 만들었던 것은 포지셔닝 맵, 퍼소나, 고객여정맵, as is / to be 플로우차트 였다.실무 프로젝트 들어가기.. 공감수 0 댓글수 0 2024. 7. 28.
[유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 - 실무 프로젝트 Week1 진행상황 유데미에서 안내해준 주차별 코칭 계획에 따라 1주차를 진행하였다.초기 4명으로 출발했으나 결과적으로 현재는 나 포함 2명인 상황이라 업무는 거의 반씩 분담하고 있다. 프로젝트 안내 & 방향 잡기이벤트 리스트 페이지 UI.UX리뉴얼부트캠프 지원자 모집 상세페이지 개선이렇게 두가지의 과제가 주어졌다. 실무에서는 한 번에 여러개의 프로젝트를 동시에 진행하는 경우가 많기 때문에 보다 실전에 가까운 경험을 할 수 있도록 두개의 과제를 내주셨다고 했다. 살펴보니 두 프로젝트가 아예 별개의 내용이라기 보다는 어느정도 연결점이 있어서 동시에 진행하기 괜찮아 보였다.이벤트 페이지에 진입했을 때 부트캠프 홍보를 볼 수 있어서 부트캠프 상세페이지 개선이 이벤트 페이지 리뉴얼의 부분집합같은 느낌이 들었다. 1주차리서치 .. 공감수 2 댓글수 2 2024. 7. 21.
[유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 - Week2 학습일지 UX.UI 포트폴리오 과정6일차 - Figma 오토 레이아웃 활용 (2), 와이어프레임 introhttps://planting-grass.tistory.com/15 UX.UI 포트폴리오 과정 6일차 - Figma 오토 레이아웃 활용 (2), 와이어프레임 intro오토 레이아웃의 기능정적 프레임이 콘텐츠에 반응해 동적으로 움직이게 해준다.오토 레이아웃 지정 후 옵션을 Auto로 주면, 프레임 크기에 맞게 간격이 자동으로 설정된다. (프레임을 꽉 채우도planting-grass.tistory.com 5일차에 배웠던 오토 레이아웃을 좀 더 확장시켜서 실제 실습을 진행하는 시간을 가졌다. 오토 레이아웃의 기능정적 프레임이 콘텐츠에 반응해 동적으로 움직이게 해준다. 오토 레이아웃의 포인트는 어디에 간격을 주고,.. 공감수 0 댓글수 3 2024. 7. 14.
UX.UI 포트폴리오 과정 10일차 - 최종 발표 지금까지 진행한 모든 과정을 압축&요약하여 최종적으로 보여주는 시간을 가졌다. 발표 스크립트 작성팀당 10분 내에 프로토타입 시연을 포함하여 발표를 진행해야 했다.최근 학교에서 프로젝트 결과를 발표한 적이 있는데 개인에게 할당된 시간 5분을 초과할 경우 교수님께서 발표 중단을 시키셨다. 발표 시간이라는 것이 대략적인 시간을 의미하고 그 시간 전후로 어느정도 여유가 있을 것이라고 생각했었는데 그 일을 계기로 발표 진행시 제한시간을 꼭 준수할 수 있도록 연습하게 되었다.제한시간 내에 보여주고자 하는 것을 압축하여 발표할 수 있는 것도 능력이라는 생각이 든다. 적당한 속도로 말할시 워드 100단어당 1분이라는 팁을 들어서 약 700단어정도로 스크립트를 작성하고 나머지 시간은 프리로 프로토타입 시연을 진행하기로.. 공감수 0 댓글수 0 2024. 7. 12.
UX.UI 포트폴리오 과정 9일차 - 최종 발표 준비 9일차에는 최종 발표를 위한 프레젠테이션 자료를 만들었다.또 프로토타입을 시연하기 위해 최종 점검을 진행했다. 수정을 많이 거치다보니 화면이 복잡해져서 최종적으로 사용할 프레임들은 따로 빼서 새로운 파일에 넣어주었다. 프로토타입 최종본전체적인 앱 사용 과정을 보여줄 수 있도록 인트로에서부터 순서대로 연결시켜 주었다. 발표자료 최종본최종 발표 자료 역시 보기 좋게 따로 정리하였다.스파오 하면 떠오르는 색상인 붉은 계열을 활용해 전반적으로 통일감 있는 색감으로 만들었다.지금까지 만든 것들을 모아 예쁘게 정리만 하면 되는 것인데 UI포트폴리오 과정이다보니 발표 자료 디자인에도 많은 신경을 쏟을 수밖에 없었다. 교육 종료 시간이 되었으나 마무리하지 못하여 귀가 후 추가적으로 팀원들과 완성도를 높였다.슬랙 통화.. 공감수 0 댓글수 0 2024. 7. 12.
UX.UI 포트폴리오 과정 8일차 - 와이어프레임 및 UI제작 & 중간 발표 지금까지 만들어둔 와이어프레임에 UI를 더해 어제 배운 프로토타입을 적용시켜 최종 산출물로 나아가는 과정중에 있다.사실 어제 프로토타입을 배운 김에 와이어프레임에 이것저것 Action을 걸어 보았는데수정하다보니 플로우가 꼬이기도 하고 보기도 안좋아서 초기화시키고 UI까지 모두 다듬은 후 프로토타입을 제작하기로 했다. 와이어 프레임 & UI 제작 시간이 없는 관계로 우리가 주로 보여주고자 하는 리뷰 탭 개선과 '마이 사이즈' 기능 UI 제작을 중점적으로 하고 있다. 중간발표오후에는 팀별로 진행상황을 간단하게 발표하는 시간이 있었다.오프라인에 있는 팀들은 직접 확인이 가능하니 어떤 팀이 무엇을 하고 있는지는 대강 알고 있었는데 이번 발표를 계기로 온라인 팀에서 어떤 활동을 하고 있는지도 알게 되어서 재밌.. 공감수 0 댓글수 0 2024. 7. 10.
UX.UI 포트폴리오 과정 7일차 - 프로토타입 제작하기 Actoin - 사용자의 행동On tap(On click) 탭 or 클릭. 모바일은 탭, pc는 클릭On drag 드래그(스와이프)While hovering 커서가 올라가 있는 동안While pressing 누르고 있는 동안Key/Gamepad 키 설정Mouse enter 마우스가 오브젝트에 들어왔을 때Mouse leave 마우스가 오브젝트에서 떠날 때Touch down 누를 때Touch up 뗄 때 After delay 시간이 지난 후 프로토 타입을 제작할 때 가장 많이 사용한 Action은 On tap, On drag였다.이를 통해 사용자가 모바일 앱에서 주로 하는 활동이 터치 또는 드래그라는 것을 알게 되었다. 프로토 타입 제작 - Action 연습하기지금까지는 디자인 탭만 사용했는데 오늘은 .. 공감수 0 댓글수 0 2024. 7. 9.
UX.UI 포트폴리오 과정 6일차 - Figma 오토 레이아웃 활용 (2), 와이어프레임 intro 오토 레이아웃의 기능정적 프레임이 콘텐츠에 반응해 동적으로 움직이게 해준다.오토 레이아웃 지정 후 옵션을 Auto로 주면, 프레임 크기에 맞게 간격이 자동으로 설정된다. (프레임을 꽉 채우도록)사용자 지정시엔 지정한 간격대로 유지된다. 저 사진 속에서 되돌리기 표시같은 화살표 옵션을 주면 프레임을 줄였을 때 개체가 아래로 이동한다. 오토 레이아웃을 해제하는 2가지 방법 우클릭 - Ungroup오른쪽 메뉴에서 오토 레이아웃 -버튼 눌러 해제이렇게 두 방법이 있는데 메뉴에서 -을 누르면 뭔가 레이아웃 생성시 만들어진 프레임이 남아있는 것 같아서 난 우클릭으로 없애준다. 블록 조합하기오토 레이아웃의 포인트는 어디에 간격을 주고, 어떻게 묶을지 고려하여 묶어주는 것이다.가장 작은 단위에서부터 큰 단위로 묶.. 공감수 0 댓글수 0 2024. 7. 8.
[유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 - Week1 학습일지 일주일에 한 번은 보고서를 작성해야 해서 이번주 학습 내용을 하나로 묶어보려고 한다.자세한 내용은 일자별로 링크를 달아두었고, Week학습일지에는 주요 내용과 활동사진 위주로 올려보겠다. UX.UI 포트폴리오 과정 1일차 - OT 및 팀 목표 설정 ux와 ui의 차이ux: user experience기능에 초점ui: user interface시각적 요소에 초점 2주간의 목표팀별로 분석 주제 선정 & 앱 3개 이상 골라 분석. 인당 1개의 문제해결 개선안 제안 > 였는데 오늘 해보니 티스토리 돼" data-og-host="planting-grass.tistory.com" data-og-source-url="https://planting-grass.tistory.com/8" data-og-ima.. 공감수 1 댓글수 0 2024. 7. 6.
UX.UI 포트폴리오 과정 5일차 - 사용자 여정 지도 & 플로우 차트 제작, Figma 오토 레이아웃 활용 사용자 여정 지도 만들기어제 만들었던 고객 퍼소나(Persona, 페르소나)를 바탕으로 사용자 여정 지도를 만들었다. 사용자 여정 지도(Journey map)란,고객이 서비스를 이용하면서 겪게 되는 과정과 그 과정에서 느끼는 감정들을 예측해 나타내보는 것이다.먼저 행동 단계에 따른 사용자의 행동을 예상해보고 그 행동을 하면서 느끼는 감정에 대해 그래프로 나타내본다. 우리 조에서 개선할 앱은 스파오이고, 해당 앱을 사용할 퍼소나를 기준으로 사용자 여정 지도를 만들어 보았다. 고객 퍼소나나이: 30대 중반 성별: 여성성격: 트렌드에 민감, 패션에 관심 많음... 이런식으로 작성해 두었었다. 사용자 여정 지도 ; Journey Map상황을 가정하고 실제 스파오 앱을 사용해 보면서 사용자가 마주하는 상황과 .. 공감수 1 댓글수 0 2024. 7. 5.
UX.UI 포트폴리오 과정 4일차 - Figma 컴포넌트 만들기, 고객 퍼소나(Persona)만들기 컴포넌트를 사용하는 이유같은 속성을 가진 여러 개체들의 속성을 한번에 바꾸려 할 때 편리하게 사용할 수 있는 도구이다.그룹화와의 차이점은,그룹화: 하나의 개채로 묶은 것컴포넌트: 각 구성 요소의 속성을 유지함 컴포넌트를 제작해 여러 복제본을 만들고 원본 컴포넌트를 수정하면 복제본들도 함께 수정된다.각 개체들은 크기 조절, 텍스트 수정 등이 가능하지만여러 도형을 합쳐 만든 컴포넌트의 경우 복제본의 크기를 조절할 때 내부 도형이 찌그러지는 상황이 발생한다.이런 경우 사실상 컴포넌트 사용의 의미가 사라지기 때문에 detach 하여 분리시켜 주어야 한다.방법: 복제본 우클릭 → detach → 원하는 개체 선택하여 조절 컴포넌트 제작해보기먼저 화면을 관찰하면서 컴포넌트로 만들 요소를 파악해본다. 화면을 보면.. 공감수 2 댓글수 0 2024. 7. 4.
UX.UI 포트폴리오 과정 3일차 - 사용자 관찰 조사(2) 2일차 끝물에 했던 서비스 디자인 프로세스의 초기 단계를 이어서 진행했다. UX 프로세스를 이해하기 위해 '더블 다이아몬드'라는 것을 소개해 주셨다.더블 다이아몬드에서는 총 네 단계로 프로세스를 나누고 있었는데, 그중에서 가장 첫 단계인 '발견' 단계를 어제에 이어 발전시켜 보았고 추가로 두번째 단계인 '정의'까지 나아가 보았다. 오늘의 과제1. 관찰시트(엑셀파일) 관찰일지 및 사용자인터뷰 진행2. 참고자료(zip파일) : 프로젝트 하나의 폴더에 자료정리 (팀별 클라우드 생성 및 공유 필요) 1. 관찰시트(엑셀파일) 관찰일지 및 사용자인터뷰 진행- 리서치, 심층인터뷰, 직접관찰 수행하고 관찰일지 작성하기 질보다 양이 중요한 단계라 최대한 많은 인터뷰 내용을 확보하기 위해서 사용자가 이야기해주는.. 공감수 0 댓글수 0 2024. 7. 3.
Figma - 마스크 사용으로 불필요한 부분 잘라내기 오늘 수업에서 배웠던 내용 중 복습하면 좋을 것 같은 부분이 있었다.바로 마스크 사용! 프레임 내부에 도형을 넣었을 때 프레임을 벗어나는 부분은 잘려서 나오는데프레임 말고 마스크를 활용해서도 유사한 기능을 구현할 수 있다. 어떤 걸 만들어볼까.. 하면서 휴대폰 바탕화면을 둘러보았는데앱 아이콘들은 정방형 상자에 쏙 들어차 있는 경우가 많았다. 이중에서 오늘 실습 복습해보기 좋아 보이는 것은 지도 아이콘 같아서지도 아이콘을 똑같이 만들어보려고 한다. 틀 잡기좌측에 레퍼런스 이미지를 위치시켜 놓고 기본 정방형 도형을 만들어주었다. R값을 45정도로 지정해주고, 가장 범위가 넓어보이는 녹색을 배경색으로 지정해주었다.자세히 보면 그라데이션 효과도 보이는 것 같은데 간단하게 할 것이므로 우선은 모양만 .. 공감수 0 댓글수 0 2024. 7. 2.
UX.UI 포트폴리오 과정 2일차 - Figma intro & 사용자 관찰 조사 Figma사용법이 직관적이라서 누구나 금방 익힐 수 있다.나 역시 피그마를 사용하는 것은 이번이 처음이었는데 하루만에 어느정도 기능을 익히게 되었다.오늘 만든 작업물을 올리면 좋겠지만 클론코딩 하듯이 레퍼런스를 그대로 따라 만든 것이라 저작권 문제도 있고 해서 그러기는 어려울 것 같다.대신에 새로 배운 점들이나 기억해두고 싶은 것을 적어두려고 한다.폰트 다운받기[구글폰트 | Google Fonts]https://fonts.google.com/구글에서는 기본적으로 다양한 언어에 대한 폰트를 제공하고 있다.위 사이트에서 가장 기본적인 Noto Sans체와 Noto Serif체를 다운받아 주었다.두 폰트의 차이는 고딕 / 명조 의 차이라고 보면 된다. Browse Fonts - Google FontsMakin.. 공감수 0 댓글수 2 2024. 7. 2.
UX.UI 포트폴리오 과정 1일차 - OT 및 팀 목표 설정 원래 티스토리에 올리려고 했는데 티스토리 로그인이 계속 먹통이었다.그래서 이참에 ux/ui 내용을 중점으로 올리는 벨로그를 시작해보려고 한다.>> 였는데 오늘 해보니 티스토리 돼서 이사시키는 중!! 오늘은 1일차로, 오리엔테이션이 주를 이뤘다.ux와 ui의 차이ux: user experience기능에 초점ui: user interface시각적 요소에 초점 어디선가 ux가 별로면 속이 답답하고 ui가 별로면 눈이 답답하다는 말을 들어본 적이 있는데 이 비유가 찰떡인 것 같다.(정확히는 ux가 별로면 속이 썩고 ui가 별로면 눈이 썩는다.. 였던 것 같음)구글에 'ux ui 차이'라고 검색하면 나오는 이미지이다.두 분야는 비슷한 듯 다른데, 아래 보이는 케찹 병 예시가 ux와 ui의 차이점을 잘 보여.. 공감수 0 댓글수 0 2024. 7. 2.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.