행사 정보와 주요 일정을
한눈에 보는 메인
메인에는 행사명, 개최 기간과 장소, 주요 마감일을 담았습니다. 프로그램·초록 제출·등록 안내·사진 갤러리로 이어지는 바로가기와 후원사 로고 영역을 퍼블리싱하고, 콘텐츠의 길이와 화면 폭에 맞춰 배치와 간격을 조정했습니다.
KSER 2025 학술대회 홈페이지 퍼블리싱
학술 일정·초록 제출·참가 등록 정보를 연결한 학술대회 웹 퍼블리싱
- 프로젝트명
- KSER 2025 · KSER Academic Festival
- 기술
- React, Tailwind CSS, HTML5, CSS3, JavaScript
- 프로젝트 유형
- 학회·학술대회 홈페이지 · 반응형 웹
- 담당 범위
- 웹 퍼블리싱 · React 기반 UI 구현 · Tailwind CSS 반응형 스타일링
- 사이트 주요 기능
- 학술 프로그램 조회 · 초록 제출 · 참가 등록 · 맞춤형 결제
- 프로젝트 개요
-
- KSER 2025는 비뇨내시경·로봇 분야 학회의 제32차 연례학술대회인 KSER Academic Festival의 공식 안내 홈페이지입니다.
- React 기반으로 학술 프로그램 조회, 초록 제출, 참가 등록과 맞춤형 결제 기능을 제공하는 사이트입니다.
- 웹셀러는 제공된 디자인을 바탕으로 행사 소개, 프로그램, 초록 제출과 참가 등록 안내의 PC·모바일 화면을 퍼블리싱했습니다.
- 화면 구현 목표
-
- 개최 정보와 주요 마감일을 확인하고, 프로그램·초록 제출·참가 등록 안내로 이동할 수 있도록 화면을 구현합니다.
- 날짜별 시간표와 등록비 표, 영문 안내문을 PC와 모바일의 화면 폭에 맞춰 읽을 수 있도록 구성합니다.
화면에 적용한 색상과 서체
제공된 디자인의 파란색을 메뉴와 주요 안내 요소에, 빨간색을 행사명 강조에 적용했습니다. Pretendard를 바탕으로 영문 제목·본문·표의 글자 크기와 굵기를 구분했습니다.
Primary Color
Accent Color
Text Color
Title
Pretendard
Body
Pretendard
퍼블리싱 화면
학술대회 참가에 필요한 정보를
화면별로 명확하게
학술대회 홈페이지에서는 개최 정보와 주요 마감일, 세션 시간표와 참가 절차를 목적에 따라 찾아볼 수 있어야 합니다. KSER 2025는 영문 안내를 중심으로 구성되어 있어, 긴 제목과 표 형식의 정보가 화면 크기에 맞게 읽히도록 마크업과 스타일을 구현했습니다.
행사 정보와 주요 일정을
날짜별 프로그램과
세션 시간표
4일간의 프로그램을 날짜별 메뉴로 구분하고, 시간·장소·세션명을 표로 확인하는 화면을 구현했습니다. 선택한 날짜의 표시와 세션별 배경색을 반영했으며, PC와 모바일에 맞는 시간표 구성과 글자 크기를 적용했습니다.
초록 제출과 참가 등록을
안내하는 화면
초록 제출 안내는 주요 일정, 단계별 절차, 발표 주제와 작성 기준으로 구성했습니다. 참가 등록 안내에는 단계 표시와 등록비 비교표, 결제 방법·취소 규정 안내를 배치했습니다. 긴 안내문도 제목, 목록과 표를 통해 구분해 읽을 수 있도록 퍼블리싱했습니다.
웹셀러가 맡은 퍼블리싱 작업
웹셀러는 제공된 디자인을 React 기반 화면으로 옮기는 웹 퍼블리싱을 담당했습니다. Tailwind CSS로 공통 UI와 반응형 스타일을 적용하고, 프로그램 시간표와 안내표, 화면 크기에 따른 레이아웃과 탐색 동작을 구현했습니다.
-
React 기반 공통 UI
헤더와 메뉴, 페이지 제목, 바로가기, 후원사 로고와 푸터를 React 기반 UI로 구현했습니다. Tailwind CSS로 제공된 디자인의 색상과 서체, 간격을 공통 요소에 적용했습니다.
-
일정표·안내표 구현
학술 프로그램의 시간·세션 구분과 등록비 비교표를 구현했습니다. 셀의 너비, 줄바꿈, 정렬과 강조색을 조정해 정보의 구분을 유지했습니다.
-
반응형 화면 구성
메뉴와 바로가기, 날짜 선택 영역이 화면 폭에 맞게 배치되도록 구현했습니다. 영문 제목과 단계별 안내, 표의 글자 크기와 여백도 기기에 맞춰 적용했습니다.
학회·행사 홈페이지,
준비된 디자인을 실제 화면으로 구현하세요.
디자인 시안과 프로그램·참가 안내 등 필요한 화면을 알려주세요.
행사 준비 일정에 맞춰 퍼블리싱 범위를 상담해 드립니다.
지금 웹셀러에 상담하세요.
카카오 1:1 문의