[튜토리얼] 나이키 웹사이트를 빠르고 깔끔하게 리디자인하는 실전 꿀팁 공개
나이키 웹사이트를 빠르고 깔끔하게 리디자인하는 실전 꿀팁 공개
이 영상은 나이키 웹사이트를 효율적으로 리디자인하는 과정을 친절하게 소개합니다. 1) 클립드롭 사이트에서 이미지 내 텍스트를 깔끔하게 제거하고 2) 업스케일러로 해상도를 높인 뒤 3) 피그마를 설치하거나 웹에서 로그인해 디자인 작업 공간을 만들고 4) html2 디자인 플러그인을 활용해 나이키 웹사이트 URL을 입력하면 자동으로 디자인 레이아웃을 불러올 수 있습니다. 이렇게 하면 복잡한 코딩 없이도 웹사이트 레이아웃과 컬러, 이미지 리소스를 쉽게 참고하고 수정할 수 있어 웹디자인 초보자도 부담 없이 따라 할 수 있어요. 웹디자인에 관심 있는 분들께 꼭 추천드리고 싶은 실용적인 팁입니다!
이 영상은 소유자가 외부 웹사이트에서 재생을 허용하지 않아 썸네일만 표시됩니다.
썸네일을 클릭하면 유튜브로 이동합니다.
[영상 정보]
- 영상 제목: 뭐야, UI 리디자인 이 정도면 비전공자도 개 쉽게 하겠네
- 채널명: 디자인하는AI
- 업로드 날짜: 2023-09-03
- 영상 길이: 13:00
[영상에서 사용한 서비스]
- 미드저니 (Midjourney) : https://www.midjourney.com/ — 이미지 생성형 AI
- 피그마 (Figma) : https://www.figma.com/ — 웹사이트 UI 디자인 및 프로토타이핑 도구
- 클립드롭 (Clipdrop) : https://clipdrop.co/ — 이미지 캡처 및 편집 도구
- 나이키 (Nike) : https://www.nike.com/ — 브랜드 웹사이트, UI 리디자인 대상 사례
- - 미드존이 : https://midjourney.com — https://midjourney.com
- - 클립드롭 : https://www.clipdrop.co/cleanup — 이미지에서 텍스트 제거 및 클린업 서비스
- - 클립드롭 업스케일러 : https://www.clipdrop.co/upscaler — 이미지 해상도 업스케일링 서비스
- - 피그마 : https://www.figma.com — 웹 기반 UI/UX 디자인 및 프로토타이핑 툴
- - html2 디자인 (피그마 플러그인) : https://www.figma.com/community/plugin/ — 피그마 플러그인으로 HTML 코드 기반 디자인을 피그마 파일로 변환
[주요 내용]
웹사이트 디자인 고민할 때 이미지 생성부터 텍스트 제거, 해상도 업스케일까지 3단계로 쉽게 따라 해보세요. 미드존이와 클립드롭 같은 도구 활용법도 친절하게 알려줍니다.
이미지에서 불필요한 텍스트를 깔끔하게 제거하는 방법과, 제거한 이미지를 고해상도로 업스케일하는 과정을 단계별로 쉽게 따라할 수 있어요. 1) 이미지 업로드 2) 텍스트 영역 드로잉 3) 클린 버튼 클릭 4) 이미지 다운로드 5) 업스케일러 선택 6) 세팅 후 업스케일 7) 최종 이미지 저장까지 친절하게 설명해 줍니다.
피그마는 별도 다운로드 없이 로그인만으로 웹에서 무료로 디자인 작업이 가능해요. 1) 데스크탑 버전 설치 권장 2) 새 디자인 파일 생성 3) 이미지 불러와 레이아웃 구성까지 쉽게 할 수 있어 초보자도 부담 없이 시작할 수 있는 유용한 디자인 툴입니다.
나이키 웹사이트를 빠르게 리디자인하는 방법을 친절하게 알려줍니다. 1) 피그마 플러그인 ‘html2 디자인’ 설치 2) 웹사이트 URL 입력 3) 기본 골격 그대로 불러오기. 효율적인 디자인 작업에 꼭 참고해 보세요!
웹사이트 URL을 복사해 피그마에 붙여넣기만 하면, 나이키 메인 페이지가 디자인 파일로 정확하게 변환돼요. 1) URL 복사 2) 피그마에 붙여넣기 3) 데스크탑 해상도 설정 4) 임포트 버튼 클릭, 이렇게 간단한 단계로 웹사이트 디자인을 손쉽게 편집할 수 있어 실무에 큰 도움이 됩니다.
디자인 리디자인을 쉽게 시작하는 방법! 1) 1920x1080 프레임 만들기 2) 프레임 이름 변경 3) 12컬럼 그리드 설정하기 4) 마진과 버터 조절하기. 웹 레이아웃 기초를 친절하게 알려줘 초보자도 따라 하기 좋아요.
웹사이트 기본 세팅부터 나이키 헤더 복사, 리디자인까지 쉽게 따라 하는 방법을 단계별로 알려줍니다. 1) 마진과 버터 설정 2) 기존 UI 복사 3) 새 프레임에 붙여넣기 4) 필요한 부분 수정 5) 바디 콘텐츠 제작 순서로 실용적인 웹 디자인 팁을 배워보세요.
이미지를 프레임에 드래그 앤 드롭 후 위치와 사이즈를 조절하는 방법을 쉽게 알려줍니다. 1) 이미지 선택 2) 프레임에 드래그 3) 크기와 위치 맞춤 4) 레이어 순서 조정 5) 헤더 색상과 투명도 설정까지 디자인 작업을 단계별로 친절하게 설명해 줘서 초보자도 따라 하기 편해요.
헤더 컨테이너 색상과 투명도를 쉽게 바꾸는 방법을 단계별로 알려줘요. 1) 헤더 요소 제외 2) 컨테이너 컬러 변경 3) 투명도 70% 설정 4) 로고와 내비게이션 화이트 컬러 적용. 디자인 수정할 때 유용한 팁입니다.
서치 인풋 디자인할 때 1) 전체 컬러 대신 스트로크 컬러 적용 2) 컬러 제거 후 그레이 톤으로 변경 3) 내부 요소도 동일하게 맞추기 4) 텍스트와 버튼 프레임 해제 후 개별 편집하는 방법을 친절하게 알려줍니다.
프레임 해제부터 텍스트 정렬, 오토레이아웃 묶기까지 디자인 작업을 쉽게 따라 할 수 있어요. 1) shift+커맨드+G로 프레임 해제 2) 텍스트 좌측 정렬 3) 서브 타이틀과 헤딩 오토레이아웃 묶기 4) 간격 조절 5) 단축키로 폰트 크기 조정까지 친절하게 알려줍니다.
버튼과 텍스트 폰트 크기 조절부터 패딩 설정, 그리드 배치까지 UI 디자인을 쉽게 따라 할 수 있어요. 1) 버튼 텍스트 24pt로 키우기 2) 좌우 40, 상하 16 패딩 적용 3) 이미지 대비 위해 텍스트 컬러 화이트로 변경 4) 버튼 컬러 코드 지정까지 친절하게 알려줍니다.
디자인 작업 시 간격과 조화를 쉽게 맞추는 방법을 알려줍니다. 1) 우측 패널에서 간격 조정 2) 이미지 크기와 위치 확인 3) 텍스트와 어울리게 배치 4) 원형 오브젝트로 인디케이터 디자인 5) 단축키 활용해 빠르게 복제하기. 실용적인 디자인 팁을 차근차근 설명해줘 초보자도 따라 하기 좋아요.
3개의 원에 투명도 30% 적용 후 중앙 정렬, 오브젝트 간격 12, 하단 간격 48로 맞추는 방법과 카드 UI 4개 복사해 텍스트 배치하는 실용적인 디자인 팁을 친절하게 알려줍니다.
텍스트 중앙 정렬부터 폰트 크기 조절, 오토레이아웃 적용까지 디자인 기본을 쉽게 따라 할 수 있어요. 1) 텍스트 중앙 정렬 2) 타이틀 폰트 키우기 3) 두 텍스트 선택 후 오토레이아웃 설정 4) 텍스트 간격 조정 5) 복사해 카드에 붙여넣기 6) 언스플래시 플러그인 설치로 추상 이미지 넣기 순서로 차근차근 작업할 수 있어 실용적입니다.
텍스트 가독성을 높이기 위해 배경을 어둡게 만들고, 단축키로 사각형을 그려 블랙 컬러와 투명도 70%를 적용하는 방법을 친절하게 알려줍니다. 카드 UI 완성 후 오토레이아웃과 패딩 조절로 깔끔한 디자인을 완성하는 실용 팁까지 단계별로 쉽게 따라 할 수 있어요.
오토레이아웃으로 좌우 패딩을 1920 사이즈에 맞추고, 중앙 정렬 후 스포이드로 컬러를 정확히 가져와 그라데이션까지 자연스럽게 적용하는 방법을 단계별로 알려드립니다. 마지막으로 타이틀 텍스트를 복사해 붙여넣고, 하드 UI와 함께 오토레이아웃으로 간격 64를 맞추는 실용 팁도 함께 확인해 보세요.
랜딩페이지 완성도를 높이기 위해 1) 패딩과 마진 간격 조정 2) 타이틀 폰트 크기 키우기 3) 텍스트 라인 높이 일관성 맞추기 4) 기존 웹사이트 내용 활용해 빠르게 디자인 보완하는 과정을 친절하게 설명합니다.
관련 링크: 유튜브 바로가기
