← Nuwir로 돌아가기
참고 자료 연구 / 2026년 11월 10일
콘텐츠가 먼저
개성은 곳곳에
이 연구는 두 종류의 참고 자료를 연결합니다. 아이디어와 사람을 모으는 플랫폼, 그리고 시각적인 이야기로 프로젝트를 설명하는 포트폴리오입니다. 이를 바탕으로 Nuwir의 기존 서체와 색상, 자체 제작한 오프닝 영상, 원본 UI의 격리 데모를 연결해 Nuwir만의 디자인을 구성했습니다.
01 / 관련 플랫폼
자료를 모으는 일에서 시작해 정리하고 연결하며 사람을 발견하는 과정으로 설명이 이어집니다. 짧은 행동의 순서 옆에 제품 시연을 배치해, 추상적인 네트워크를 구체적인 대상과 행동으로 이해하게 합니다.
적용: Nuwir의 질문 하나에서 답변과 기여자 프로필로 이어지는 흐름을 보여 줍니다. 각 단계를 선택하면 격리 데모에서 원본 UI의 질문, 답변과 프로필을 직접 탐색할 수 있습니다.
확인 범위: 현재 About 페이지의 내용과 브라우저에서 본 인터랙티브 Connect 단계. 확인 당시 페이지는 시스템의 다크 테마를 사용했습니다. 계정은 만들지 않았습니다.
Peerlist의 가이드는 한 사람의 작업과 프로젝트를 전문 분야의 정체성과 가까이 배치합니다. 눈에 보이는 기여를 통해 신뢰를 설명하는 방식을 비교해 볼 수 있는 참고 자료입니다.
적용: Nuwir의 프로필 섹션은 도움이 되는 답변에서 그 뒤에 있는 경험으로 이어집니다. 실제 이용 현황이나 커리어 성과를 주장하지 않고 이 관계를 보여 줍니다.
확인 범위: 공식 도움말과 제품 설명 문구. 콘텐츠 구성에 참고했으며, 시각적 스타일은 재현하지 않았습니다.
공개 홈페이지는 이름과 역할, 전문 분야를 통해 멘토링에 참여하는 사람을 구체적으로 보여 줍니다. 방문자에게 다음 행동을 제안하기 전에 어떤 대화를 나눌 수 있는지 설명합니다.
적용: Nuwir의 오프닝 이야기를 전문가 네트워크라는 맥락으로 연결한 뒤, 기여자와 그를 둘러싼 일의 맥락을 보여 줍니다. 참고 사이트의 평점, 이용 후기, 고객 수는 가져오지 않았습니다.
확인 범위: 멘토와 서비스의 정보 구조를 포함한 현재 공개 홈페이지의 문구. 예약 과정과 로그인 후 경험은 테스트하지 않았습니다.
확인한 첫 화면은 넉넉한 여백, 중심에 놓인 명확한 행동 요소, 주변의 시각 자료를 결합합니다. 이어지는 기능 소개는 제품에서 할 수 있는 구체적인 행동으로 서비스의 약속을 설명합니다.
적용: 도입부에서 실제 Nuwir 화면을 크게 보여 주고, 보조 설명은 차분하게 배치합니다. 떠 있는 이미지 구성과 쇼핑 콘텐츠는 Nuwir 디자인에 포함하지 않았습니다.
확인 범위: 현재 홈페이지의 브라우저 스크린샷과 접근 가능한 기능 설명 문구. 일부 삽입 영상에서 미디어를 사용할 수 없다는 오류가 표시되어, 해당 영상의 움직임은 분석하지 않았습니다.
02 / 포트폴리오의 이야기 구성
이 사례는 개요에 앞서 큰 프로젝트 제목과 간결한 부가 정보, 대형 사진을 보여 줍니다. 본문에서는 과제, 접근 방식, 장별로 이어지는 경험을 구분해 설명합니다.
적용: 인상적인 도입부 뒤에 읽기 편한 프로젝트의 각 장을 배치합니다. 제목과 인터페이스, 설명의 크기에 변화를 주어 각 섹션이 이야기의 다른 부분을 더하도록 구성합니다.
확인 범위: 실제 브라우저에서 본 첫 화면과 첫 이미지에서 개요로 이어지는 구간, 공개된 사례 본문. 연결된 Moves 사이트의 전체 경험과 모든 삽입 영상을 검토한 것은 아닙니다.
공개된 사례는 과제와 접근 방식, 정보를 차례로 드러내는 구성을 단계적으로 설명하며 복잡한 제품을 소개합니다. 수행한 작업과 측정된 결과도 구분합니다.
적용: 핵심 아이디어를 먼저 보여 주고, 필요할 때 격리 데모에서 내용을 직접 확인할 수 있게 합니다. Nuwir의 현재 프로토타입은 만들어 낸 성과 수치 없이 소개합니다.
확인 범위: 공식 사례 본문과 접근 가능한 정보 구조. 검토 당시 브라우저의 시각 영역이 빈 화면으로 표시되어, 삽입 영상의 움직임과 화면의 시각적 완성도는 확인하지 못했습니다.
03 / 디자인 방향
- 승인된 46초 오프닝 영상을 페이지 안에서 재생합니다. 일시 정지, 재생 위치 조절, 건너뛰기와 다시 보기 기능을 제공합니다.
- 영상의 분위기를 이어가는 구간에는 짙은 자주색을, 읽는 구간에는 따뜻한 종이색을 사용합니다. 기존 Inter 워드마크와 라벤더색 마침표를 유지하고, 붉은 실 색상을 절제된 강조색으로 사용합니다.
- 호기심 → 질문 → 답변 → 사람 → 더 넓은 기회로 이어지는 하나의 제품 이야기를 구성합니다.
- 제품 캡처 대신 원본 UI를 사용한 격리 데모를 페이지 안에 연결합니다. 질문과 답변, 프로필을 직접 탐색하고, 화면 폭을 바꾸어 같은 페이지의 반응형 구성을 확인할 수 있습니다. 별도 팝업을 열지 않습니다.
- 일반적인 페이지 스크롤과 간결한 목차를 사용하고, 움직임을 줄이는 기능을 제공합니다. 오프닝 영상과 주의를 다투는 별도의 카메라 투어는 추가하지 않습니다.
현재 체험은 질문 작성·답변·다시 방문하는 세 기능별 UI를 설명 옆에 둡니다. 같은 로컬 질문이 세 화면으로 이어지며, 답변 도착과 선택적 알림은 브라우저 안에서 명시적으로 재현합니다. 상단 데모로 되돌리는 이동이나 플러스형 설명 접기는 사용하지 않습니다.
기능 중심의 시연과 움직임 / 2026년 11월 11일
Linear Features와 Planning의 실제 브라우저 화면에서 큰 제품 이미지, 기능별 시각 자료와 짧은 설명의 위계를 확인했습니다. Lusion에서는 대형 시각 영역과 타이포 크기의 대비를 확인했습니다. 모든 프로젝트, 전체 스크롤 시퀀스나 정확한 타이밍을 분석했다고 주장하지 않습니다.
Nuwir에는 이 관찰을 기능만 남긴 원본 UI, 한 자리에서 이어지는 질문 흐름, 아홉 기능을 전환하는 탐색 영역으로 해석했습니다. 스크롤에 반응하는 큰 문구, 연결 그래픽, 단계·기능 선택 후의 짧은 전환은 이 포트폴리오를 위해 새로 설계한 움직임입니다. 참고 사이트의 로고·미디어·코드와 고유한 3D 장면은 사용하지 않았습니다.
프로필, 활동, 포트폴리오, 기업과 저널, 기회, 채용과 인턴십, 글 토론, 탐색, 저장 UI를 포함합니다. 공개 예시 자료와 원본 컴포넌트를 사용하며 계정·실제 지원·신청·음성 연결은 실행하지 않습니다. 질문 흐름의 답변 도착과 알림은 별도로 명시한 로컬 시뮬레이션입니다.
04 / 콘텐츠와 데모의 출처
기존 Nuwir 소스와 공개 에셋을 별도 폴더로 복사해 질문·답변·프로필의 원본 UI를 사용했습니다. 원본 서비스 소스는 수정하지 않았습니다. 계정 환경 파일과 연결 키는 복사하지 않았고, 실제 클라이언트를 제거한 뒤 데모 전용 데이터 처리로 교체했습니다.
이 포트폴리오의 데모에는 실제 계정·데이터베이스·이메일·알림 전송을 연결하지 않습니다. 브라우저의 외부 통신을 차단하고, 데모 서버도 읽기 요청만 받습니다. 질문·답변·댓글·반응은 해당 데모 브라우저 세션에만 저장합니다. ‘Reset demo’로 이 예시 데이터를 초기화할 수 있습니다. 계정, 신청, 외부 서비스 등 연결하지 않은 화면은 데모 범위 안내를 보여줍니다.
구독·Back·답변 근거·질문자 평가는 원본 앱의 실제 회원 콘텐츠에 구현되어 있지만, showcase 예시는 그 모든 컨트롤을 체험하는 환경이 아닙니다. 포트폴리오의 설계 설명과 데모의 체험 범위를 구분했습니다. 현재 서비스 이용 성과나 재방문율·답변율 개선을 검증했다고 주장하지 않습니다.
46초 오프닝 영상과 영문 원본 UI의 언어를 유지했습니다. 11월 1일의 기존 캡처와 출처 기록은 이전 버전 자료로 보존했으며, 현재 페이지의 제품 소개는 정적 캡처 대신 격리 데모를 사용합니다.
05 / 결정의 근거
- 공개 질문과 To: QUESTION_RECIPIENTS_2026-10-26.md, QUESTION_RECEIVING_2026-10-29.md — 받는 사람의 동의 설정과 공개 질문의 구분
- 답변의 이유와 개인 평가: ANSWER_EVIDENCE.md, HELPFUL_ANSWERS.md, PersonalProfile.jsx — 근거·한계·기여 이력과 질문자의 후기
- 선택적인 재방문: QuestionSubscription.jsx, SavedItems.jsx, follow-up-model.js — 명시적 구독, 비공개 저장, 원문으로 이어지는 후속 질문
- 궁금함과 공개 지지: QuestionBacking.jsx, CONTENT_RIGHTS_2026-11-01.md — Curious와 Back의 다른 의미와 공개 범위
- 보존과 노출 시정: question-retention.js, CONTENT_RIGHTS_2026-11-01.md — 답변 이후 삭제 제한과 별도의 개인정보·권리 조치
- 불확실한 요청: service-request.js, MixedFeed.jsx, member-data.js — 초안 보존, 게시 확인과 재시도의 구분
문제정의는 이 구현과 개발 기록을 바탕으로 정리한 설계 해석입니다. 사용자 조사·실험 결과로 표현하지 않았으며, 공개 출시 준비와 외부 서비스 연동 완료를 의미하지 않습니다.
작업 범위는 로컬 포트폴리오 웹사이트입니다. 원본 UI의 별도 데모를 로컬 실행했습니다. 서비스 원본 소스, 프로젝트 미러의 참고 자료, 계정, 데이터베이스와 호스팅은 변경하지 않았습니다. 위에서는 참고 자료에서 확인한 내용과 디자인에 적용한 해석을 구분했습니다. 외부 사이트의 스크린샷, 로고, 미디어는 Nuwir 페이지에 포함하지 않았습니다.
인터페이스 이미지 기록 보기
← 프로젝트로 돌아가기