codestates / codestates/Memory-It
[Dev Log ] UI: Experimental 반응형? 적응형?
- Dominant language
- JavaScript
- Stars
- 1
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
### 퍼스트 프로젝트와의 다른점
- 퍼스트 프로젝트때에도 반응형 웹서비스를 만들었다. 브라우저 크기에따라 같이 변화하는 반응형인건 맞지만 완성도가 아쉬웠다.
이번에는 시간이 더 주어진 관계로 이왕이면 조금더 완성도 있는 웹서비스가 됐으면한다. 그래서 적응형을 함께 도입해보면 어떨까 싶다.
- 반응형은 브라우저의 크기에 맞게 알맞은 크기로 자동조절된다는 장점이있고
적응형은 특정한 크기마다 해당환경에 맞는 다른 UI를 가진다는 장점이있다.
- 나는 이 두가지가 각자의 장점이라기 보다는 **_특징_** 이라고 생각한다. 이 특징을 장점으로 만드는게 제작자가 하는 일이아닌가싶다.
- 아무튼 나는 디바이스의 크기에따라 다른 UI(완전히 다른 UI가 아닌 적절히 다른)가 필요하다고 생각한다.
- 역시나 처음이다보니 이런저런 삽질 후에 곧 몇가지 기준이 필요하다는 것을 깨달았다.
1. 크기별로 보여줘야할 UI, 보여주지말아야할 UI를 정해야할지도 모른다.
막상 만들려고하니 막막해서 모바일을 지워하는 웹 서비스들을 참고해봤다.
유튜브, 오늘의집, WVproject, 29cm, twitter 등등
2. 1번 내용을 추가하자면 여기에도 몇가지 기준이 필요한데, 예를들어 PC버전에서 사이드바, 메뉴바가 많은 역할을 한다면 모바일버전에서는 하단 네비게이터를 만들어주면 용이해진다.
반대로 메뉴바가 많은 역할을 하지않는다면 모바일버전에서는 메뉴바안에 있는 요소들을 간소화시켜(예를들어 '개인정보수정'이라는 문구를 사람모양 아이콘과같이 직관적으로 간소화시킬 수 있다) UI를 크게 변화시키지 않을 수 도 있다.
## 예시(현재는 골격만 잡힌 상황)

- 왼쪽엔 사이드 바가 있고 중앙상단바에는 색상(감정)별로 바로 필터링해주는 버튼들이 포함되어있다.
---


- 태블릿버전에서는 왼쪽 사이드바와 색상별 필터링 버튼들이 사라진것을 확인할 수 있다.
- 해당기능들은 제외시키려는 것은아니고 단지 아직 구현이 안된 상태임
---

- 모바일버전에서는 우측에 칸도 없고 상단바와 중앙화면이 끝이다.
- 모바일버전 역시 해당기능들을 제외시키려는것이아니고 아직 구현이 안된상태
## 지금은 디바이스 크기별로 구분해본것일 뿐
- 이 형태로 확정된것은 아님. 제목에서 볼 수 있듯이 지금으로선 내가 별도로 만들어본 하나의 실험체🤓🤓 팀회의시간떄에 팀원들과 상의가 필요함.
- 디바이스별로 제외 시킬 UI를 정했지만 없어진 부분을 어떻게 보여줄지는 아직 만들지않음.
지금 단계는 적응형으로서의 기준을 잡은 정도.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.