inflearn logo
강의

Course

Instructor

Design Sense? It's Not Innate. UX/UI Design Principles Engineered with 'Neuroscience'

Practical Example: Creating a Service Introduction Page

3차시 실전 예시학습중입니다

13

n03372379980dytl7677

7 asked

0

저는 기획 및 시스템 운영 업무를 주로 하고 있는데 UIUX 쪽을 좀 아는게 도움이 될것 같아 이 강의를 학습중입니다.
현재 3차시를 학습 중인데,

서비스소개 페이지 만드는 예를 들어서 보고 따라하고 싶은데

PPT로 하기에는 조금 한계가 있어보이는데,
이런 걸 하실때 강사님은 어떤 툴을 사용해서 작업 하시나요?

간단하게 따라 해 보고싶은데 간단하지가 않네요

웹-디자인 ui ux 프로덕트디자인 심리학

Answer 2

0

chaozi zhang

PPT로 전체 화면을 바로 만들기보다, 보통은 2단계로 가면 훨씬 편합니다.

  1. 먼저 Figma나 Canva로 페이지 구조를 잡습니다.

  • 히어로 섹션

  • 핵심 메시지

  • CTA 버튼 위치

  • 카드/섹션 흐름
    이 단계에서는 텍스트와 레이아웃만 먼저 정리하는 게 좋습니다.

  1. 그 다음에 각 섹션에 들어갈 비주얼만 따로 만듭니다.
    예를 들어 서비스 소개 페이지라면 hero 이미지, 기능 소개 카드용 이미지, 썸네일/배너 시안 정도만 먼저 뽑아도 충분합니다.

이때 처음부터 빈 프롬프트로 시작하면 오히려 어렵기 때문에, 저는 보통 템플릿이나 예시 프롬프트를 먼저 보고 구조를 잡습니다.
예를 들면 포스터/마케팅 비주얼/소셜 이미지처럼 목적별 템플릿을 먼저 보고 시작하면 훨씬 덜 막힙니다.
https://gpt-image-prompt.com/template?utm_source=inflearn_community_questions

정리하면,

  • 화면 구조: Figma / Canva

  • 비주얼 초안: 이미지 생성 툴

  • 프롬프트 시작점: 템플릿/예시 참고
    이 순서가 초보자에게 제일 부담이 적었습니다.

처음에는 한 페이지를 완성하려고 하기보다, 히어로 섹션 하나만 먼저 따라 만들어 보시는 걸 추천드립니다.

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다.

김수미님, UI/UX 디자인에 대한 학습 의지가 정말 멋지십니다. 서비스 소개 페이지를 만드는 데 있어 어느 도구를 사용하면 좋을지 궁금해 하시는군요. 일반적으로 UI/UX 디자인 작업에는 다양한 툴들이 활용됩니다. 가장 많이 사용되는 디자인 도구 중 몇 가지를 소개해 드리겠습니다.

  1. Figma: 클라우드 기반으로 협업이 용이하며, 프로토타이핑 기능도 강력한 툴입니다. 프로젝트를 쉽게 시각화하고 공유할 수 있어 많은 디자이너들이 애용합니다.

  2. Adobe XD: Adobe의 통합 디자인 툴로, 사용자 인터페이스와 사용자 경험을 매우 효과적으로 디자인할 수 있습니다. Figma와 유사한 기능을 제공하며 Creative Cloud와 연동이 원활합니다.

  3. Sketch: 특히 Mac 환경에서 많은 지원을 받는 디자인 툴로, UI 디자인에서 널리 사용됩니다. 플러그인 시스템이 강력하여 확장성이 높습니다.

이 외에도 간단히 디자인 작업을 하고 싶다면 Canva 같은 웹 기반 도구를 고려해볼 수도 있습니다. 기본적인 UI 디자인이 가능하고 사용법이 비교적 간단합니다.

참고할 만한 또 다른 게시물을 소개 드립니다:
- 디자인도 패턴인가요?에서는 UI/UX 디자인에 대한 기본적인 이해와 패턴에 대한 시각을 다룹니다. 이번 강의를 활용한 몇몇 실전 사례를 살펴볼 수도 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

액션 아이콘 컴포넌트 질문

0

20

2

강의자료 공유 부탁드립니다

0

14

1

뉴스페이퍼 싱글템플릿 모바일 화면 디자인 질문

0

22

2

셀렉트(Select & Dropdown menu) - 파트 1 / selected 토글 버튼

0

18

2

스피너 아이콘 크기 질문

0

30

2

미리보기 빈칸생기는 현상

0

23

2

검색엔진 차단 noindex

0

37

2

7- 상품확대 인터렉션

0

32

3

아이콘 빌런 부분

0

32

2

인스턴스스왑

0

39

2

borderTransparent를 라이트/다크모드에 이중등록

0

31

2

해결되었습니다.

0

27

1

채팅 UI 추가 속성 설정 질문

0

36

1

배리어블 Value에 관해 질문있습니다.

0

56

1

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

0

50

1

Navigation Mobile 토글 베리어블이 안됩니당

1

47

2

실습파일

0

33

2

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

0

45

1

강의자료 요청드립니다.

0

68

3

강의 자료 요청드리고 싶어요~

0

59

2

강의 자료 요청 건

0

99

4

강의 자료 요청

0

77

2

디자인도 패턴인가요?

0

74

1

강의자료 요청 건

0

94

2