취준생 UI/UX 웹서비스디자인 + SEO마케팅

브랜드 리서치 & 전략 수립 브랜드의 현재 상태와 경쟁 환경을 조사하고,
핵심 가치와 디자인 방향을 설정합니다.

• Lv.1 (초급)
• Brand Research

정보 설계(IA) 및 콘텐츠 구조 기획 사용자가 필요한 정보를 쉽게 탐색할 수 있도록
콘텐츠의 계층과 메뉴 구조를 설계합니다.

• Lv.1 (초급)
• 콘텐츠 기획

디자인 시스템 구축 컬러, 타이포그래피, 버튼, 입력 요소 등
일관된 UI 제작을 위한 디자인 기준을 구축합니다.

• Lv.1 (초급)
• 컬러·타이포·컴포넌트

사용자 여정 분석 & 타깃 정의 사용자의 행동과 목표를 분석하여 페르소나와
사용자 여정에 기반한 핵심 타깃을 정의합니다.

• Lv.2 (중급)
• User Journey

Figma 기반 하이파이 UI 제작 와이어프레임을 바탕으로 실제 서비스와 유사한
완성도의 웹·모바일 UI 화면을 제작합니다.

• Lv.1 (초급)
• Figma

반응형 레이아웃 설계 PC, 태블릿, 모바일 등 다양한 화면 크기에
유연하게 대응하는 UI 레이아웃을 설계합니다.

• Lv.2 (중급)
• Responsive Design

UI 컴포넌트 시스템 구성 반복적으로 사용하는 UI 요소를 컴포넌트화하고
재사용 가능한 디자인 시스템으로 관리합니다.

• Lv.2 (중급)
• Component System

인터랙션 프로토타입 제작 화면 전환, 버튼 동작, 스크롤 등 사용자 행동을
확인할 수 있는 인터랙션 프로토타입을 제작합니다.

• Lv.2 (중급)
• Prototype

HTML 구조 이해 웹문서의 기본 구조와 시맨틱 태그의 역할을 이해
하고 콘텐츠에 적합한 HTML 마크업을 작성합니다.

• Lv.1 (초급)
• Semantic HTML

CSS 스타일 & 반응형 레이아웃 CSS 선택자와 박스 모델, Flex, Grid를 활용하여
다양한 화면에 대응하는 레이아웃을 제작합니다.

• Lv.1 (초급)
• Responsive Web

JavaScript 기초 인터랙션 구현 JavaScript 기본 문법과 DOM 조작을 활용하여
버튼, 메뉴, 탭 등의 동적 기능을 구현합니다.

• Lv.1 (초급)
• DOM Interaction

Cursor·ChatGPT 활용 자동 코딩 Cursor와 ChatGPT를 활용하여 코드를 생성하고
오류를 수정하며 효율적인 개발 과정을 실습합니다.

• Lv.2 (중급)
• AI Coding

SEO 개념·검색 흐름 이해 검색엔진이 웹페이지를 수집하고 분석하여
검색 결과에 노출하는 기본 흐름을 이해합니다.

• Lv.1 (초급)
• SEO Basics

키워드 리서치 & 검색 의도 분석 사용자가 실제로 검색하는 키워드를 조사하고
정보형·비교형·전환형 검색 의도를 분석합니다.

• Lv.1 (초급)
• Search Intent

온페이지 SEO 페이지 제목, 메타 설명, 헤딩 구조, 이미지 대체 텍스트 등
페이지 내부의 검색 최적화 요소를 학습합니다.

• Lv.2 (중급)
• 메타 태그·헤딩 구조

기술적 SEO 검색엔진 크롤링, 웹페이지 속도, 모바일 환경,
웹 접근성 등 기술적인 SEO 요소를 점검합니다.

• Lv.2 (중급)
• Technical SEO

SEO 친화형 화면 기획 검색 키워드와 콘텐츠 우선순위를 반영하여
사용자와 검색엔진이 이해하기 쉬운 화면을 기획합니다.

• Lv.2 (중급)
• SEO UX Planning

콘텐츠 구조·전환 요소 설계 검색 유입 사용자가 필요한 정보를 빠르게 확인하고
다음 행동으로 이동할 수 있도록 콘텐츠를 구성합니다.

• Lv.2 (중급)
• Conversion Structure

CTA·배너·전환 최적화 디자인 CTA 버튼과 배너의 위치, 문구, 시각적 위계를
설계하여 사용자의 클릭과 전환 행동을 유도합니다.

• Lv.2 (중급)
• Conversion Design

검색 노출 중심 UI/UX 패턴 검색 결과에서 유입된 사용자의 목적에 맞는
랜딩페이지와 콘텐츠 UI 패턴을 실습합니다.

• Lv.2 (중급)
• Landing Page UX

반응형 HTML/CSS 퍼블리싱 PC, 태블릿, 모바일 화면에 대응할 수 있도록
유연한 구조의 반응형 웹사이트를 제작합니다.

• Lv.2 (중급)
• Responsive Publishing

Figma → 반응형 화면 확장 Figma에서 제작한 PC UI를 기준으로 태블릿과
모바일 화면에 적합한 레이아웃으로 확장합니다.

• Lv.2 (중급)
• Adaptive UI

AI 활용 페이지 자동 생성 생성형 AI와 코딩 도구를 활용하여 반복되는
페이지와 UI 컴포넌트를 빠르게 생성하고 수정합니다.

• Lv.2 (중급)
• AI Web Coding

사용자 테스트 기반 검증 실제 사용자의 행동과 피드백을 수집하여
사용성 문제를 발견하고 UI/UX를 개선합니다.

• Lv.2 (중급)
• Usability Test