이벤트 동반 일정 디자인 프롬프트

기존 프로젝트 스택을 사용하여 [PROJECT] 및 [AUDIENCE]용 편집 가능한 모바일 우선 앱 프로토타입을 제작하세요. 작업: 이벤트 동반 일정.

필수 콘텐츠 및 구조

시간과 트랙별로 세션을 탐색하고 개인 일정을 구성하며, 일정 충돌, 장소 변경과 이벤트 공지를 표시하세요.

화면 및 탐색

연결된 세 개의 뷰, 즉 일정, 세션 상세 정보, 내 일정을 제작하세요. 선택한 기록이 화면 제목이나 요약에 계속 표시되게 하세요. 명시적인 뒤로 가기 동작을 지원하고 뷰 사이를 이동할 때 작성 중인 입력을 유지하세요. 기본 동작을 관련 콘텐츠 가까이에 배치하고 모바일 안전 영역, 표시된 소프트웨어 키보드와 길게 번역된 레이블을 고려하세요. 데스크톱 너비에서는 단계를 제거하거나 작업을 변경하지 않고 구성을 조정하세요.

프로젝트 입력 자료

이름, 기록, 레이블, 수량과 대상에는 [APPROVED_CONTENT]를 사용하세요. 운영 관련 내용을 지어내지 말고 누락된 데이터는 요청하세요. 데모 기록에는 가상 브랜드 Gather를 사용할 수 있으며 샘플 데이터라고 표시하세요. 로컬 프로토타입 상호작용으로 처리되는 동작과 인증, 데이터 유지, 권한 또는 백엔드가 필요한 동작을 설명하세요. 해당 연동을 명시적으로 구현하고 테스트하지 않았다면 외부 서비스에 연결하거나 거래가 완료되었다고 주장하지 마세요.

디자인 방향

[BRAND_RULES]를 따르세요. 브랜드가 제공되지 않았다면 검정, 흰색, 애시드 옐로와 굵은 콘퍼런스 타이포그래피를 사용하세요. 일반적인 대시보드 카드를 반복하지 말고 고유한 콘텐츠와 컨트롤을 통해 워크플로를 알아볼 수 있게 하세요. 일관된 간격 척도와 명확한 텍스트 위계를 사용하세요. 눈에 보이는 키보드 포커스, 접근 가능한 이름, 충분한 대비와 색상에 의존하지 않는 상태 레이블을 포함하세요. 동작 줄이기 설정을 존중하고 애니메이션 전환은 선택 사항으로 유지하세요.

작업별 승인 검사

• 겹치는 저장된 세션과 시간대 변경 사항을 선택 항목에서 조용히 제거하지 말고 명확히 표시하세요.

인터랙션 상태

로컬 샘플 데이터로 세 화면의 정상 경로를 구현하세요. 유용한 빈 상태, 작업 완료 전 유효성 검사, 로딩 또는 대기 상태, 복구 가능한 실패 상태를 포함하세요. 파괴적인 변경에는 검토 또는 실행 취소 경로가 필요합니다. 세 화면 모두에서 레코드 상태를 일관되게 유지하세요. 일부만 작성된 입력을 알림 없이 버리거나 재시도 후 사용자의 선택을 변경하지 마세요.

결과물 및 검토

편집 가능한 앱 화면을 제공하고 데이터 모델, 로컬 저장소 동작, 구현되지 않은 연동을 설명하세요. 320px 및 더 넓은 뷰포트에서 키보드 탐색과 긴 콘텐츠를 사용해 테스트하세요. 기능을 추가하기 전에 위의 작업별 승인 검사를 통해 결과를 검토하세요. 데모 동작과 실제 운영 중인 프로덕션 서비스를 명확히 구분하세요.

참고 첨부 파일 및 재구성 목표

이 프롬프트의 다운로드 번들에 있는 reference.webp를 프롬프트와 함께 OpenDesign에 첨부하세요. 유사한 구성과 계층 구조를 갖춘 편집 가능한 결과물을 제작하되, 참고 이미지 전체를 완성된 인터페이스로 삽입하지 마세요. 허구의 샘플 레이블과 충돌하는 경우 승인된 프로젝트 콘텐츠와 브랜드 규칙을 우선하여 유지하세요. 이미지가 없거나 읽을 수 없다면 시각적 충실도를 주장하지 말고 이미지를 요청하세요.

참고 구성 — 연결된 앱 화면 3개

첨부 이미지는 연한 애시드 옐로 프레젠테이션 배경 위에 같은 너비의 모바일 화면 세 개로 구성된 가상 콘퍼런스 앱 Gather를 보여 줍니다. 일정, 세션 상세 정보와 내 일정을 연결된 앱 뷰로 제작하세요. 세 화면으로 된 몽타주를 하나의 페이지로 렌더링하거나 전체 참고 이미지를 배경으로 사용하지 마세요. 모바일 너비에서는 한 번에 하나의 뷰만 표시하세요. 더 넓은 미리보기에서는 비교를 위해 여러 뷰를 나란히 표시할 수 있지만, 실제 앱은 탐색 구조와 상태를 유지해야 합니다.

일정 화면

얇고 어두운 외곽선이 있는 미색 캔버스를 사용하세요. 헤더 왼쪽에는 굵은 검정 Gather 워드마크를, 오른쪽에는 간결한 이벤트 날짜 및 장소 정보와 검색 아이콘을 배치하세요. 그 아래에 매우 크고 굵은 일정 제목과 한 줄짜리 짧은 소개를 배치하세요. Tue Oct 14, Wed Oct 15와 Thu Oct 16으로 구성된 3열 날짜 선택기를 추가하세요. 선택한 날짜는 애시드 옐로, 나머지는 옅은 구분선이 있는 흰색으로 표시하세요. 그 아래에는 모든 트랙 및 모든 유형 필터와 간결한 목록 보기 컨트롤을 배치하세요. 기본 목록은 좁은 시간 열, 세로형 트랙 색상 막대, 대문자 트랙 레이블, 굵은 세션 제목과 더 작은 장소 레이블로 구성하세요. 각 행 오른쪽에는 원형 더하기 동작을 정렬하고 얇은 가로 구분선을 추가하세요. 트랙에는 파랑, 노랑, 분홍, 초록과 보라를 사용하되 색상만이 유일한 단서가 되지 않도록 이름도 표시하세요. 하단 탐색 영역은 검정으로 하고 일정, 내 일정, 공지와 더 보기를 포함하세요. 활성 아이콘과 레이블은 노란색으로 표시하세요.

세션 상세 정보 화면

밝은 목록 화면과 거의 검은색인 상세 화면을 대비시키세요. 상단에는 뒤로 가기, 북마크, 공유 컨트롤을 배치하세요. 상단 섹션 배경에 은은한 콘퍼런스 사진을 넣고, 텍스트 대비를 유지하도록 어두운 오버레이를 적용하세요. 작은 노란색 제품 라벨, 노란색의 큰 두 줄 제목 Design Systems at Scale, 흰색 보조 문구를 표시하세요. 그 아래에는 윤곽선 아이콘과 함께 캘린더/시간 및 장소/회의실 메타데이터를 두 열로 배치하세요. 이어서 얇은 윤곽선의 주제 태그, 짧은 설명, 원형 인물 사진과 이름, 역할, 조직, 펼침 화살표로 구성된 발표자 행을 배치하세요. 넓은 산성 노란색 내 일정에 저장 버튼을 배치한 다음, 어두운 윤곽선의 캘린더에 추가 버튼을 넣으세요. 구분선 아래에는 작은 모두 보기 액션과 간결한 세션 행으로 관련 세션을 소개하세요. 뒤로 가는 탐색 경로를 명확하게 유지하고, 데모 데이터를 교체할 때 실제 발표자나 추천 문구를 꾸며내지 마세요.

내 일정 화면

거의 흰색인 화면으로 돌아가 Gather 헤더, 날짜, 장소, 설정 아이콘을 반복해서 표시하세요. 큰 내 일정 제목과 짧은 부제목을 사용하세요. 연한 노란색 알림 배너에는 벨, 굵은 시간대 변경 제목, 보조 설명, 닫기 컨트롤을 넣으세요. 그 아래에 내 아젠다, 충돌 (1), 알림 (2)을 세 개의 세그먼트로 표시하고, 선택된 세그먼트는 흰색 텍스트가 있는 검은색으로 표현하세요. 저장된 세션에는 일정 행 구조를 재사용하세요. 시간이 겹치는 세션은 연한 분홍색 패널, 빨간색 시간 및 트랙 강조 표시, 명시적인 저장된 세션과 시간 겹침 라벨, 둘 다 유지 컨트롤을 사용하세요. 변경된 장소는 빨간색 회의실 변경: B1 → B2 문구로 표시하세요. 검은색 하단 탐색을 다시 사용하되 내 일정을 활성화하고, 알림에는 노란색 개수 배지를 표시하세요.

시각적 위계와 토큰

워드마크와 큰 제목에는 굵은 중립적 그로테스크 서체를, 본문과 컨트롤에는 읽기 쉬운 산세리프를 사용하세요. 기본 화면에는 검은색과 거의 흰색을, 주요 액션과 선택 상태에는 산성 노란색을 사용하세요. 8px 간격 체계, 16–24px의 페이지 좌우 패딩, 최소 44px의 터치 영역, 제목/본문/메타데이터 간의 뚜렷한 대비로 시작하세요. 이는 측정된 픽셀 사양이 아니라 구현을 위한 시작값으로 간주하세요. 스크린샷의 간결한 시간표, 굵은 상세 제목, 선명한 명암 대비를 유지하세요. 자체 제작하거나 사용 허가를 받은 콘퍼런스 사진과 가상의 발표자 인물 사진을 사용하고, 라벨은 실제 텍스트로 유지하세요. 이 예시의 둥근 컨트롤은 Gather의 시각적 레퍼런스에 속하며, 디자인 프롬프트 라이브러리 사이트의 버튼과는 별개입니다.

상호작용 및 데이터 계약 — 구현 및 검증

안정적인 세션 ID, 제목, 트랙, 유형, UTC 시작/종료 시각, 이벤트 시간대, 회의실, previousRoom, 발표자, 저장 상태가 포함된 로컬 데모 레코드를 사용하세요. selectedDate, searchQuery, 트랙/유형 필터, savedSessionIds, dismissedNoticeIds를 명시적으로 관리하세요. 이미지는 개념적 표현이며, 이미지의 날짜와 시간대 문구는 공인된 이벤트 시간표가 아닙니다. 표시된 위계는 유지하되 일관되지 않은 데모 날짜는 수정하세요. 날짜를 선택하면 날짜 강조 표시와 목록이 업데이트되어야 합니다. 검색은 세션명과 발표자명을 대상으로 하며, 필터는 조합해 사용할 수 있어야 하고 유용한 빈 상태와 초기화 액션을 제공해야 합니다. 행을 열면 동일한 세션의 상세 화면이 표시되어야 하며, 뒤로 가기를 누르면 이전 목록, 필터, 스크롤 위치가 복원되어야 합니다. 더하기 및 내 일정에 저장 컨트롤은 동일한 세션을 정확히 한 번만 저장하고 명확한 저장 완료 상태로 변경되어야 합니다. 삭제하면 내 일정과 알림도 일관되게 업데이트되어야 합니다. 같은 날짜에 저장된 세션의 시간 겹침은 startA < endB 및 startB < endA로 감지하세요. 경고와 두 레코드를 모두 표시하고, 둘 다 유지는 어느 선택도 몰래 삭제하지 않은 채 충돌을 확인 처리해야 합니다. 충돌에는 영향을 받는 세션 쌍을 표시하고 각 상세 화면으로 연결하세요. 시간대를 변경하면 동일한 UTC 시점을 선택한 명명 시간대로 변환하고, 표시되는 날짜/시간을 업데이트하며, 그룹을 다시 계산해야 합니다. 실제 이벤트 진행 시간은 변경하면 안 됩니다. 시간대 라벨은 계속 보이게 하고 닫을 수 있는 설명을 제공하세요. 회의실 변경 알림에는 이전 회의실과 새 회의실을 표시하세요. 알림을 닫아도 새 회의실로의 변경은 취소되지 않습니다. 캘린더에 추가에는 유효한 로컬 캘린더 파일을 제공하거나 데모 액션임을 명확히 표시하세요. 외부 캘린더 연결을 암시해서는 안 됩니다. 공유에는 플랫폼 공유 시트를 사용할 수 있으며, 사용할 수 없을 때는 링크 복사로 대체하세요. 북마크, 알림 닫기, 탐색에는 눈에 보이는 키보드 포커스와 접근 가능한 이름이 필요합니다. 주요 액션은 모바일 안전 영역 위에서 접근할 수 있게 유지하세요. 저장된 세션 없음, 일치하는 결과 없음, 복구 가능한 저장소 오류 상태를 포함하세요. 별도 요청이 없는 한 결제, 계정 생성, 실시간 이벤트 업데이트를 구현하지 마세요.

시각적 비교 및 결과물 전달

1. 동일한 비율로 결과물을 첨부 이미지와 비교하세요. 장식적인 세부 사항을 다듬기 전에 주요 영역의 배치, 이미지의 상대적 크기, 줄바꿈, 간격, 타이포그래피 계층, 대비, 활성 상태 및 콘텐츠 밀도를 검토하세요.
2. 그런 다음 데스크톱 텍스트를 작은 레이블에 억지로 끼워 넣지 말고 좁은 레이아웃을 테스트하세요.
3. 로고, 사진 및 아이콘은 별도의 에셋으로 유지하고 의미 있는 모든 레이블은 편집 가능하게 만드세요. 사용할 수 없는 글꼴/에셋과 의도적으로 다르게 구현한 부분을 나열하세요. 작업 파일과 함께 구현된 동작 및 남은 연동 작업을 간결하게 설명하세요. 프롬프트만으로 픽셀 단위까지 동일한 결과를 약속하지 마세요.