상세페이지 제작부터 AI활용까지

 

안녕하세요! UIUX 새싹청년취업사관학교에서 벌써 6일차네요. 시간이 정말 빠르죠? 😊 오늘은 실무에서 '진짜' 유용하게 쓰일 디자인 팁들과 더불어, 미래 디자이너에게 필수가 될 AI 활용법까지 배울 수 있었는데요. 솔직히 말해서, 매번 이론만 배우다 실습 위주로 진행되니 머리에 쏙쏙 들어오고 너무 재미있었어요! 새싹청년취업사관학교 정말 추천해요 (광고아니에요!! 취준생이거나 이직하시는 분들에게 많은 도움이 될거같아요.)

 

실무에서 바로 써먹는 디자인 단축키 🎯

강사님께서 가볍게 시작하자며 알려주신 디자인 단축키 팁들은 정말 꿀팁이었어요! 별거 아닌 것 같지만, 이런 작은 디테일이 작업 속도를 확 올려주는 거 아시죠?

• 키 하나만 눌러도 오브젝트의 불투명도 조절 가능! 0부터 9까지의 숫자를 누르면 해당 숫자에 맞춰 Opacity(불투명도)가 빠르게 조절되더라고요. 진짜 유용했어요.
• Shift + E는 프로토타입 모드 진입 단축키! 요즘 프로토타이핑 작업이 정말 잦은데, 이 단축키는 앞으로 정말 자주 쓰게 될 것 같아요. 

 

상세페이지 디자인, 그냥 예쁘기만 하면 안 된다? 🖼️

이번 수업의 하이라이트 중 하나는 실제 상품 상세페이지를 분석하고 재구성해보는 디자인 실습이었어요. 단순히 예쁘게 만드는 걸 넘어, 사용자 경험을 고려한 디자인의 중요성을 다시 한번 깨달았답니다.

실습

💡 주요 포인트!

• 상품군과 사진은 명확하게 보여줘야 사용자 혼란이 줄어든다는 점!
• 버튼 디자인은 직관적이고 클릭 유도 효과가 있어야 해요.
• 상품 정보를 한눈에 파악할 수 있도록 레이아웃을 구조화하는 것도 중요했어요.

 

레이아웃은 ‘의도’를 담아야 한다 📐

레이아웃 디자인에서는 정보의 우선순위에 따라 영역을 어떻게 나누느냐가 정말 중요하더라고요. 특히 로그인 영역이나 주요 메뉴는 큼직하게, 눈에 띄게 구성해야 사용자가 자연스럽게 흐름을 따라오거든요. 저도 모르게 지나쳤던 부분인데, 강사님 설명을 들으니 '아, 그래서 그랬구나!' 싶었어요. 버튼 텍스트의 위치나 간격도 가독성과 직결되기 때문에 꼼꼼하게 조정해야 한다는 것도 배웠답니다.

 

타이포그래피의 구조적 정답 🔤

타이포그래피는 단순히 예쁜 글씨를 고르는 게 아니라, '읽기 편한 구조'를 만드는 일이라는 걸 깨달았어요. 저만의 꿀팁이라고 생각했던 것들도 사실은 다 이유가 있었더라고요!

• 서체는 2종 이하, 고딕 계열 추천! (NotoSans, 나눔고딕, 돋움 등) 이건 기본적인데도 자꾸 욕심부리게 되더라고요.
• 행간, 자간, 장평은 디자인의 리듬을 만드는 요소! 이 요소들을 조절해서 글의 분위기를 바꿀 수 있다는 게 신기했어요.
• 제목은 본문보다 180~220% 크기로 시선을 끌어야 하고, 소제목은 120~150% 정도가 적당하다고 해요.

 

디자이너가 AI를 다룬다고? 🧠

가장 흥미로웠던 부분은 바로 AI 툴 활용에 대한 이야기였어요. MidJourney, ChatGPT, Stable Diffusion 같은 툴들을 디자인에 접목시키면 정말 새로운 표현이 가능하더라고요. 저는 사실 AI는 좀 먼 미래의 이야기라고 생각했는데, 바로 실무에 적용할 수 있는 사례들을 보니 생각이 완전히 바뀌었어요. 진짜 디자이너의 영역이 확장되는 느낌이었어요! (준비를 얼마나 많이 해야되는건지)

단순히 툴을 아는 것을 넘어서, AI를 통해 나만의 스토리텔링을 만드는 역량이 중요하다는 메시지가 정말 인상 깊었어요. 미래 디자이너에게 꼭 필요한 역량이겠죠? ✨

 

미드저니를 활용한 작업물

 

 

글의 핵심 요약 📝

오늘 배운 내용들을 정리해보니, 디자인은 결국 사용자와의 진정한 소통이라는 걸 다시 한번 느꼈어요. 복잡한 이론보다는 실제 활용 가능한 팁들이 많아서 더 좋았네요!

1. 실용적인 단축키 습득: 0-9 숫자키를 이용한 불투명도 조절, Shift+E를 통한 프로토타입 모드 진입 등 작업 효율을 높이는 팁을 배웠어요.
2. 사용자 중심의 상세페이지 디자인: 상품의 명확한 정보 전달과 직관적인 버튼 디자인, 그리고 '모듈 디자인'을 통한 시각적 중요도 표현의 중요성을 이해했어요.
3. 레이아웃과 타이포그래피의 의도: 정보의 우선순위를 고려한 레이아웃 구성, 그리고 가독성을 높이는 타이포그래피의 구조적 규칙(서체 선택, 행간/자간/장평, 제목 크기)을 익혔습니다.
4. 디자인 분야 AI 툴 활용 가능성: MidJourney, ChatGPT, Stable Diffusion 등 AI 툴을 활용하여 콘텐츠를 만들지만 자신의 스토리텔링을 하자. 

 

💡

Day6 핵심 요약 카드

실무 단축키: 불투명도(0-9), 프로토타입(Shift+E)로 작업 속도 UP!

상세페이지 디자인: 명확한 정보 전달, 모듈 디자인으로 UX 최적화!

레이아웃 & 타이포그래피: 정보 위계, 가독성을 고려한 구조 설계가 핵심!

AI 툴 활용: MidJourney, ChatGPT, Stable Diffusion으로 새로운 디자인 가능성 확장!

UIUX 디자인의 실무 역량을 키우는 알찬 하루! 🌱

자주 묻는 질문 ❓

Q: AI 툴을 디자인에 활용하는 것이 아직은 어렵게 느껴져요. 어떻게 시작하면 좋을까요?

A: AI 툴은 처음부터 완벽하게 다루기보다는 작은 시도부터 시작하는 게 중요해요. 예를 들어, 간단한 아이콘 생성이나 이미지 스타일 변환 등 특정 작업에 특화된 툴부터 익숙해지는 것을 추천합니다. 그리고 AI를 '보조 도구'로 생각하고, 나만의 아이디어를 시각화하는 데 활용하면 훨씬 쉽게 접근할 수 있을 거예요.

Q: 상세페이지 디자인 시 '모듈 디자인'이라는 개념이 정확히 무엇인가요?

A: 모듈 디자인은 웹 페이지를 구성하는 각 요소를 독립적인 '모듈'로 보고 디자인하는 방식이에요. 단순히 시각적으로 구획을 나누는 것을 넘어, 각각의 정보 덩어리(모듈)가 시각적 위계(테두리, 그림자, 마우스 오버 효과 등)를 통해 중요도를 명확히 전달하고, 재사용성을 높여 효율적인 디자인을 가능하게 하는 것이 핵심입니다. 상품의 정보를 사용자에게 가장 효과적으로 전달하기 위한 구조화된 접근이라고 볼 수 있죠.

실무에서 바로 써먹을 수 있는 꿀팁들을 많이 얻어서 벌써 제 디자인 역량이 UP! 된 느낌이랄까요? 시각적 위계, 정보 전달의 흐름, 그리고 감각적인 연출까지.. 디자인은 결국 사용자와의 소통이란 걸 다시 한번 느꼈습니다. 그리고 그 안에 나만의 해석과 논리를 담아야 한다는 점도요.

앞으로도 오늘 배운 내용을 반복해서 연습하면서, 실무에서도 바로 통하는 디자이너가 되고 싶어요. 내일도 기대되는 새싹 수업! 🌱 더 궁금한 점이 있다면 언제든지 댓글로 물어봐주세요~ 😊