현고미 노트(H-gomi's Note)

프로젝트를 시작하면서 프로젝트의 제목을 어떻게 선택할 것인가에 대하여 Chat GPT에게 추천을 받아서 선택하였다.기존에 사용중인 이름은 제안해준 리스트에서 제거하였고 친근한 느낌의 한글 이름을 선택하게 되었다. 선택한 최종 프로젝트 명은 '마실지도' 이다. 질문 내용 : 다양한 음료(맥주, 위스키 등)의 가격 비교를 쉽게 할 수 있는 웹사이트를 만들려고 해. 소비자들이 쉽게 기억할 수 있으면서도 신뢰감을 줄 수 있는 한글 브랜드 이름을 추천해줄 수 있어? 답변 내용 : 1. 맛집다리 - 음료의 맛집 정보를 다리처럼 연결해준다는 뜻으로, 사용자가 다양한 음료의 가격을 쉽게 비교할 수 있는 느낌을 줍니다. 2. 술모아 - 술과 음료 정보를 모은다는 뜻으로, 여러 제품을 쉽게 찾아볼 수 있는 사이트라는 인상..

코딩 공부노트/다시 새출발~! 2024. 10. 30. 11:00

사이트를 게시할 호스팅을 선택하는데 있어서 비용을 들이지 않고 선택할 수 있는 옵션을 Chat GPT한테 물어봐서 선택할 수 있었다.가격비교 사이트의 경우 필요한 정보가 실시간으로 변경되어야 하기 때문에 동적 사이트도 가능한 Vercel을 사용하기로 결정하였다. 2. 무료 호스팅 서비스 사용 2-1. GitHub Pages (정적 사이트용) GitHub를 사용하고 있다면, GitHub Pages로 무료 호스팅을 할 수 있어. 주로 정적 웹사이트에 적합해.  1. GitHub에 레포지토리 생성: GitHub에서 새로운 레포지토리를 만들고 이름을 “username.github.io” 형식으로 설정해. 2. HTML 파일 업로드: 레포지토리에 index.html 파일을 포함한 웹 파일들을 업로드해. 3. Gi..

코딩 공부노트/다시 새출발~! 2024. 10. 29. 11:00

1. 데이터 모델 설계 이 단계에서는 데이터베이스에서 주류 정보, 판매처 정보, 사용자 리뷰와 권한을 관리할 수 있는 구조를 설계하는 것이 핵심입니다. 데이터베이스 구조를 효율적으로 설계하면 이후 기능 구현과 유지 보수가 훨씬 수월해질 것입니다. 주요 테이블 구성 주요 테이블과 각 필드를 다음과 같이 설정하는 것이 좋습니다:  1. drinks (주류 정보 테이블) • drink_id (INT, PK) - 고유 주류 ID • name (VARCHAR) - 주류 이름 • type (VARCHAR) - 주류 타입 (맥주, 위스키 등) • origin (VARCHAR) - 생산지 • alcohol_content (DECIMAL) - 도수 • volume (INT) - 용량 2. retailers (판매처 정보..

코딩 공부노트/다시 새출발~! 2024. 10. 28. 11:00

아이디어 : 주류 가격 정보 비교 웹사이트 및 향후 어플 개발아이디어 주요 기능 : 1. 온라인/오프라인 매장 주류 가격 비교2. 해당 주류 기본 정보 (주류 사진, 명칭, 기본설명, 생산지, 특징, 도수, 용량, 등...)3. 주류에 대한 전문가의 의견 게시판 향후 추가 기능 : 1. 구매자 리뷰2. 온라인 주문/오프라인 픽업 주문/택배배송Chat GPT 질문 :저는 웹 개발자로, 대한민국의 온라인 및 오프라인 매장에서 판매하는 주류 가격을 비교하는 웹사이트를 만드는 프로젝트를 계획하고 있습니다. 이 사이트의 목표는 사용자가 다양한 판매처의 주류 가격을 확인하고, 필요한 정보를 한눈에 볼 수 있게 하는 것입니다. 초기에는 맥주와 위스키를 중심으로 시작하지만, 추후에는 모든 주류로 확장할 계획입니다.  ..

코딩 공부노트/다시 새출발~! 2024. 10. 27. 22:20

Chat GPT를 통해서 구상해본 와이어프레임

코딩 공부노트/다시 새출발~! 2024. 10. 13. 13:00

와이어프레임은 각 페이지의 레이아웃과 정보 배치를 시각적으로 표현하는 작업이야.아래에 네 포트폴리오 웹사이트의 주요 페이지들에 대한 와이어프레임 구조를 텍스트로 먼저 설명할게. 각 페이지마다 핵심 콘텐츠가 어떻게 배치될지, 그리고 사용자 흐름에 맞춰 정보를 제공하는 구조를 단계적으로 나눠보자. 1. Home (홈 페이지) 구성 요소:  • 헤더: 상단에 네 이름과 로고, 네비게이션 메뉴 (About, Projects, Blog, Contact). • 영웅 섹션 (Hero Section): 큰 배경 이미지 또는 네 대표 프로젝트의 이미지, 짧은 한 줄 소개(예: “Frontend Developer with 3 Years of Experience”). • 대표 프로젝트 하이라이트: 프로젝트 썸네일 2~3개,..

코딩 공부노트/다시 새출발~! 2024. 10. 12. 13:00

사이트 맵 및 정보 구조 (IA) 설계를 시작하는 것은 웹사이트의 핵심 콘텐츠와 사용자 흐름을 정의하는 중요한 단계야. 이를 통해 페이지 간의 연결성, 정보의 우선순위, 그리고 **사용자 경험(UX)**을 시각적으로 정리할 수 있어. 효율적인 정보 구조 설계로 사용자가 필요한 정보를 쉽게 찾을 수 있게 해야 해. 여기 단계별로 시작할 수 있는 방법을 설명할게. 1. 사이트의 목적과 핵심 콘텐츠 정의 먼저, 포트폴리오 웹사이트의 목적과 담아야 할 핵심 콘텐츠를 명확히 해야 해. 포트폴리오는 네 경력과 역량을 보여주는 중요한 도구이기 때문에, 다음과 같은 콘텐츠를 고려해야 해.  • 홈페이지: 개인 소개, 대표 프로젝트 및 블로그 글 하이라이트. • 자기소개 / 이력서: 경력, 기술 스택, 교육 배경 등을 ..

코딩 공부노트/다시 새출발~! 2024. 10. 11. 13:00

프로젝트의 실행 계획을 체계적으로 수립하고 개발에 착수하기 전에 명확한 틀을 설정하는 것이 중요해. 다음 단계를 순차적으로 진행하면 좋겠어. 다음 단계 1. 사이트 맵 및 정보 구조 (IA) 설계  • 사이트 맵 작성: 웹사이트의 각 페이지와 섹션을 정리해 계층 구조를 시각화해야 해. 여기서 중요한 것은 사용자 경험을 고려해 필요한 정보가 빠르게 찾아질 수 있도록 배치하는 거야. • 예시: • 홈 • 자기소개 / 이력서 • 프로젝트 • 블로그 • 연락처 • 내비게이션 설계: 메뉴 항목들이 직관적이어야 하며, 각 섹션 간의 흐름이 자연스럽게 이어져야 해. 상단 메뉴, 푸터 등 기본적인 내비게이션 요소를 고려해. 2. 와이어프레임 및 기본 레이아웃 설계  • 와이어프레임: 사이트의 기본 레이아웃을 와이어프레..

코딩 공부노트/다시 새출발~! 2024. 10. 10. 15:37