Design

컨셉

나한테 필요한것을 모은 MyBoard (2022-12)

MyBoard 페이지
  • 제작 동기
    • 공부 기록 및 진척도 관리 보드가 필요함
  • 조건
    1. 자주 찾게되는 링크를 모아둔 즐겨찾기가 필요함
    2. 다음에 보려고 미뤄둔 링크를 보여주는 링크 리스트가 필요함
    3. 추가/삭제가 편한 구조
      • 한눈에 보고싶어서 대시보드를 택함
      • 당장은 조금 불편하더라도 사용하면서 조금씩 고칠듯 함

MyBoard UI 변경 (2023-06~)

MyBoard 페이지
  • Timeline 추가 : 공부나 일 관련 기록을 남기고 싶어서 추가함
  • StudyList 수정 :
    • D-day를 바로 확인 가능하도록 함
    • 할당량 표시를 다른 표와 구분되게 변경함
    • 링크 모음, 즐겨찾기 링크를 우측으로 모음(개발정보글(links)은 최신거 먼저 보기때문에 사이즈를 줄이고, 즐겨찾기(Link for)는 바로 클릭 할 수 있도록 사이즈를 키움)

내가 쓰고 보기 편한 블로그(추가 : 2023-05-10~)

Blog 페이지
  • 제작 동기
    • notion엔 너무 많은 글이 쌓여 폴더가 깊어지니 글 찾기가 어려워짐
      .'.글 정리도 할겸, 찾아봤던 글들은 블로그로 분리하려고 추가함
    • velog 쓰려다 안되는게 많아서 불편해서 따로 만들어보자 함
  • 조건
    1. 좌측에 글 목록 메뉴가 있어야함
    2. 우측에 게시글이 있어야함
    3. 게시글 우측에 velog처럼 제목 앵커 메뉴가 있어야함
    4. 글 작성이 편해야함

컬러

  • 기본 컬러파레트 : 시원 뚜렷한 파랑!
    ● #497CFF ● #C7DAFF ● #F2F8FD
    ● #333333 ● #7B7B7B ● #B4B4B4 ● #DDDDDD ● #F5F5F5
  • 블로그 컬러파레트
    ● #fddc84 ● #fdf5d8 ● #0fb0c5 ● #f1f9f9 ● #4479ff

파비콘

  • 파비콘은 버블밀크티입니다
    (최애음료 : 공차블랙밀크티펄추가당도100%)
  • 원래는 밀크티에 물든 고양이였으나 16x16은 너무 작아서 형체가 잘보이지 않더군요..ㅠ
  • 아쉬운대로 월별 프로필로 사용할 예정

    • 힘듬

    • 무난함

    • 바쁨

    • 신남
    1분만에 탄생한 밀크티 고영..
    컬러팔레트 : ● #497CFF ● #F4E2C8 ● #371717 ● #FF3838

Development

MyBoard

go to github
  • 2022-12 SCSS로 디자인 틀잡고 학습 진척도 기능만 추가한채로, 하드코딩으로 사용함(공부하기 바빠서.. 당장 사용하기 위해 필요한것만 만듬)
  • 2022-12 도서 학습 진척도 기능 추가 : CreateReadingStudyTable클래스
    도서 학습 진척도 적용 예시
    • 책 전체 페이지에 대한 총 진행률을 보여줌
    • 남은 페이지 수와 목표까지 남은 일수를 계산해 1일 최소 할당량을 계산해줌
    • 2023-05-24 사용하면서 불편했던 UI 수정&추가
      도서 학습 진척도 적용 예시
      • D-day 추가
        • 다른 section에서 찾아봐야하는 불편함을 없앰.
          -> 눈에 띄도록 배경색을 줌 (목표일 전 : 파랑, 목표일 후 : 빨강)
        • 목표 달성시 완료일을 표시함
      • 오늘 할당량 UI 수정 :
        다른 표와 UI차이를 줌. 진행률 100% 시 할당량 표시하지 않음
    • 2023-06-04 클래스 명 변경, 단위 별 출력 추가
      클래스명 : CreateReadingStudyTable -> CreateStudyTable
      단위별 출력 : 페이지 -> p, 문제 -> 문, 강의 -> 시간
      도서 학습 진척도 적용 예시
  • 2023-05-09 ~ 10 : 블로그 추가로 인한 코드 수정&정리
    • 페이지가 늘어나면 현재 구조로는 복잡해질것 같아 폴더를 나눠 정리를 함
      • /blog : blog 페이지 문서
        • /posts : 페이지 별 문서
      • /making-record : making-record 페이지 문서, 이미지들
      • /script : js 파일들
        • /util : 두루 쓰일 스크립트들
        • /page-blog : blog 페이지에서 사용될 스크립트들
        • /page-home : home 페이지에서 사용될 스크립트들
      • /scss : scss 파일들
      • /css : scss 파일이 css로 변환되어 저장됨
      • /image : 두루 쓸 이미지들(파비콘, 프로필이미지)
    • D-day 기능 추가 :자주 쓸 것 같아 calculateDday함수로 만듬
      D-day 기능이 적용된 리스트
    • 링크 리스트를 문서에서 분리 : 문서에 link가 늘어날 수록 복잡해지기에, printLinkList와 printQuickLinksList클래스를 만들어 출력하도록함
    • 다크/라이트 모드로 두가지 테마 추가 : localStorage에 값을 저장해서 선택했던 테마를 기억하도록함
      MyBoard 페이지-light모드 MyBoard 페이지-dark모드
  • 2023-05-23 : timeLine 추가
    • 공부나 일하면서 있었던 일들 SNS처럼 짧은 글로 남기기 위함. 한 줄 일기 같은 느낌으로..!
    • 프로필 이미지를 기분따라 선택할 수 있음 :
      '' | 'tired' | 'fun' | 'busy'
    • 세줄 이하로 보여주고, '+더보기'버튼 클릭 시 가려진 내용을 볼 수 있음
    • 최신 메세지를 5개씩 보여주고, 스크롤의 남은 높이가 마지막 메세지 높이의 1.5배 이하일 때, 새 메세지를 5개를 추가로 출력해서 보여줌(무한 스크롤 방식 참고)
      제목 앵커 출력 예시
  • TODO :
    • making-record 페이지의 좌측 상단 버튼에 hover시 아이콘도 색이 바뀌도록 수정

Blog

  • 블로그 추가 : 2023-05-14
    • 좌측에 전체 글 목록 출력, 파라미터에 따라 현재 글 표시 :
      printSubMenuList함수
    • 파라미터에 따라 현재 글 출력 : printPost함수
    • 현재 글의 제목에 따라 제목 앵커 출력 : printAsideList함수
      제목 앵커 출력 예시
  • TODO :
    • 로딩 대기 UI 추가
    • 검색 기능 추가
    • 포스트 내부에 코드 추가 방식 찾아보기
    • 메타 태그를 바꿔줄 방법 고민?