웹개발

마우스 커서를 라이브러리에서 직접 구현으로 바꾸었다. 페이지가 이동할 때 계속 hover 상태에서 굳어버리는 버그가 있어서, 라이브러리에서는 오히려 안 된다고 생각하고 직접 구현으로 바꾸는 계기가 되었는데 덕분에 커스텀은 쉬워진 것 같다. 기타 .link 클래스 위에서 hover되는 것도 했고, 좀 자연스럽게 바꾸었다. 그리고 이제 갤탭에서도 마우스 커서 나오는 짜증나는 버그를 해결했다.
공지사항 수정을 사이트에서 하고 싶어서 구글 로그인을 혼자서 쓰는 관리 페이지에 넣어놓고 바로 수정 가능하게 해두었다. 이제 한동안은 웹사이트를 건들 일은 없을 것 같다. 이제 블로그 스킨을 만져도 될 것 같다. 리액트 아니고 그냥 쌩으로 해도 괜찮을 듯하다.
메인 화면 이랬던 게 이렇게! 23:18 : 비율 바꿨다. 최대 32:9 -> 21:9로. 너무 높이가 좁아서. (이건 모든 페이지에 공통되게 적용됨) 사이드바 (-> 위에서 내려옴) 이랬던 게 이렇게! 브랜딩 이랬던 게 이렇게! 소개 페이지 이랬던 게 이렇게! 23:15 역시 비율 변경으로 사진의 비율 맞추기 위해 20% -> 30% 프로젝트 페이지 이랬던 게 이렇게! 앱 세부 페이지 이랬던 게 이렇게! 공지사항 이랬던 게 이렇게! 그리고 세부 페이지는 이전 꺼를 캡쳐를 안 했다. 가이드라인을 따라서 이렇게. 개인정보 처리방침 페이지 이랬던 게 이렇게! 전체적으로 디자인은 그대로 가되, 페이지마다 중구난방인 느낌이 있어서 가이드라인을 정하고 그대로 다른 페이지에 적용하는 식으로 페이지를 모두 고쳤다. ..
메인 내용은 아직 안 채웠고, 구성은 이렇게 해두었다. 확실히 큰 화면에서는 굳이 꽉~ 채울 필요는 없어보인다. 이젠 "Side"바가 아니게 됐지만, 어쨌든 뭐 ... 그리고 공지사항 폭도 바꾸었다. 이것들 다 max-width가 1440px 이다. 보면 확실히 그 전보다 통일성을 확실히 보이고 있다. 폭도 그렇고 위에 헤더 밑 이미지 썸네일? 부분도. 메인 화면이랑 결을 같이 한다. 그리고 이제 소개 부분을 다시 하고 있는데, 일전에 태블릿으로 가이드라인을 세운 것을 지키는 모양으로 가고 있다. 2 : 3 : 5 이런 식으로 할 것이다. 내 신상에 대한 건 이미지 헤더로 올리려는 중.
일단 deploy는 했다. 급한 불은 껐다 이거다. 하지만 완성도 덜 했고, 무엇보다 완전 모르는 상태에서 맨땅에 헤딩하듯이 했기 때문에 부족한 게 많고 통일된 가이드라인 없이 중구난방으로 완성한 느낌이 있어서 처음에 작업한 부분은 거의 다시 하는 중. 너무 100%로 많이 해서 좌우로 시선이 너무 왔다갔다한다. 해서 일단은 이런 가이드라인을 세워놓고 작업 중이다. 나만 알아볼 수 있으면 됐지 뭐. 아이엔랩 ienlab 안드로이드 개발자, 그래픽 디자이너. www.ien.zone
일단 저번에 올리지 못했던 Sidebar! 홈, 소개글, BI, 개발 (개별 앱 페이지 포함), 공지사항, 개인정보 처리방침을 넣었다. 특히 하위 메뉴가 선택돼있어도 개발에 회색 음영 넣는 것까지 어찌저찌 했다. 굿. 공지사항은 Firestore에서 마크다운 형식으로 올린 데이터를 가져와서 띄운다. 그리고 아무래도 다른 곳에서 값을 가져오다 보니 로딩 화면이 뚝뚝 끊겨서 Shimmer (Skeleton) 넣었다. 훨씬 부드럽군. 이거랑 mui의 Fade 넣어서 부드럽게 바뀌도록 했다. 이건 나중에 사이트 열고 나서 손봐야겠다. 너무 귀찮아... 딱히 중요한 부분도 아니라서.. 저건 react-markdown 라이브러리를 이용해서 마크다운 -> HTML태그로 바꿔준다. 여기도 Shimmer 있음. 개인정보..
앱 세부 페이지 브랜드 아이덴티티 페이지 여기까지 했다 일단..
intro 페이지는 거의 마무리하는 중이다. 앱들은 저렇게 배경 페이지와 앱 이름, 링크, 스토어만 하고 세부 내용은 세부 페이지에서. 연락처는 연락처 넣고 자동 메일 서비스도 하려고 한다 :)
아이엔 / ienground
'웹개발' 태그의 글 목록