<주간 UIUX 디자인 : ui 목업>

완성도 높은 포트폴리오를 위한 ui 목업 총정리! (무료 ui 목업 사이트 5곳 추천, ui 목업 적용법)

제로베이스 UIUX 디자인 스쿨

ui 목업은 무엇일까요?

ui 목업 의미

우선 목업(Mock-up)을 한국어로 직역하면 ‘실물 모형’입니다. 말 그대로 실제 제품이나 시스템이 구현되기 전에 전체적인 구조, 레이아웃 및 기능을 보여주기 위해 만들어진 예비 모델이라고 볼 수 있습니다. 목업은 그래픽 디자인, 웹 개발, 산업 디자인 및 소프트웨어 개발과 같은 다양한 분야에서 일반적으로 사용되고 있는데요.

그중에서도 ui 목업은 실제 개발 프로세스가 시작되기 전에 사용자 인터페이스가 어떻게 보이고 작동하는지 시각적으로 이해하기 위해 활용됩니다.

ui 목업의 목적

ui 목업의 목적은 버튼, 메뉴 및 기타 대화형 구성요소와 같은 다양한 요소를 포함하여 사용자 인터페이스의 레이아웃, 구조 및 전반적인 시각적 표현을 ‘시연’하는 것입니다. 설계자, 개발자가 개발에 시간과 노력을 투자하기 전에, ui 목업을 먼저 테스트해 보고 문제가 예상되는 부분을 수정할 수 있기 때문에, 효율적인 작업을 위해서라면 반드시 거쳐야 할 부분이죠.

ui 목업은 단순한 정적 이미지에서, 사용자 상호 작용을 시뮬레이션하는 클릭 요소가 적용된 대화형 프로토타입에 이르기까지 그 종류가 다양한데요. 오늘은 포트폴리오에서 유용하게 활용할 수 있는 이미지형 ui 목업 위주로 소개해 드리고자 합니다.

ui 목업 무료 사이트 5곳 소개

1) Mock Magic

첫 번째로 Mock Magic이라는 사이트입니다. 한 개의 디바이스를 기준으로 컬러와 방향 등 필요에 따라 설정하고 목업을 제작할 수 있도록 도와주는 사이트인데요. 스마트폰 디바이스뿐만 아니라 랩톱부터 데스크톱까지, 다양한 디바이스 목업을 빠르게 제작할 수 있다는 장점이 있습니다.

Mock Magic을 활용하는 사용법 안내 영상입니다. 참고해서 멋진 ui 목업을 완성해 보아요!

Mock Magic → 바로가기

2) ls.graphics

두 번째로 소개해 드릴 곳은 ls.graphics이라는 곳입니다. 디바이스부터 ui 목업, 기타 패키지 목업까지 굉장히 다양한 목업을 찾아볼 수 있는 사이트인데요. 퀄리티가 매우 높아 최근에는 유료 상품이 많아졌지만, 높은 퀄리티의 무료 목업도 준비되어 있으니 필요에 따라 사용하시는 것을 추천합니다.

또 최근에는 피그마에서 바로 적용할 수 있는 ui 목업 플러그인을 출시했습니다. 디자인의 완성도와 작업 효율까지, 두 마리 토끼를 잡을 수 있게 도와주는 사이트인 것 같습니다.

ls.graphics → 바로가기

3) facebook design

다음은 메타에서 제공하는 디바이스, ui 목업 사이트입니다. 거의 모든 디바이스 목업을 다운로드할 수 있어 실용성이 높은 사이트 중 하나입니다.

여기에 ui 목업 키트까지 다운로드할 수 있는데요. 높은 퀄리티로 빠르게 작업을 마무리할 수 있겠죠?

facebook design → 바로가기

4) Pixeltrue

다음으로 Pixeltrue라는 사이트입니다. 앞서 소개해 드린 Mock Magic과 비슷한 서비스를 제공하는 사이트인데요. 차이가 있다면 Pixeltrue에서는 다양한 각도의 목업 템플릿을 제공해 준다는 점입니다.

다양한 방향과 디자인의 디바이스가 있어 좀 더 개성 있는 ui 목업을 활용할 수 있습니다. 내가 만든 ui 디자인을 여러 각도의 디바이스에 적용된 모습을 확인하고 싶다면? 이 사이트를 추천합니다!

Pixeltrue → 바로가기

5) Pixeden

마지막으로 소개해 드릴 사이트는 Pixeden이라는 곳인데요. 지금까지 소개해 드린 사이트 중 가장 많은 종류와 개수의 목업을 자랑하는 곳입니다. 방대한 양의 자료가 있다 보니 카테고리를 잘 활용하여 원하는 ui 목업을 찾는 것을 추천드립니다.

위 이미지처럼 ui 목업은 물론 웹 사이트 제작 템플릿이나 아이콘 템플릿까지 있으니 더 완성도 있는 UIUX 디자인이 가능할 것 같습니다.

Pixeden → 바로가기

ui 목업, 어떻게 적용할까요?

사이트에서 원하는 ui 목업을 찾았다면 이젠 적용을 시켜봐야겠죠? ui 목업 적용은 방법만 알면 아주 간단합니다. 지금부터 ui 목업 적용 방법에 대해 함께 알아볼게요!

1) 다운로드

우선 ui 목업 적용을 위해 Pixeden에서 앱 스크린 화면을 다운로드했습니다. 대부분의 ui 목업 파일은 PSD 파일로 되어있기 때문에 Adobe 포토샵 프로그램은 미리 준비 필수!

2) 이미지 삽입

다운로드한 PSD 파일을 열면 대부분 ‘이곳에 디자인을 넣으라’는 레이어를 확인할 수 있습니다. 해당 레이어를 두 번 클릭하면 이미지를 변경할 수 있는 창으로 이동이 됩니다.

이동된 창에서 원하는 이미지 레이어를 넣고 사이즈 및 텍스트 등을 조정합니다.

저는 제로베이스 홈 화면 이미지를 넣어봤어요! 여기서 중요한 부분은 이미지는 넣고 난 후 꼭 저장을 해야 이미지 변경이 적용된다는 점입니다.

3) 완성!

디자인 변경 후 저장을 마치고 원래의 창으로 돌아오면, 짜잔! 목업이 적용된 모습을 확인할 수 있어요. 정말 간단하죠?

진짜 완성도 높은 포트폴리오를 만들고 싶다면?

ui 목업을 활용해서 포트폴리오 업그레이드 완료! 하지만 취업을 위한 UIUX 포트폴리오에서는 ui 목업만 중요한게 아니라는 거 아시죠? 보기에 예쁠 뿐 아니라 포트폴리오의 구성까지도 완성도 높은 포폴을 만들고 싶다면, UIUX 디자인 스쿨을 추천합니다.

현직자 피드백을 받을 수 있어, 실무자들이 보기에도 설득력 높은 UIUX 포트폴리오를 만들 수 있기 때문이죠. UIUX 디자인 스쿨에서 남다른 퀄리티의 포트폴리오 만들고 UIUX 디자이너로 취업, 한 번에 성공하세요!

UIUX 디자인 스쿨은 '취업'까지 단 4개월,
새로운 여정을 함께할 분들을 기다립니다.

추천 컨텐츠