영상 올려주셔서 감사해요🌹너무 잘봤습니다 :) 영상 처럼 와이어프레임 손스케치부터 작업 순서를 정립하는것에 도움을 받았어요! 한가지 질문드릴것이 있는데 영상속 storyset 이라는 일러스트를 sun님이 하시는 방법대로 다운 후 피그마에 넣어봤는데 gif이미지가 뜨지 않아서요! 혹시 피그마에 사용하려면 유료로 구독해야하거나 플러그인으로 연결해서 불러와야하는건가해서 여쭤봐요!!
개발자가 디자인까지 하시는구나. 대단하세요. 누가 디자인 하는 과정 보고 싶다고 하기도 하고 디자인 연습 어떻게 하는지 모르시는 분도 계시고 저도 100일 데일리 디자인 챌린지 할겸 만들어봤어요. 매일 이메일로 날라오는 주제로 디자인 하는건데 매일은 못하더라도 일주일에 하나씩 새로운 디자인 해보려고 노력해보려구요. 조금이라도 도움이 되었으면 좋겠어요. 영상봐주셔서 감사해요^^
안녕하세요~ It기획일 하고 있습니다! 예전에는 ppt로 와이프레임 그리다가 피그마로 툴을 변경한지 얼마 안되었는데요, 와이어프레임 작업 시 최대한 다양한 레퍼런스를 참고하여 기획 의도를 잘 담을 수 있도록 꼼꼼하게 작업을 하려고 노력하고있습니다. 피그마로 작업하니 와이어프레임 퀄리티가 높아져서 개인적으로는 만족도가 높아졌는데요. 다만 같이 일하는 ui디자이너에게 요 근래 컴플레인(?)을 듣게 되었어요, “아예 디자인을 다 해서 주지그러냐”, “와이어프레임이 너무 실물과 비슷하게 나와서 디자인할 때 사고의 확장을 막아 창의성에 영향을 끼친다“, “기획서는 대충 해서 줘라”. 라는 피드백을 듣곤합니다. 기획자로서 와이어프레임을 어디까지 해주느냐가 고민인데, 대충 위치만 잡고 알아서 디자인을 맡기는 것이 맞는 방향인지 궁금하네요,
P.S. 기획자로서 ux에 관심이 많아 영상을 접하게 되었는데, 차분하게 실무적으로 잘 알려주셔서 도움 많이 받아가요, 감사합니다! 다른 영상 중간 중간 실무 하실 때 예를 들어 설명을 주실 땨 들어보니 미국 PM과 한국의 pm또는 서비스 기획자눈 업무 담당 범위가 다른 것 다는 느낌이 드네요!
와이어프레임을 엄청 잘 만드신거 같아요. UI와 UX 포지션이 나눠져 있으면 그런 트러블 생길 수 있어요. 저는 알아요. 분명 @user-oe8sc8ub6o님도 머리속에서 그린 디자인이 있다는 걸.. 혹시 와이어프레임 전달하실때 색상을 입히셨는지요? 최대한 디자이너가 UX와 UI가 나눠져 있을때는 와이어프레임 블랙&그레이&화이트톤으로만 작업해서 넘기세요. 그리고 아이콘도 그냥 박스처리해서 넘기세요 그 분이 그런 아이콘도 알아서 배치할 테니깐요. 모노톤으로 작업된 와이어프레임에 플로우만 만드셔서 넘기세요. 이거 누르면 어디로 가고, 만약, 에러가 났을땐 이런 메세지 보여주고 그런식으로만 작업문서 만드셔서 보내세요. 그분이 위기의식 느끼셨나봐요. 최종 결과물처럼 만드셔서 아니면, user-oe8sc8ub6o님이 최대한 결과물과 비슷하게 만드셔서 그분이 스타일링 하는데 자유롭게 생각하지 못하게 만든다고 느끼실 수도 있구요. 그냥 레이아웃, 플로우, 텍스스 정도만 넣으시고 최대한 디테일한 이미지는 사각형 툴로 박스처리하세요. medium-fidelity 정도면 충분할거 같아요. 그렇게 해서 보내도 아마 그 분이 그 분 맘대로 레이아웃 쏵 다 바꿀수도 있어요. 그러면, 그때 사용성을 떨어트리는 디자인으로 바꿔질수도 있어요. 그때 UX 관점에서 그런 UI쓰면 사용자들이 불편해한다며 증거 리서치 자료 등등을 제시하면서 피드백주면서 디자인 조정해보세요.
@@구다은-t7x 아 그리고 한국 PM/미국 PM 역할이 좀 다르는거 저도 그렇게 좀 느꼈어요. 미국 PM은 기획, 프로젝트 방향,비전, 최종 목표, 회사에 어떤 영향을 미칠지 등등 전반적인 프로젝트 기획일을 다해요. 디자인 개발자들의 중간 역할을 하는데, 한국 PM은 어디까지 맡아서 하는지는 잘 모르겠는데, 제가 한국에 일하는 디자이너분들과 이야기해보면 UX디자이너가 기획한다고 하는데 그 기획이 무슨 기획을 뜻하는건지 모르겠어요. 좀 다르긴 한거 같아요.
1. 와이어프레임 단계에서 오토레이아웃 만드셔도 상관없어요. 오히려 여러개의 비슷한 컴포넌트 만들때는 오토레이아웃이 시간 세이브를 많이 시켜줄거예요. 다만, 디자인 디테일한 부분 작업 들어가기 시작하면 수정을 많이 해야해서 오토레이아웃 결국 풀게 되더라구요. 2. 네에. 저도 중복된 컴포넌트들이 많을때는 저는 "Create Component"를 많이 해 놓는 편인 거 같아요. 오토 레이아웃은 한 스크린 안에 여러 내용이 들어갔을때 단락/섹션(?) 구분해서 나중에 순서 위아래 위치 바꿀때 맞춰놓은 간격들 바뀌지 않게 하기 위해서... 그럴때 Auto layout을 적용해서 그냥 마우스 커서로 위치 위,아래 바꾸거나, 새 내용 중간에 넣거나 그럴때 오토 레이아웃으로 쉽게 수정 해요. 3. 개발자들은 오토레이아웃, 컴포넌트로 정했는지 안정했는지 잘 모를거예요. 개발자들은 그냥 디자인 요소 하나하나 눌러서 디자인 스펙 확인할거예요. 피그마를 사용할 줄 안다면^^; 궁금증이 해결이 되었는지 모르겠어요. 제가 답 드린 부분이 이해가 안되시는 부분 있으면 다시 댓글 남겨주세요. ^^
@@hoduoppa 함께 일할 개발자들에게 물어보세요. 전의 디자이너랑은 어떻게 일했으며 디자이너와 일할때 어떤 문제점,불편함이 있었는지. 어떻게 디자인 전달해주었으면 좋겠는지 함께 프로세스를 만들어가는것도 또 다른 방법이예요. 피그마로 디자인 스펙 찾는 법은 아는지도 물어보고 도움이 필요하면 hoduoppa 님이 직접 가르쳐주시는 것도 한가지 방법이 될 수 있을 거 같아요.^^ 지금 함께 하는 팀이 좋은 팀이길 응원할게요^^*
유용하게 봐주셔서 감사해요. 제가 지금 다니고 있는 회사에서는 일러스트레이션, 아이콘 만드는 팀이 따로 있어요. 그 안에서 컨텐츠에 맞게 저는 가져다가 잘 배치해서 쓰면돼요. 그리고 전 직장에서는 일러스트레이션, 아이콘 패키지 라이센스를 구입해서 사용했어요. 직접 그릴 때는 원하는 일러스트가 없을때, 아이콘이 없을때 그때 구입 했던 것을 토대로 저런 스타일로 새로 만들긴 했는데, 제가 다녔던회사에서는 전문적으로 하는 사람들이 있었어요. 많은 디자이너들이 소스 구입/다운받아서 사용해요. 팀마다 회사마다 디자이너 구성원이 어떻게 되어있냐에 따라 다를 수 있을거 같아요. 회사에서 저에게 일러스트레이션 만들줄 아냐고 물어본다면 저는 제 전문 분야는 아니다. 하지만 필요하다면 기존에 있는 일러스트레이션을 토대로 수정 작업해서 프로젝트 컨텐츠에 맞게 만들 수 있다고 해요. ^^ 말이 길어졌어요. 제가 드리고 싶은 말씀은 ㅎㅎ 직접 그릴 필요는 없어요. 그렇지만, 독학으로 공부중이시라면 연습차원에서 일러스트레이션, 아이콘도 만드는 방법 배워두시면 좋다고 말씀드리고 싶어요.
영상 올려주셔서 감사해요🌹너무 잘봤습니다 :) 영상 처럼 와이어프레임 손스케치부터 작업 순서를 정립하는것에 도움을 받았어요! 한가지 질문드릴것이 있는데 영상속 storyset 이라는 일러스트를 sun님이 하시는 방법대로 다운 후 피그마에 넣어봤는데 gif이미지가 뜨지 않아서요! 혹시 피그마에 사용하려면 유료로 구독해야하거나 플러그인으로 연결해서 불러와야하는건가해서 여쭤봐요!!
영상 봐주셔서 감사해요. Gif 이미지는 피그마에 삽입하면 정적인 이미지로만 보일거에요. 대신, prototype mode로 바꾸셔서 플레이 해보세요 그럼 애니메이션 된 이미지로 보일거에요..
@@uxsun 감사합니다 ☺️!
개발자로서 디자인을 배워야 하는데 딱 필요한 강의자료네요! 제작하시느라 너무 고생많으셨어요 ㅠㅠ 항상 잘 듣고 있습니다^^
개발자가 디자인까지 하시는구나. 대단하세요. 누가 디자인 하는 과정 보고 싶다고 하기도 하고 디자인 연습 어떻게 하는지 모르시는 분도 계시고 저도 100일 데일리 디자인 챌린지 할겸 만들어봤어요. 매일 이메일로 날라오는 주제로 디자인 하는건데 매일은 못하더라도 일주일에 하나씩 새로운 디자인 해보려고 노력해보려구요. 조금이라도 도움이 되었으면 좋겠어요. 영상봐주셔서 감사해요^^
안녕하세요~
It기획일 하고 있습니다!
예전에는 ppt로 와이프레임 그리다가 피그마로 툴을 변경한지 얼마 안되었는데요,
와이어프레임 작업 시 최대한 다양한 레퍼런스를 참고하여 기획 의도를 잘 담을 수 있도록 꼼꼼하게 작업을 하려고 노력하고있습니다.
피그마로 작업하니 와이어프레임 퀄리티가 높아져서 개인적으로는 만족도가 높아졌는데요. 다만 같이 일하는 ui디자이너에게 요 근래 컴플레인(?)을 듣게 되었어요,
“아예 디자인을 다 해서 주지그러냐”, “와이어프레임이 너무 실물과 비슷하게 나와서 디자인할 때 사고의 확장을 막아 창의성에 영향을 끼친다“, “기획서는 대충 해서 줘라”. 라는 피드백을 듣곤합니다.
기획자로서 와이어프레임을 어디까지 해주느냐가 고민인데, 대충 위치만 잡고 알아서 디자인을 맡기는 것이 맞는 방향인지 궁금하네요,
P.S. 기획자로서 ux에 관심이 많아 영상을 접하게 되었는데, 차분하게 실무적으로 잘 알려주셔서 도움 많이 받아가요, 감사합니다!
다른 영상 중간 중간 실무 하실 때 예를 들어 설명을 주실 땨 들어보니 미국 PM과 한국의 pm또는 서비스 기획자눈 업무 담당 범위가 다른 것 다는 느낌이 드네요!
와이어프레임을 엄청 잘 만드신거 같아요. UI와 UX 포지션이 나눠져 있으면 그런 트러블 생길 수 있어요. 저는 알아요. 분명 @user-oe8sc8ub6o님도 머리속에서 그린 디자인이 있다는 걸.. 혹시 와이어프레임 전달하실때 색상을 입히셨는지요? 최대한 디자이너가 UX와 UI가 나눠져 있을때는 와이어프레임 블랙&그레이&화이트톤으로만 작업해서 넘기세요. 그리고 아이콘도 그냥 박스처리해서 넘기세요 그 분이 그런 아이콘도 알아서 배치할 테니깐요. 모노톤으로 작업된 와이어프레임에 플로우만 만드셔서 넘기세요. 이거 누르면 어디로 가고, 만약, 에러가 났을땐 이런 메세지 보여주고 그런식으로만 작업문서 만드셔서 보내세요. 그분이 위기의식 느끼셨나봐요. 최종 결과물처럼 만드셔서 아니면, user-oe8sc8ub6o님이 최대한 결과물과 비슷하게 만드셔서 그분이 스타일링 하는데 자유롭게 생각하지 못하게 만든다고 느끼실 수도 있구요. 그냥 레이아웃, 플로우, 텍스스 정도만 넣으시고 최대한 디테일한 이미지는 사각형 툴로 박스처리하세요. medium-fidelity 정도면 충분할거 같아요. 그렇게 해서 보내도 아마 그 분이 그 분 맘대로 레이아웃 쏵 다 바꿀수도 있어요. 그러면, 그때 사용성을 떨어트리는 디자인으로 바꿔질수도 있어요. 그때 UX 관점에서 그런 UI쓰면 사용자들이 불편해한다며 증거 리서치 자료 등등을 제시하면서 피드백주면서 디자인 조정해보세요.
@@구다은-t7x 아 그리고 한국 PM/미국 PM 역할이 좀 다르는거 저도 그렇게 좀 느꼈어요. 미국 PM은 기획, 프로젝트 방향,비전, 최종 목표, 회사에 어떤 영향을 미칠지 등등 전반적인 프로젝트 기획일을 다해요. 디자인 개발자들의 중간 역할을 하는데, 한국 PM은 어디까지 맡아서 하는지는 잘 모르겠는데, 제가 한국에 일하는 디자이너분들과 이야기해보면 UX디자이너가 기획한다고 하는데 그 기획이 무슨 기획을 뜻하는건지 모르겠어요. 좀 다르긴 한거 같아요.
선생님 영상보고 많은 도움이 되었네요.
오토레이아웃과 컴포넌트에 대해 궁금한점이 있어요.
1.와이어프레임 단계에선 빨리빨리 그려나가야 되니 오토레이아웃, 컴포넌트는 생각하지 않고 작업하는게 속도면에서 낫겟죠? (영상9분전까지)
2.UI디자인시 중복요소는 컴포넌트로 만들고, 단락은 오토레이아웃 걸면서 진행하면되겟져?
3.오토레이아웃과 컴포넌트 없이 작업하면 개발자가 코딩구현시 알아보기 힘든부분이 있을까요?
1. 와이어프레임 단계에서 오토레이아웃 만드셔도 상관없어요. 오히려 여러개의 비슷한 컴포넌트 만들때는 오토레이아웃이 시간 세이브를 많이 시켜줄거예요. 다만, 디자인 디테일한 부분 작업 들어가기 시작하면 수정을 많이 해야해서 오토레이아웃 결국 풀게 되더라구요.
2. 네에. 저도 중복된 컴포넌트들이 많을때는 저는 "Create Component"를 많이 해 놓는 편인 거 같아요. 오토 레이아웃은 한 스크린 안에 여러 내용이 들어갔을때 단락/섹션(?) 구분해서 나중에 순서 위아래 위치 바꿀때 맞춰놓은 간격들 바뀌지 않게 하기 위해서... 그럴때 Auto layout을 적용해서 그냥 마우스 커서로 위치 위,아래 바꾸거나, 새 내용 중간에 넣거나 그럴때 오토 레이아웃으로 쉽게 수정 해요.
3. 개발자들은 오토레이아웃, 컴포넌트로 정했는지 안정했는지 잘 모를거예요. 개발자들은 그냥 디자인 요소 하나하나 눌러서 디자인 스펙 확인할거예요. 피그마를 사용할 줄 안다면^^;
궁금증이 해결이 되었는지 모르겠어요. 제가 답 드린 부분이 이해가 안되시는 부분 있으면 다시 댓글 남겨주세요. ^^
@@uxsun너무감사해요. 다른직장에서 일하게됬는데 개발자들이 피그마를 얼마나다룰지몰라서 궁금했습니다. 저도 피그마를 협업으로 사용하는건 처음이라 부담도 되었구요ㅎㅎ
결국 팀원끼리 커뮤니케이션하면서 맞춰나가야겠네요. 답변감사해요!
@@hoduoppa 함께 일할 개발자들에게 물어보세요. 전의 디자이너랑은 어떻게 일했으며 디자이너와 일할때 어떤 문제점,불편함이 있었는지. 어떻게 디자인 전달해주었으면 좋겠는지 함께 프로세스를 만들어가는것도 또 다른 방법이예요. 피그마로 디자인 스펙 찾는 법은 아는지도 물어보고 도움이 필요하면 hoduoppa 님이 직접 가르쳐주시는 것도 한가지 방법이 될 수 있을 거 같아요.^^ 지금 함께 하는 팀이 좋은 팀이길 응원할게요^^*
항상 잘보고있습니당^^ 영상보다 궁금한거 있는데 유저플로우스케치할때 사용하신게 무엇인가요?? 스케치할때 너무 좋을것같아서용❤
remarkable 2 라는 제품인데..스케치하고 메모할때 쓰기 좋아요.^^ 근데 제가 알기론 해외 배송에 제한이 있는걸로 알고 있어요. remarkable.com/store/remarkable-2 영상 봐주셔서 감사해요^^*
독학으로 공부 중이라 실제 디자인 과정이 궁금했는데 너무 유용합니다!🥺
혹시 실무에서 일러스트레이션이나 아이콘은 무료 사이트나 피그마 커뮤니티에서 다운 받은 것으로 사용하는 편인가요?직접 그릴 필요는 거의 없는지 궁금합니다 ㅎㅎ
유용하게 봐주셔서 감사해요. 제가 지금 다니고 있는 회사에서는 일러스트레이션, 아이콘 만드는 팀이 따로 있어요. 그 안에서 컨텐츠에 맞게 저는 가져다가 잘 배치해서 쓰면돼요. 그리고 전 직장에서는 일러스트레이션, 아이콘 패키지 라이센스를 구입해서 사용했어요. 직접 그릴 때는 원하는 일러스트가 없을때, 아이콘이 없을때 그때 구입 했던 것을 토대로 저런 스타일로 새로 만들긴 했는데, 제가 다녔던회사에서는 전문적으로 하는 사람들이 있었어요. 많은 디자이너들이 소스 구입/다운받아서 사용해요. 팀마다 회사마다 디자이너 구성원이 어떻게 되어있냐에 따라 다를 수 있을거 같아요. 회사에서 저에게 일러스트레이션 만들줄 아냐고 물어본다면 저는 제 전문 분야는 아니다. 하지만 필요하다면 기존에 있는 일러스트레이션을 토대로 수정 작업해서 프로젝트 컨텐츠에 맞게 만들 수 있다고 해요. ^^ 말이 길어졌어요. 제가 드리고 싶은 말씀은 ㅎㅎ 직접 그릴 필요는 없어요. 그렇지만, 독학으로 공부중이시라면 연습차원에서 일러스트레이션, 아이콘도 만드는 방법 배워두시면 좋다고 말씀드리고 싶어요.
@@uxsun 정성스런 답변 감사합니다💗자세하게 말씀해주셔서 어떤 건지 감이 좀 잡히네요!항상 좋은 영상 감사해요!ㅎㅎ