서비스 구조
1. 레이아웃
알고리즘 베스트 20 문제 풀이 서비스는 총 여섯 가지 영역으로 이루어져 있습니다.
- 상단 네이게이션 바 : 언어 선택(JavaScript, Python)을 할 수 있는 셀렉트 박스, 풀이를 마크다운으로 다운로드 받을 수 있는 버튼과 코드 실행 환경으로 이동하는 버튼이 배치되어 있습니다.
- 왼쪽 사이드 메뉴 : 문제 목록이 나와있는 메뉴로 해당 메뉴 선택 시, 문제로 이동이 가능합니다. 각 문제들은 URL이 달라 문제를 공유하기 좋습니다.
- 중앙(문제 및 요구사항) : 문제 종류와 문제 요구사항이 기입되어 있습니다.
- 오른쪽 상단(타이머) : 문제 풀이 시간을 측정할 수 있습니다. 시간은 문제 단위가 아니라 풀이 총괄 시간입니다. 타이머는 시작, 정지, 리셋 버튼으로 작동할 수 있습니다.
- 오른쪽 중앙(풀이 공간) : 문제를 풀어볼 수 있는 에디터 영역이 있습니다. 에디터 아래 부분에는 문제풀이 결과를 확인할 수 있는 Result창이 있어 실행 결과에 따라 정답, 오답, 오류 내용 등을 확인할 수 있습니다.
- 오른쪽 하단(Chat AI) : ChatGPT를 활용하여 질문을 주고 받으며 문제의 힌트를 얻을 수 있습니다.
2. 문제 풀이
왼쪽 사이드 메뉴에서 풀이할 문제를 선택하면 해당 문제 화면으로 이동합니다. 문제를 풀기 전, 오른쪽 상단에 있는 타이머 시작
▶️ 버튼을 눌러 풀이 시간을 측정해 보세요. 채점하기
를 누르면 자동으로 타이머가 멈춥니다. 문제 이동에 따라 타이머가 멈추지는 않으니 전체 시간을 측정해 볼 수도 있습니다.
맨 위에 나와있는 문제 난이도와 종류를 확인한 뒤, 아래 문제를 읽어주세요. 문제는 문제 설명, 제한 사항, 입출력 예시, 입출력 설명으로 구성되어 있습니다. 모두 자세히 확인한 뒤, 오른쪽 에디터에 정답 코드를 입력해 주세요.